大概长这样
大致功能：
设置好学习时间和休息时间，点击开始倒计时。
同时背景颜色区域逐渐变高直至倒计时结束时充满整个区域。
然后进入休息时间，开始倒计时。
注意在倒计时的时候改变时间按钮是不可用的，点击倒计时暂停后可以更改时间。
大致思路
很好想，就是个倒计时嘛。再加上背景高度变化，然而实际写起来有很多坑
遇到的坑
倒计时：
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，再根据时间动态改变高度就可以达到效果了
var fillLength = 1 - (secs / (sltime.innerHTML * 60)); //获取剩余时间与总时间的比值
fill.style.height = fillLength * 300 + "px"; //根据比值设置高度
改变时间按钮的控制
当倒计时运行的时候，按钮是不可点击的，这里需要记录按钮是否被点击，我的做法是建一个全局变量，并根据按钮状态设置true or false，点击一次按钮改变一次值
var stopTime = false //初始化全局变量
clock.onclick = function ifStop() {
if (stopTime) {
stopTime = false; //点击改变按钮状态
} else {
stopTime = true;
if (timeName.innerHTML == "休息一下吧") {
firstToHms();//运行休息倒计时
} else {
secondsToHms();//运行学习倒计时
}
}
};
然后呢我就给改变时间函数加判断条件，只有满足条件才能继续执行，结果第一次满足条件之后后面一直就可以运行了。。我的理解是函数被调用之后，运行完并没有销毁，下次再触发还会继续运行。那判断条件不是没用了吗。于是我又写了
setInterval(changeTime,1000);
每隔一秒钟去判断一次是否满足条件。。。手动监听按钮的状态，也是没谁了
大致就是这么多，代码放在Github了，写的非常乱。。
