时间都去哪儿了? 番茄钟告诉你答案

目录

前言

计时器中的代码

version 1.0

version 2.0

version 3.0

总结

前言

        作为前端小灰 (不懂 但又不 完全不懂) 的博主,无意间接触到了番茄钟这个东西,也刚好最近进军JavaWeb阶段,所以就想着试试看能不能做出来这个效果。咱就是说给自己加了点任务,就属于这么一个大动作。

时间都去哪儿了? 番茄钟告诉你答案_第1张图片

再透个底,虽说咱就是一个纯纯的小灰,但是前端的知识以前也都学过,由于年代太过久远不提也罢。纵使岁月变迁,万物更替,但还是有一些亘古不变的东西,就比如说——大一那时候学前端U盘存的一些小东西。最后找到了一个能够跟本次需求稍微搭上边的东西——计时器。

计时器中的代码




    
    
    






version 1.0

实现过程:根据找到的计时器,先了解了一下基本的流程代码,再结合流程控制语句,修改了JS中的代码以及部分界面代码。

实现困难:开始和结束按钮功能绑定到一起这个地方花费了一些时间,其他部分就没啥困难了。

功能实现:这个版本主要实现了数字的基本控制和按钮的功能实现,能够使数字每隔1秒依次递减,把开始和暂停的按钮功能绑定在了一起,结束按钮的功能也得到了完善。

示例代码:现在回想起来才意识到早就已经被覆盖了,那就没得看咯,下次一定注意...

时间都去哪儿了? 番茄钟告诉你答案_第2张图片

心得体会:果然,有Java基础再学JS也就没有那么难,写起来还是比较得心应手,后面看代码会发现除了一些固定的需求写法之外,逻辑判断咱还是更倾向于Java。还有就是实现过程中,觉得难以实现就把它拆分成一个个小的需求,做起来就没那么困难了。

version 2.0

实现过程:在上一个版本的基础上,定义了一个下拉列表供用户选取时间,并更新了JS的代码实现正确的时间流动展示。

实现困难:获取下拉列表的时间值,能够在下边文本框正确显示。不得不说这个需求确实是超纲了,怎么获取到都不知道,但是在互联网时代这都不是问题,所以,咱就请教了一位身边的前端大佬才实现了这个功能。

时间都去哪儿了? 番茄钟告诉你答案_第3张图片

功能实现:主要实现了用户选取不同的时间后,在文本框正确显示并根据按钮功能正常执行文本框依照时间的格式依次递减,直到减到0为止就提示 时间到!

心得体会:你不得不承认的是,不是所有的东西你都会,需要不断的学习才能完善自己。学习的途径有很多,没有人在意你走的哪一条路,大多数人只会看你的结果是好是坏。

version 3.0

实现过程:在上一个版本的基础上,增加了界面元素,测试了基本功能,感觉可以拉出来溜溜了。

时间都去哪儿了? 番茄钟告诉你答案_第4张图片

实现困难:选择时间后改变盒子属性,这部分也是博主不会的地方,不知道该怎样去获取并改变两个盒子的属性值,再一次的请教了大佬后也就迎刃而解了。

温馨提示:

  • 本网页实现使用的是IDEA软件
  • 自行运行使用效果更佳,图片路径要注意

图片资源:

时间都去哪儿了? 番茄钟告诉你答案_第5张图片
时间都去哪儿了? 番茄钟告诉你答案_第6张图片
时间都去哪儿了? 番茄钟告诉你答案_第7张图片

最终代码:




    
    番茄钟

    

    



请选择你要设置的时间:



  

实现效果:

时间都去哪儿了? 番茄钟告诉你答案_第8张图片

时间都去哪儿了? 番茄钟告诉你答案_第9张图片

总结

时间能够让人成就自我,也能让人自甘堕落!

时间都去哪儿了? 番茄钟告诉你答案_第10张图片


你可能感兴趣的:(JavaWeb,前端,javascript,开发语言)