学习资料
http://v.apelearn.com/student.php
要求
通过点击不同的按钮实现一个简单计时器的启动、暂停、复位的效果;
知识点
1.时间的计算: 参考http://www.jianshu.com/p/5e57c715284a
2.小于10的时分秒的显示方式；
3.定时器setInterval()的使用及清除定时器clearInterval(timer);
实现思路
开始计时
1.获取开始按钮，计时器容器，定义一个变量要存储时间（defaultTime）；
2.给开始按钮绑定点击事件；
3.使用定时器setInterval(),每个一秒执行一次定时器中的回调函数;
4.在定时器回调函数中，每执行一次，存储时间的变量defaultTime自增1，计算小时；
5. 使用计算小时候剩余的时间来计算分钟数，以及秒数；
6.将得到的时分秒的整合值作为时间容器的内容；
demo代码
HTML
<div class="timer">
<h2>简易定时器</h2>
<div class="btn-group">
<button class="btn btn1">start</button>
<button class="btn btn2">pause</button>
<button class="btn btn3">counter</button>
<button class="btn btn4">reset</button>
</div>
</div>
CSS
.timer{width:600px;height:300px;margin:30px auto;background:#eee;padding:10px 15px;}
.btn-group{width:100%;height:34px;line-height:34px;}
.btn{width:60px;height:34px;line-height:34px;text-align:center;border:none;outline:none;background:#00a0e6;border-radius:5px;color:#fff;margin-right:10px;}
.time,.save-time{width:100%;height:60px;line-height:60px;margin-top:10px;background:bisque;text-align:center;border-radius:5px;color:#666;}
JS
var defaultTime =0;
vartimer =null;
varhours,minutes,seconds,liftTime,time;
/*
* 点击开始按钮，每个一秒执行一次回调函数
* 开始计时
*/
$('.btn1').click(function() {
timer =setInterval(function() {
defaultTime++;
//有多少小时
hours =parseInt(defaultTime / (60*60));
//计算小时候剩余的时间
liftTime = defaultTime % (60*60);
//多少分钟
minutes =parseInt(liftTime /60);
//秒
seconds =parseInt(liftTime %60);
time = (hours >9? hours :'0'+ hours) +':'
+ (minutes >9? minutes :'0'+ minutes) +':'
+ (seconds >9? seconds :'0'+ seconds);
$('.time').html(time);
},1000)
});
/*
* 暂停
*/
$('.btn2').click(function() {
clearInterval(timer);
});
/*
* 暂存某一时刻的时间
*/
$('.btn3').click(function() {
$('.save-time').html(time);
});
/*
* 复位
*/
$('.btn4').click(function() {
clearInterval(timer);
$('.time').html('00:00:00');
});
暂停定时
清除定时器
复位
清除定时器，并将定时器容器的内容设置为: 00:00:00
效果
