题目:
功能: 可以启动一个 25 分钟的番茄钟, 计时器将在 25 分钟后停止.

功能: 可以重置番茄钟的状态以便启动下一次计时.

功能: 可以为每个番茄钟自定义时长.
演示:
【FCC】番茄时钟pomodoro clock网页版-风君子博客

代码
【HTML】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PomodoroClock</title>

    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    &lt;h1&gt;<a href="https://www.fengjunzi.com/tag/%e7%95%aa%e8%8c%84%e6%97%b6%e9%92%9f" title="浏览关于“番茄时钟”的文章" target="_blank" class="tag_link">番茄时钟</a>Pomodoro Clock&lt;/h1&gt;

    &lt;div class=&quot;main&quot;&gt;
        &lt;div class=&quot;control&quot;&gt;
            &lt;div class=&quot;break&quot;&gt;
            &lt;p&gt;BREAK LENGTH&lt;/p&gt;
                &lt;i class=&quot;fa fa-minus-square-o&quot; aria-hidden=&quot;true&quot; id=&quot;break-minus&quot;&gt;&lt;/i&gt;
                &lt;span id=&quot;break-length&quot;&gt;5&lt;/span&gt;
                &lt;i class=&quot;fa fa-plus-square-o&quot; aria-hidden=&quot;true&quot; id=&quot;break-plus&quot;&gt;&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class=&quot;length&quot;&gt;
            &lt;p&gt;SESSION LENGTH&lt;/p&gt;
                &lt;i class=&quot;fa fa-minus-square-o&quot; aria-hidden=&quot;true&quot; id=&quot;session-minus&quot;&gt;&lt;/i&gt;
                &lt;span id=&quot;session-length&quot;&gt;25&lt;/span&gt;
                &lt;i class=&quot;fa fa-plus-square-o&quot; aria-hidden=&quot;true&quot; id=&quot;session-plus&quot;&gt;&lt;/i&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;clock&quot;&gt;
            &lt;h2 id=&quot;show-title&quot;&gt;Session&lt;/h2&gt;
            &lt;h2 id=&quot;show-time&quot;&gt;25:00&lt;/h2&gt;
            &lt;span id=&quot;per&quot;&gt;&lt;/span&gt;

        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src='http://cdn<a href="https://www.fengjunzi.com/tag/js" title="浏览关于“js”的文章" target="_blank" class="tag_link">js</a>.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/clock.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

【css】

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    width: 100%;
    background-color: #cb4042;
    overflow: hidden;
}
h1{
    text-align: center;
    margin-top: 5%;
    color: #fff;
    /* font-family: 'Sedgwick Ave Display', cursive; */
}

.main{
    margin-top: 5%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 70%;
    text-align: center;
}

.control{
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
}

.break{
    display: inline;
    padding: 0 30px; 
}
.length{
    display: inline;
    padding: 0 30px;
}
span{
    font-size: 2em;
    color: #fff;
    font-family: 'Bitter', serif;
}
.fa{
    font-size: 1.4em;
    color: #fff;
    cursor: pointer;
    margin: 0 10px;
}

.control p{
    color: #b5caa0;
}

.clock{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border:4px solid #a8d8b9;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 30px;
    cursor: pointer;
    z-index: 20;
    overflow: hidden;
}

.clock:before{
    content: '';
    position: absolute;
    border:4px solid #cb4042;
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.clock h2{
    font-family: 'Bitter', serif;
    font-size: 2.5em;
    margin-top: 80px;
    color: #fff;
}

#per{
    margin: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 0%;
    width: 100%;
    background-color: #b5caa0; 
    /* background-color: #3f2b36; */
    z-index: -1;
}

【js】

