钟表的定时器，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<style type="text/css" id="sty">
/*清除默认样式*/
*{
margin:0;
padding:0;
list-style:none;
}
/*表盘样式*/
#box1{
width:200px;
height:200px;
border-radius:50%;
line-height: 210px;
}
/*一般表盘刻度样式*/
.scale{
width:1px;
height:6px;
background:#fff;
position:absolute;
left:50%;
transform-origin:center 100px;
}
/*整时表盘刻度样式*/
.bs{
width:1px;
height:6px;
background:#fff;
position:absolute;
left:50%;
transform-origin:center 100px;
}
.anima{
animation: ani 1s linear;
}
@-webkit-keyframes ani{
from{
background: #fff;
}
to{
background: red;
}
}
@-moz-keyframes ani{
from{
background: #fff;
}
to{
background: red;
}
}
@-ms-keyframes ani{
from{
background: #fff;
}
to{
background: red;
}
}
</style>
<style>
body{
background: url('img/2332.png') no-repeat center;
background-size:100% 150%;
}
.item1{
color: #fff;
margin-top: 19.1%;
margin-bottom: 10%;
height:38px;
}
.item3{
width:90%;
margin-top: 80px;
}
</style>
</head>
<body>
<div class="box" align="center">
<div class="item1">
<span id="date" style="font-size: 22px;">录 音</span>
</div>
<div class="item2">
<div id="box1">
<img src="img/11.png" alt="" style="width: 21px;height:25px;">
</div>
</div>
<div class="item3" align="center">
<div style="overflow: hidden;">
<div style="float: left;width:33.3%;">
<div style="width:66px;height:66px;border:1px solid #fff;border-radius:33px;background: url('img/2.png')no-repeat center;background-size:22px;"></div>
<p style="line-height: 56px;color: #fff;font-size: 14px;">试听</p>
</div>
<div style="float: left;width:33.3%;" id="start">
<div id="start1" style="width:66px;height:66px;border:1px solid #fff;border-radius:33px;background: url('img/22.png')no-repeat center;background-size:35px;"></div>
<p id="p1" style="line-height: 56px;color: #fff;font-size: 14px;">开始读书</p>
</div>
<div style="float: left;width:33.3%;">
<div style="width:66px;height:66px;border:1px solid #fff;border-radius:33px;background: url('img/45.png')no-repeat center;background-size:22px;"></div>
<p style="line-height: 56px;color: #fff;font-size: 14px;">保存上传</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var a=true;
var b=0;
var i;
var n=2;
$('#start').click(function(){
if(a==true){
$('#start1').css('background','url("img/34.png") no-repeat center');
$('#start1').css('backgroundSize','15px');
$('#p1').html('结束读书');
$('#date').html('00:00:0'+b);
i=setInterval(function(){
++b;
$('#date').html('00:00:0'+b);
if(b>=10){
$('#date').html('00:00:'+b);
}
if(b>=59){
$('#start1').css('background','url("img/22.png") no-repeat center');
$('#start1').css('backgroundSize','35px');
$('#p1').html('开始读书');
$('#date').html('00:00:59');
clearInterval(i)
}
//每一秒执行一次这个函数
//b+2的原因是一次性走了两个格
for(var k=-1;k<b+2;k++){
document.getElementById('box1').getElementsByTagName('span')[k+b].style.background='red';
}
},1000);
$('#date').css('fontSize','35px');
return a=false;
}else if(a==false){
$('#start1').css('background','url("img/22.png") no-repeat center');
$('#start1').css('backgroundSize','35px');
$('#p1').html('开始读书');
clearInterval(i)
return a=true;
}
});
</script>
<script>
var N=120;
var oBox=document.getElementById('box1');
for(var i=0; i<N; i++){
var oSpan=document.createElement('span');
//判断当前刻度是不是整时刻度，是的话加整时刻度的class；不是的话加一般刻度的class.
if(i%3==0){
oSpan.className='bs';
//加整时刻度的数字，如果是0的话让其等于12.
oSpan.innerHTML='<em>'+'<\/em>';
//60秒即60个小刻度将整个圆分成60份，换成角度即360/60=6度；
//每隔2度放一个刻度.
oSpan.children[0].style.transform='rotate('+-i*2+'deg)';
}else{
oSpan.className='scale';
}
oBox.appendChild(oSpan);
oSpan.style.transform='rotate('+3*i+'deg)';
}
</script>
