脚本宝典收集整理的这篇文章主要介绍了时间都去哪儿了? 番茄钟告诉你答案,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
前言
计时器中的代码
version 1.0
version 2.0
version 3.0
总结
作为前端小灰 (不懂 但又不 完全不懂) 的博主,无意间接触到了番茄钟这个东西,也刚好最近进军JavaWeb阶段,所以就想着试试看能不能做出来这个效果。咱就是说给自己加了点任务,就属于这么一个大动作。
再透个底,虽说咱就是一个纯纯的小灰,但是前端的知识以前也都学过,由于年代太过久远不提也罢。纵使岁月变迁,万物更替,但还是有一些亘古不变的东西,就比如说——大一那时候学前端U盘存的一些小东西。最后找到了一个能够跟本次需求稍微搭上边的东西——计时器。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var c = 0;
var t;
function new1() {
document.getElementById("tet").value = c;
c = c + 1;
t = setTimeout("new1()", 1000);
}
function haha() {
clearTimeout(t);
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="new1()">
<input id="tet" type="text" value="0">
<input type="button" value="停止" onclick="haha()">
</body>
</html>
实现过程:根据找到的计时器,先了解了一下基本的流程代码,再结合流程控制语句,修改了JS中的代码以及部分界面代码。
实现困难:开始和结束按钮功能绑定到一起这个地方花费了一些时间,其他部分就没啥困难了。
功能实现:这个版本主要实现了数字的基本控制和按钮的功能实现,能够使数字每隔1秒依次递减,把开始和暂停的按钮功能绑定在了一起,结束按钮的功能也得到了完善。
示例代码:现在回想起来才意识到早就已经被覆盖了,那就没得看咯,下次一定注意...
心得体会:果然,有Java基础再学JS也就没有那么难,写起来还是比较得心应手,后面看代码会发现除了一些固定的需求写法之外,逻辑判断咱还是更倾向于Java。还有就是实现过程中,觉得难以实现就把它拆分成一个个小的需求,做起来就没那么困难了。
实现过程:在上一个版本的基础上,定义了一个下拉列表供用户选取时间,并更新了JS的代码实现正确的时间流动展示。
实现困难:获取下拉列表的时间值,能够在下边文本框正确显示。不得不说这个需求确实是超纲了,怎么获取到都不知道,但是在互联网时代这都不是问题,所以,咱就请教了一位身边的前端大佬才实现了这个功能。
功能实现:主要实现了用户选取不同的时间后,在文本框正确显示并根据按钮功能正常执行,文本框依照时间的格式依次递减,直到减到0为止就提示 时间到!
心得体会:你不得不承认的是,不是所有的东西你都会,需要不断的学习才能完善自己。学习的途径有很多,没有人在意你走的哪一条路,大多数人只会看你的结果是好是坏。
实现过程:在上一个版本的基础上,增加了界面元素,测试了基本功能,感觉可以拉出来溜溜了。
实现困难:选择时间后改变盒子属性,这部分也是博主不会的地方,不知道该怎样去获取并改变两个盒子的属性值,再一次的请教了大佬后也就迎刃而解了。
温馨提示:
- 本网页实现使用的是IDEA软件
- 自行运行使用效果更佳,图片路径要注意
图片资源:
最终代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>番茄钟</title> <style> /*两个大盒子*/ .div_c { /*设置宽高*/ width: 98%; height: 700px; /*绝对定位,并居中盒子*/ position: absolute; left: 50%; top: 10px; margin-left: -49%; /*内容居中*/ text-align: center; } /*第一个大盒子*/ #d1 { /*设置背景图*/ background: url("../img/bg_1.jpg") no-repeat center; /*设置垂直高度,用于显示在最上层*/ z-index: 20; } /*第二个大盒子*/ #d2 { background: url("../img/bg_2.jpg") no-repeat center; z-index: 10; } /*第二个大盒子里面的小盒子*/ #d2_time { width: 500px; height: 400px; margin: 0 auto; text-align: center; background: url("../img/bg_b1.jpg") no-repeat center; } /*下拉列表*/ #time { width: auto; height: 26px; } /*显示的文本框*/ #test { width: 160px; height: auto; font-size: 60px; font-family: 楷体; text-align: center; margin-top: 28%; margin-left: 12px; } </style> <script> //定义执行顺序 window.addEventListener('load', function () { let minute; //分钟数 let second = "00"; //毫秒值 /*获取下拉列表的值*/ let inputs = document.getElementById('time'); inputs.oninput = function () { //获取分钟数 minute = inputs.value; //设置用于判断用户点击次数的变量值 let n = 0; let t; //文本框赋初始值 document.getElementById("test").value = minute + ":" + second; //更改点击后第一个大盒子的z-index let d1 = document.getElementById("d1"); let time = document.getElementById("time"); time.addEventListener("click", function () { if (inputs.value !== "") d1.style.zIndex = "0"; }); //运行 function run() { if (minute !== 0 || parseInt(second) !== 0) { if (parseInt(second) === 0) { minute--; second = 59; } document.getElementById("test").value = minute + ":" + second; second--; t = setTimeout(run, 1000); } else { document.write("时间到!") } } //停止 function stop() { clearTimeout(t); } /*点击事件*/ let start_btn = document.querySelector('.start'); start_btn.addEventListener('click', function () { if (minute !== "") { n++; if (n % 2 === 1) run(); else stop(); } }) //结束 let end_btn = document.querySelector('.end'); end_btn.addEventListener('click', function () { //刷新页面 location.reload(); //重置数据 clearTimeout(t); n = 0; document.getElementById("test").value = ""; }) } }) </script> </head> <body> <div id="d1" class="div_c"> <div style="margin-top: 130px"> <span style="font-size: 26px; color: wheat; font-family: 楷体"><b>请选择你要设置的时间:</b></span> <select name="province" id="time"> <option value="">--请选择--</option> <option value="10">10分钟</option> <option value="30">30分钟</option> <option value="40">40分钟</option> <option value="60">60分钟</option> </select><br/><br/> </div> </div> <div id="d2" class="div_c"> <div id="d2_time"> <input id="test" type="text"><br/><br/> <input type="button" value="开始/暂停" class="start"> <input type="button" value="结束" class="end"> </div> </div> </body> </html>
实现效果:
时间能够让你成就自我,也能让你自甘堕落!
以上是脚本宝典为你收集整理的时间都去哪儿了? 番茄钟告诉你答案全部内容,希望文章能够帮你解决时间都去哪儿了? 番茄钟告诉你答案所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。