$(document).ready(function(){
    var session = 25;       //这个是默认工作时间,用在设置那儿显示的,这里以分钟为单位,且超过60也是分钟
    var breaklength = 5;            //设置break时长——休息时长,细节同session
    var flag = 1;           //设置工作状态,1是工作的暂停,2是正在休息的暂停,3是在工作中,4是休息中
    var sec = session*60;   //用来记录变化中的时间,单位为秒
    var percent = 0;    //记录背景颜色显示的高度,0-100,是百分比

    $("#break-minus").on("click",function(){
        if(flag !== 1 && flag !== 2){
            return;         //如果非暂停状态,点击无效
        }
        breaklength--;
        if(breaklength < 1){
            breaklength = 1;
        }
        $("#break-length").html(breaklength);
        if(flag === 2){
            //如果是休息的暂停,一旦改了,就又对sec产生了修改
            sec = breaklength*60;
        }
        showHMS(breaklength,2);
    });
    $("#break-plus").on("click",function(){
        if(flag !== 1 && flag !== 2){
            return;         //如果非暂停状态,点击无效
        }
        breaklength++;
        $("#break-length").html(breaklength);
        if(flag === 2){
            //如果是休息的暂停,一旦改了,就又对sec产生了修改
            sec = breaklength*60;
        }
        showHMS(breaklength,2);
    });
    $("#session-minus").on("click",function(){
        if(flag !== 1 && flag !== 2){
            return;         //如果非暂停状态,点击无效
        }
        session--;
        if(session < 1){
            session = 1;
        }
        $("#session-length").html(session);
        if(flag === 1){
            //如果是工作的暂停,一旦改了,就又对sec产生了修改
            sec = session*60;
        }
        showHMS(session,1);
    });
    $("#session-plus").on("click",function(){
        if(flag !== 1 && flag !== 2){
            return;         //如果非暂停状态,点击无效
        }
        session++;
        $("#session-length").html(session);
        if(flag === 1){
            //如果是工作的暂停,一旦改了,就又对sec产生了修改
            sec = session*60;
        }
        showHMS(session,1);
    });

    //在时钟上显示时分秒,传两个参数,一个是分钟,一个是状态。
    //如果在工作的暂停中,修改休息的时长,不改变时钟上的显示,state有两个取值,取1时表示修改工作时长,取2表示修改休息时长
    var showHMS = function(min,state){
        if(state  !== flag){
            return;         //如果不是在对应的暂停状态,就不改变时钟上显示的值
        }
        var show = "";
        if(min >= 60){
            show += parseInt(min/60)+":";
            min = min%60;
        }
        if(min<10){
            show+="0";
        }
        show+=min+":00";
        $("#show-time").html(show);
    };




    //开始后时间的变化,参数是剩下的秒数
    function timeChange(){
        var temp = sec;
        if(flag === 1 || flag === 2){
            //如果是暂停中,就不变时间
            return;
        }
        if(sec === 0){
            if(flag === 3){
                flag = 4;
                sec = breaklength*60;
                $("#show-title").html("Break");
            }else{
                flag = 3;
                sec = session*60;
                $("#show-title").html("Session");
            }

        }

        var showHMS = "";
        if(temp>=3600){
            showHMS+=parseInt(second/360)+":";
            temp = temp%360;
        }
        if(temp<70){
            showHMS+="0";
        }
        showHMS+=parseInt(temp/60)+":";
        temp = temp%60;
        if(temp<10){
            showHMS+="0";
        }
        showHMS+=temp;


        //console.log(showHMS);
        $("#show-time").html(showHMS);
        if(flag === 3){
            //工作中
            $("#per").css('background-color','#b5caa0');
            if(sec === 0){
                percent = 100;
            }else{
                percent = (session*60-sec)/session/60*100;
            }
            $("#per").css('height',percent+'%');
        }
        if(flag === 4){
            //休息中
            $("#per").css('background-color',"#3f2b36");
            if(sec === 0){
                percent = 100;
            }else{
                percent = (breaklength*60-sec)/breaklength/60*100;
            }
            $("#per").css('height',percent+'%');
        }
        sec--;
        setTimeout(timeChange,1000);
    };



    //时钟点击事件——开始与暂停的转换,及开始后时间的变化
    $(".clock").on("click",function(){
        if(flag === 1){
            flag = 3;
        }else if(flag === 3){
            flag = 1;
        }else if(flag === 2){
            flag = 4;
        }else if(flag === 4){
            flag = 2;
        }

        //console.log(sec);
        timeChange();
    });




});