大概长这样

请戳这里试用

大致功能：
设置好学习时间和休息时间，点击开始倒计时。

同时背景颜色区域逐渐变高直至倒计时结束时充满整个区域。

然后进入休息时间，开始倒计时。

注意在倒计时的时候改变时间按钮是不可用的，点击倒计时暂停后可以更改时间。

大致思路

很好想，就是个倒计时嘛。再加上背景高度变化，然而实际写起来有很多坑

遇到的坑

倒计时：

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了，写的非常乱。。