先来看下效果
制作源泉(或遇到的苦恼)
一般的计时器,一般的思路,要做成上图的效果,首先会想到的是通过setTimeout一毫秒一毫秒的计数去实现,但是每当setTimout执行该函数的时候,中间消耗了其他资源时间(因为js是单线程的),从而产生误差,使得计时器计时不准确,计时时间越长越能表现出来。
核心思想(或解决办法)
每当计时器开始,截取此刻的时间startTime(系统时间),然后使用计时器setTimeout不断获取系统的时间减取startTime,通过求余来计算毫秒时间(打印出来的结果肯定不是一毫秒一毫秒计算,会把时间误差计算进去,从而使得计时器更加准确,有兴趣的可以打开控制台看看看打印的数据)
上代码:
【start.js】
var imgPath = "images/";
$(function(){
//rem单位计算
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
//给所有页面的img图片加上path路径
$("img").each(function(){
imgName = this.name;
this.src = imgPath+imgName;
})
})
var n=0; //计算毫秒
var s=0; //计算秒
var timer=null;
var is_onstart=false; //是否点击开始
var is_onstop=false; //是否点击暂停
var count=0; //点击开始次数
var sstart=0; //记录暂停时的次数
//开始计时
function play() {
var interval=1; // 执行方法等待的时间
var start=Date.now(); // 记录开始的某一刻时间
count++;
is_onstart=true;
if(is_onstart && (count==1)){
timer=setTimeout(step,interval);
function step(){
var msecond = (Date.now()-start)+sstart; // 毫秒误差处理
s= parseInt(msecond/1000);
$('#second').text(s);
n= msecond%1000;
console.log(n)
var nStr = n
// 补零
if(n<10){
nStr="00"+n;
}
if(n<100 && n>10 || n==10){
nStr="0"+n;
}
$('#millisecond').text(nStr);
if(is_onstart){ // 计时
setTimeout(step,interval);
}
else{ // 停止计时
sstart=msecond;
clearTimeout(timer);
}
}
}
};
// 暂停计时器
function pause(){
is_onstart=false;
is_onstop=true;
count=0;
}
// 重置计时器
function setup() {
clearTimeout(timer);
is_onstart=false;
count=0;
n=0;
s=0;
m=0;
sstart=0;
$('#second').text("0");
$('#millisecond').text("000");
}
【start.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精准计时器</title>
<link rel="stylesheet" href="css/start.css">
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="js/start.js"></script>
</head>
<body class="bg">
<div class="flex flex_center flex_middle">
<div>计时器:</div>
<img name="clock.png" class="clock">
<div class="timer"><div id="second">0</div>"<div id="millisecond">000</div></div>
<button onclick="play()">开始</button>
<button onclick="pause()">暂停</button>
<button onclick="setup()">重置</button>
</div>
</body>
</html>
【start.css】
*{
margin: 0;
padding: 0;
}
body{
font-size: .27rem; /*body必须有一个默认大小*/
background: rgb(61, 122, 221);
}
.bg{
padding-top: 10vh;
box-sizing: border-box;
}
.bg>div{
margin-bottom: .5rem;
color: #fff;
}
.bg>div>button{
margin-left: .02rem;
}
/*弹性盒子*/
.flex{
display: flex;
display: -webkit-flex;
}
.flex_item{
flex: 1;
-webkit-flex: 1;
-moz-flex:1;
}
.flex_center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex_middle {
justify-content: center;
-webkit-justify-content: center;
}
.flex_around{
justify-content: space-around;
-webkit-justify-content: space-around;
}
.flex_between{
justify-content: space-between;
-webkit-justify-content: space-between;
}
.flex_column{
flex-direction: column;
-webkit-flex-direction: column;
}
/* 时间 */
.clock{
width: .42rem;
height: .42rem;
}
.timer{
background: #255293;
color: #fff;
font-weight: bold;
border-radius: 15px;
width: 1.4rem;
text-align: center;
}
.timer div{
display: inline-block;
}
.timer>div:nth-child(1){
text-align: right;
}
.timer>div:nth-child(2){
text-align: left;
}
喜欢的话一键3连,后面附一张clock图