项目描述(需求分析):使用原生JS加JQery实现下面效果
1. 通过点击Break Length或者Session Length下面的- 、+按钮设置倒计时时间;
2. 点击改变时钟状态,点击Break显示为Break、点击Session显示为Session;
3. 设置时间后,进入倒计时状态,并且显示为00: 00:00 的显示模式;
4. Session状态结束后,倒计时转为Break,如此反复;
5. 时钟背景颜色在Session时设置为一种颜色,Break时设置为另一种颜色,并且高度随着时间变化。
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/index.css">
<title>tomato clock</title>
</head>
<body>
<div class="container">
<div class="tomato">Tomato Clock</div>
<div class="setNum">
<div class="break">
<div class="break-title">Break Length</div>
<div class="break-minute">-</div>
<div class="break-num"></div>
<div class="break-add">+</div>
</div>
<div class="session">
<div class="session-title">Session Length</div>
<div class="session-minute">-</div>
<div class="session-num"></div>
<div class="session-add">+</div>
</div>
</div>
<div class="circle">
<div class="model">
<div class="bg"></div>
<div class="title"></div>
<div class="time"></div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
js:http://libs.baidu.com/jquery/2.0.0/jquery.min.js JQuery百度CDN;
js自撰部分
var breakTime = 5, sessionTime = 25, model = 'Session', current = sessionTime * 60, flag = false, timer; function init(){ $('.break-num').text(breakTime); $('.session-num').text(sessionTime); $('.title').text(model); $('.time').text(sessionTime); clickEvent(); } init(); function clickEvent(){ $('.break-minute').click(function(){ changeNum('b',-1); }) $('.break-add').click(function(){ changeNum('b',1); }) $('.session-minute').click(function(){ changeNum('s',-1); }) $('.session-add').click(function(){ changeNum('s',1); }) $('.model').click(function(){ if(flag){ clearInterval(timer); }else{ timer = setInterval(function(){ changeTime(); },1000) } flag = !flag; }) } function changeTime(){ current --; if( model == 'Session' ){ if( current < 0 ){ current = breakTime * 60; model = 'Break'; $('.title').text(model); } $('.bg').css('background','orange'); } else{ if( current < 0 ){ current = sessionTime * 60; model = 'Session'; $('.title').text(model); } $('.bg').css('background','green'); } if( model == 'Session' ){ // 高度百分比换算公式:(1-current/(breakTime*60))*100 + '%' $('.bg').height((1-current/(sessionTime*60))*100 + '%') }else if( model == 'Break'){ $('.bg').height((1-current/(breakTime*60))*100 + '%') } $('.time').text(seversion(current)); } function seversion(time){ current = parseInt(time); var h = parseInt(current/3600), m = parseInt(current%3600/60), s = parseInt(current%3600%60); return double(h) + ':' + double(m) + ':' + double(s); } function double(num){ if( num < 10 ){ return num = '0' + num; }else{ return num = '' + num; } } function changeNum(str,num){ if(!flag){ if( str=='b' ){ breakTime += num; if( breakTime < 1 ){ breakTime = 1; } current = breakTime*60; model = 'Break'; $('.title').text(model); $('.break-num').text(breakTime); $('.time').text(breakTime); }else{ sessionTime += num; if( sessionTime < 1){ sessionTime = 1; } current = sessionTime*60; model = 'Session'; $('.title').text(model); $('.session-num').text(sessionTime); $('.time').text(sessionTime); } } }
css部分:
body{ margin: 0; padding: 0; user-select: none; background: #222; } .container{ width: 800px; margin: 0 auto; text-align: center; color: #fff; } .tomato{ font-size: 6em; margin: 80px 0; font-weight: bold; } .setNum{ width: 100%; height: 120px; } .break{ float: left; } .session{ float: right; } .break-title,.session-title{ font-size: 36px; } .break-minute,.break-num,.break-add,.session-minute,.session-num,.session-add{ font-size: 24px; padding: 15px; display: inline-block; } .break-minute,.break-add,.session-minute,.session-add{ cursor: pointer; } .circle{ margin: 0 auto; height: 400px; width: 400px; border: 5px solid orange; border-radius: 50%; } .model{ position: relative; margin: 8px; width: 384px; height: 384px; border-radius: 50%; overflow: hidden; } .bg{ position: absolute; z-index: -1; bottom: 0; height: 0; width: 100%; background: orange; } .title{ font-size: 72px; margin: 60px 0; } .time{ font-size: 64px; margin-top: 40px; }
JavaScript笔记:
1、换算时、分、秒:var h = parseInt(current/3600),
m = parseInt(current%3600/60),
s = parseInt(current%3600%60);
return h + ':' + m + ':' + s;