大致功能:
设置好学习时间和休息时间,点击开始倒计时。
同时背景颜色区域逐渐变高直至倒计时结束时充满整个区域。
然后进入休息时间,开始倒计时。
注意在倒计时的时候改变时间按钮是不可用的,点击倒计时暂停后可以更改时间。
请戳这里试用
大致思路
很好想,就是个倒计时嘛。再加上背景高度变化,然而实际写起来有很多坑
遇到的坑
倒计时:
1 2 3 4 5 6 7 8 9 10 11 12 13
| function showTime() { secs -= 1; //时间递减(已转换为秒钟) var h = Math.floor(secs / 3600); //小时 var m = Math.floor(secs % 3600 / 60); //分钟 var s = Math.floor(secs % 3600 % 60); //秒钟 return ( (h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s ); var setTime = setTimeout(showTime, 1000); if (secs < 0) { clearInterval(setTime); //倒计时完毕清除计数器 } }
|
把得到的时间转换成毫秒,再去操作。
大概就是这样写,其实不难想,关于倒计时更多的东西建议去看这篇文章
写一个学习时间的倒计时,然后倒计时为0时,清除倒计时,并运行休息倒计时。
背景高度的变化
css里使用绝对定位,并且设置bottom
为0
,再根据时间动态改变高度就可以达到效果了
1 2
| var fillLength = 1 - (secs / (sltime.innerHTML * 60)); //获取剩余时间与总时间的比值 fill.style.height = fillLength * 300 + "px"; //根据比值设置高度
|
改变时间按钮的控制
当倒计时运行的时候,按钮是不可点击的,这里需要记录按钮是否被点击,我的做法是建一个全局变量,并根据按钮状态设置true or false
,点击一次按钮改变一次值
1 2 3 4 5 6 7 8 9 10 11 12 13
| var stopTime = false //初始化全局变量 clock.onclick = function ifStop() { if (stopTime) { stopTime = false; //点击改变按钮状态 } else { stopTime = true; if (timeName.innerHTML == "休息一下吧") { firstToHms();//运行倒计时 } else { secondsToHms();//运行倒计时 } } };
|
然后呢我就给改变时间函数加判断条件,只有满足条件才能继续执行,结果第一次满足条件之后后面一直就可以运行了。。我的理解是函数被调用之后,运行完并没有销毁,下次再触发还会继续运行。那判断条件不是没用了吗。于是我又写了
1
| setInterval(changeTime,1000);
|
每隔一秒钟去判断一次是否满足条件。。。手动监听按钮的状态,也是没谁了
大致就是这么多,代码放在Github了,写的非常乱。。