网页版番茄时钟的制作——Pomodoro Clock
番茄时钟的功能想必大家都熟悉，简单点说就是工作时间+休息时间。
该网页就实现了这两个功能，可以自定义工作时间与休息时间，且允许暂停。
先放张效果图：
效果演示：戳我进入演示
解释一下，session length表示工作时长，break length表示休息时长，若要看div填充效果则建议将session length改成1来观看，效果比较明显。
下面附上代码，里面关键部分有较详细的注释，可以直接粘贴拿去直接运行的。
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 href="https://fonts.googleapis.com/css?family=Bitter|Sedgwick+Ave+Display" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Yinyou PomodoroClock</h1>
<div class="main">
<div class="control">
<div class="break">
<p>BREAK LENGTH</p>
<i class="fa fa-minus-square-o" aria-hidden="true" id="break-minus"></i>
<span id="break-length">5</span>
<i class="fa fa-plus-square-o" aria-hidden="true" id="break-plus"></i>
</div>
<div class="length">
<p>SESSION LENGTH</p>
<i class="fa fa-minus-square-o" aria-hidden="true" id="session-minus"></i>
<span id="session-length">25</span>
<i class="fa fa-plus-square-o" aria-hidden="true" id="session-plus"></i>
</div>
</div>
<div class="clock">
<h2 id="show-title">Session</h2>
<h2 id="show-time">25:00</h2>
<span id="per"></span>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/clock.js"></script>
</body>
</html>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();
});
});
