jQuery用的多了,逐渐忘记了原生js如何书写代码。今天看到一个面试题,利用原生js写一个计算鼠标移入某个区域所停留的时长,移出暂停,再次移入累加。
于是想到了,利用原生js实现一个秒表效果。做之前也搜索了一些秒表效果,是利用setTimeout()实现的。本文是利用setInterval()定时器实现的。
html代码如下:
<div> <span id="date">00</span> - <span id="hour">00</span> : <span id="min">00</span> : <span id="sencond">00</span> : <span id="mmss">00</span><br> <input type="button" value="开始" id="start"> <input type="button" value="计次" id="cast"> <input type="button" value="复位" id="clear"> </div> <div id="cut"> 计次计时: <ol id="list"> </ol> </div>
本文实现计时、暂停、计次和复位效果。
css样式如下:
div{ width: 300px; height:200px; background: #333; margin:50px auto; color: #fff; text-align: center; line-height: 100px; } #cut{ width: 300px; height:auto; background: #333; margin:50px auto; color: #fff; text-align: center; line-height: 24px; } #cut li{ margin: 0; padding: 0; }
如上遍可得到一个简陋的秒表计时界面和记录界面。
首先利用js获取到后面所需的元素:
var date = document.getElementById('date'),<span style="white-space:pre"> </span>//获取存放天数的span标签(做的夸张了单位有点大) hour = document.getElementById('hour'),<span style="white-space:pre"> </span> //<span style="font-family: Arial, Helvetica, sans-serif;">获取存放小时的span标签</span> min = document.getElementById('min'),<span style="white-space:pre"> </span>//<span style="font-family: Arial, Helvetica, sans-serif;">获取存放分钟的span标签</span><span style="white-space:pre"> </span> sencond = document.getElementById('sencond'),<span style="white-space:pre"> </span>//获取存放秒钟的span mmss = document.getElementById('mmss'),<span style="white-space:pre"> </span>//获取存放10毫秒单位的span start = document.getElementById('start'),<span style="white-space:pre"> </span>//获取开始按钮 cast = document.getElementById('cast'),<span style="white-space:pre"> </span>//获取计次按钮(英语水平不够) clear = document.getElementById('clear'),<span style="white-space:pre"> </span>//获取复位按钮 list = document.getElementById('list'),<span style="white-space:pre"> </span>//获取计次的存放列表 d=0,h=0,m=0,s=0,ms=0,<span style="white-space:pre"> </span>//定义存放时间的各个变量
timer = null;<span style="white-space:pre"> </span>//定义定时器
如上,获取并定义完所有元素,开始让秒表计时。
首先定义定时器函数:
Timer = function(){ <span style="white-space:pre"> </span>ms++; // 毫秒自加 if(ms>99){ ms=0;<span style="white-space:pre"> </span>//判断ms是否为100;超过99即走过了0-99,100个10毫秒,重置为0,递加到秒 s++; } <span style="white-space:pre"> sencond.innerHTML</span> <span style="white-space:pre">= </span>s<span style="white-space:pre">; </span>//输出秒 <span style="white-space:pre"> </span>mmss.innerHTML = ms; // 输出毫秒 },10);
让毫秒动起来,而且递加到秒。(注:ms为10毫秒)
同理加上如下代码,即可继续递加到分、到小时、到天。。。。
if(m>59){ m=0; h++; } if(h>=23){ h=0; d++; } if(s>59){ s=0; m++; }
整理后定时器函数完整代码如下:
Timer = function(){
ms++; // 毫秒自加 <span style="white-space:pre"> </span><pre name="code" class="html"><span style="white-space:pre"> </span>if(h>=23){ h = 0; d++; }
if(m>59){m = 0;h++;}
//测试时发现大的单位只能放在前面,小的放在后面if(s>59){s = 0;m++;}if(ms>99){ms = 0;s++;}hour.innerHTML = h;date.innerHTML = d;min.innerHTML = m;sencond.innerHTML = s;mmss.innerHTML = ms; // 输出毫秒}
然后定义开始事件:
start1 = function(){ <span style="white-space:pre"> clearInterval(timer); </span>//防止多次点击,同时启用多个定时器
<span style="white-space:pre"> </span>setInterval(Timer(),10);<span style="white-space:pre"> </span>//启动定时器函数
start.value='暂停';<span style="white-space:pre"> </span>//点击之后按钮文字变为“暂停” <span style="white-space:pre"> </span> start.setAttribute('onclick','puse()');<span style="white-space:pre"> </span>//为input元素设定onclick属性,并绑定暂停事件 }
将函数绑定到开始按钮:
start.setAttribute('onclick','start1()');
此时的秒表已经可以走动了,但是有一个问题,当秒表数字小于10 的时候只有各位,画面跳动,十分不美观。因此定义一个函数,用来让小于10的时候输出0X;
addTen=function(a){ // 整理个位数 if(a>=10){ a = a; }else{ a ='0'+a; } return a; }
然后修改定时器函数中的输出代码:
hour.innerHTML=addTen(h); date.innerHTML=addTen(d); min.innerHTML= addTen(m); sencond.innerHTML= addTen(s); mmss.innerHTML = addTen(ms); // 输出毫秒
这样秒表就不会频繁跳动了。
接下来就是暂停事件:
puse=function(){ clearInterval(timer);<span style="white-space:pre"> </span>//清除定时器,达到暂停效果 start.value='继续';<span style="white-space:pre"> </span>//改变value,显示继续 start.setAttribute('onclick','start1()');<span style="white-space:pre"> </span>//为按钮设置onclick属性,并绑定开始事件 }
效果为:秒表暂停,暂停按钮变为继续按钮。
然后再添加复位事件:
clear.onclick=function(){ clearInterval(timer);<span style="white-space:pre"> </span>//清除定时器 d=0,h=0,m=0,s=0,ms=0;<span style="white-space:pre"> </span>//所有存储变量归零 mmss.innerHTML='00'; sencond.innerHTML='00'; min.innerHTML='00'; hour.innerHTML='00'; date.innerHTML='00';<span style="white-space:pre"> </span>//所有数字重置为00 start.value='开始'; start.setAttribute('onclick','start1()');<span style="white-space:pre"> </span>//改变开始按钮 }
因为复位按钮只有一个作用,所以直接将事件添加在按钮上。
最后便是重点,将时间记录下来:
cast.onclick=function(){ var newNode = document.createElement('li'); <span style="white-space:pre"> </span>//创建添加li节点 var cutTime = date.innerHTML+':'+hour.innerHTML+':'+min.innerHTML+':'+sencond.innerHTML+':'+mmss.innerHTML;<span style="white-space:pre"> </span>//获取当前时间 var cutTimeText = document.createTextNode(cutTime); <span style="white-space:pre"> </span>//创建文本节点 newNode.appendChild(cutTimeText); <span style="white-space:pre"> </span>//将文本节点追加到li节点 list.appendChild(newNode); }
首先要定义li新节点,然后创建文本节点,最后将文本节点添加到定义的li节点上。(当前li为有序列表)
如此一个原生js定时器便完成了。
利用jQuery,实现定时器效果,比原生js简单的多,这里便不贴上代码了。
本人是一名初学者,使用了两个月jQuery,原生js就渐渐忘了,刚好看见一个面试题,就自己试了试。希望能有高手多多指点,谢谢大家。