现在的位置: 首页 -> 前端学习 -> JS前端 -> 带有快捷键的一个js定时器秒表

带有快捷键的一个js定时器秒表

2013-09-12 00:06评论数 2 ⁄ 被浏览 9115 views+

本实例主要应用了js中的定时器(setInterval)、清除定时器(clearInterval)、快捷键(event.keyCode)来实现这一秒表的效果。可以通过键盘上的“S”键和“P”键控制秒表的开始和暂停,也可以用鼠标点击进行控制。秒表只支持秒、分,读者可以根据自己的需求进行扩充。


实现效果:


js秒表


实现代码:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="https://www.daixiaorui.com/Public/js/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

//初始化timer1

var timer1 = "";

$("#begin").click(function(){

if(timer1!=""){

clearInterval(timer1);

}

timer1 = setInterval(tt,1000);

});

$("#pause").click(function(){

clearInterval(timer1);

});

//清除,秒表还原为00:00

$("#clear").click(function(){

clearInterval(timer1);

$("#s").text("00");

$("#mi").text("00");

});

function tt(){

//alert();

var sVal = parseInt($("#s").text());

var miVal = parseInt($("#mi").text());

if($("#s").text().substr(0,1)=="0"){

var sVal = parseInt($("#s").text().substr(1));

}

if($("#mi").text().substr(0,1)=="0"){

var miVal = parseInt($("#mi").text().substr(1));

}

if(sVal>58){

$("#s").html("00");

if(miVal>58){

clearInterval(timer1);

return;

}else if(miVal<9){   //小于10的时候,十位数用0填充

var mm = miVal+1;

$("#mi").html("0"+mm);

}else{

$("#mi").html(miVal+1);

}

}else if(sVal<9){

var vv = sVal+1;

$("#s").html("0"+vv);

}else{

$("#s").html(sVal+1);

}

}

//快捷键

$(document).keydown(function(event){

// 快捷键's',开始计时

if(event.keyCode==83){

if(timer1!=""){

clearInterval(timer1);

}

timer1 = setInterval(tt,1000);

}

// 快捷键'p',暂停计时

if(event.keyCode==80){

clearInterval(timer1);

}

});


});

</script>

<style type="text/css">

#main{ margin:100px auto; width:210px; height:auto; background:#f3f3f3; text-align:center;}

td{ font-size:66px; width:100px; height:98px; border:1px solid #ccc;}

table{ text-align:center;}

#mi{ color:#006;}

#s{ color:#603;}

sub{ font-size:16px; color:#999;}

input{ height:36px; width:64px; margin-top:8px; cursor:pointer;}

</style>

<title>秒表</title>

</head>


<body>

<div id="main">

<table><tr>

<td><span id="mi">00</span><sub>分</sub></td><td><span id="s">00</span><sub>秒</sub></td>

</tr></table>

<input type="button" value="开始(s)" id="begin" />&nbsp;

<input type="button" value="暂停(p)" id="pause" />&nbsp;

<input type="button" value="清除" id="clear" />

</div>

</body>

</html>

 

文章出自:https://www.daixiaorui.com/read/41.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

目前有 2 条评论  @我要评论

  1. 2楼wuhudafei : 2014-08-26 10:55:21 评论说: @回复

    想问下,为什么每隔一毫秒,计数一次不行啊,难道是每次都需要调用函数,反应速度慢? timer1 = setInterval(tt,1); 我的function tt()也写好了的,可惜字数太多,不能粘贴源码

  2. 1楼rfsdf : 2013-09-18 17:38:52 评论说: @回复

    fsdf

您的每一个评论都是对我的一份支持

 博客二维码

昵称 *

邮箱 *