原生js代码实现秒表效果

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就渐渐忘了,刚好看见一个面试题,就自己试了试。希望能有高手多多指点,谢谢大家。

时间: 2024-09-16 04:42:20

原生js代码实现秒表效果的相关文章

原生JS实现的放大镜效果实例代码_javascript技巧

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

原生JS实现轮播效果+学前端的感受(防止走火入魔)_javascript技巧

插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以无视下面这段废话: 在开始之前,先说下我学前端到现在的一点感受.到今天应该有两个月左右了吧,基本每天6-10小时的学习时间,纯自学,据说培训不靠谱!本人目前的阶段是只会三大件(HTML5.CSS3.javascript),其它所有知识都还排在学习计划后面....现在正处在迷茫期,不知道下面该先学什么

原生js图片轮播效果实现代码_javascript技巧

现在很多javascript的插件都可以实现图片轮播的功能,这篇文章,主要是通过这个domo来解析javascript图片轮播的原理. 老规矩,先上代码.至于代码中的图片,随便找三张即可,最核心的还是理解其思想. html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>滚动图</title> <link rel="sty

原生JS实现网络彩票投注效果_javascript技巧

个人游戏之作,小伙伴们研究下就好 主要功能: 1.可自由选择投注模式.倍数,可点击'×'删除提交注单. 2.可使用jsonp引用官方彩票开奖数据(实时开奖). 3.结合后台可实现官彩同样的效果. 实现原理: 单纯使用Js实现,这里主要用数组存放数据,随机生成开奖号码,然后进行判断是否中奖. 下面是完整JS代码: index.html <!doctype html> <html lang="en"> <head> <meta charset=&q

原生js编写焦点图效果_javascript技巧

自己用原生js写的简单焦点图,算是对原生js初步运用. html部分 <div class="focusPicture"> <section class="mPhoto" id="mPhoto"> <img src="images/20161021/b_5809b93b66d18.jpg"/> </section><!-- 主要的大图 --> <section

纯JS代码实现气泡效果_javascript技巧

就不给大家多文字说明了.给大家梳理下关键步骤. 关键步骤: 1.引入js文件 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src='js/jquery.thoughtBubble.js'></script> 2.在需要使用气泡效果的地方 <div i

原生js代码实现图片放大境效果_javascript技巧

今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实它们的原理都差不多,都是采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果. 第一种是我仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片.这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果. <!DOCTYPE

原生js做的手风琴效果的导航菜单_javascript技巧

做好的手风琴效果如下,具体看代码:  html代码 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir

一个封装js代码-----展开收起效果示例

第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助 js部分: 复制代码 代码如下: var show_obj = function(obj,at,ob){ $(obj).bind('click', function(){ var showTxt = $(this).children(at); //alert($(at).html()); //alert(sObj); //alert(); //alert($(this).parent().chi