javascript实现秒表计时器的制作方法

本文实例为大家分享了js秒表计时器的制作代码，供大家参考，具体内容如下

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>Document</title>
<style>
div{margin-top:40px;margin-left:25px;margin-bottom:10px;width:20px;height:20px;}
input{width:30px;height:30px;margin-left:20px;font-size:20px;color:#fff;background: #000;border:none;outline: none;}
</style>
</head>
<body>
<div></div>
<input type="button" value="开始" />
<input type="button" value="停止" />
</body>
<script type="text/javascript">
//2.实现秒表功能，实现时 分 秒 毫秒 点击1开始计时，2结束计时；
var oDiv=document.getElementsByTagName('div')[0];
var Btn1=document.getElementsByTagName('input')[0];
var Btn2=document.getElementsByTagName('input')[1];
var ms=0;
var sec=0;
var min=0;
var hour=0;
Btn1.onclick=function(){
timer=setInterval(function(){
var str_hour=hour;
var str_min=min;
var str_sec=sec;
if(hour<10){
str_hour="0"+hour;
}
if(min<10){
str_min="0"+min;
}
if(sec<10){
str_sec="0"+sec;
}
var time=str_hour+':'+str_min+':'+str_sec+':'+ms;
oDiv.innerHTML=time;
ms=ms+50;
if(ms>999){
ms=0;
sec++;
}
if(sec>59){
sec=0;
min++;
}
if(min>59){
min=0;
hour++;
}

},50)
}
Btn2.onclick=function(){
clearInterval(timer);
}
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生js实现秒表计时器功能

    原生js实现秒表计时器功能

    本文实例为大家分享了带有开始.暂停.清除功能的js计时器,供大家参考,具体内容如下 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <script> var hour,minute,second;//时 分 秒 hour=minute=secon

  • javascript设计简单的秒表计时器

    javascript设计简单的秒表计时器

    本文实例讲述了javascript设计简单的秒表计时器的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0&q

  • javascript 秒表计时器实现代码

    javascript 秒表计时器 实例代码: <html lang="en"> <head> <meta charset="UTF-8"> <title>js计时器</title> </head> <body> <input type="text" value="00:00"> <input type="button

  • javascript实现秒表计时器的制作方法

    javascript实现秒表计时器的制作方法

    本文实例为大家分享了js秒表计时器的制作代码,供大家参考,具体内容如下 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"> <title>Document</title> <style> div{margin-top:40px;margin-left:25px;margin-bottom:10px

  • JavaScript轮播图简单制作方法

    本文实例为大家分享了JavaScript制作轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> <style> .co

  • JavaScript分秒倒计时器实现方法

    JavaScript分秒倒计时器实现方法

    本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供大家参考.具体分析如下: 一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完成使按钮变成不可点击状态 具体效果如下图,为了说明问题,调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可. 在时间用完之前,按钮还是可以点击的. 时间用完之后,按钮就不能

  • javascript实现根据3原色制作颜色选择器的方法

    javascript实现根据3原色制作颜色选择器的方法

    本文实例讲述了javascript实现根据3原色制作颜色选择器的方法.分享给大家供大家参考.具体如下: document.write('<div id="msecolor"><div class="aa"><div class="ab"><div class="ab1"><select onchange="T.f(this.value)"><

  • javascript 中动画制作方法 animate()属性

    animate是个非常冷门的方法,以至于百度和手册上都找不到相关的资料.当然通过一个小小的demo,我还是发现了方法的一些属 animate是所有dom元素都有的方法,可以用来最做过度动画,关键帧动画.这个方法可以更方便的让我们制作动 animate共有两个参数 (很可惜似乎没有回调函数,没发现) 关键帧 (参数可以是数组或对象,数组内包裹的也必须是对象)对象里的属性就是css属性和值了 动画属性设置 {参数数字或者对象} 目前发现的属性有以下 : duration: 动画时长 (单位毫秒) i

  • javascript实现一款好看的秒表计时器

    本文实例为大家分享了javascript实现秒表计时的具体代码,供大家参考,具体内容如下 实现图片: 分+秒+跑秒 时+分+秒+跑秒 需求分析: 1.显示整个秒表页面: 2.在点击"开始"按钮之后,开始计时,并将按钮转为"暂停"按钮,在点击"暂停"按钮之后,将按钮转为"开始"按钮,并停止计时: 3.在点击"复位"按钮之后,将显示的计时清零,并将按钮变回"开始"按钮. 页面结构: <

  • javascript批量修改文件编码格式的方法

    本文实例讲述了javascript批量修改文件编码格式的方法.分享给大家供大家参考.具体如下: 摘要: 最近在制作手册的时候遇到了一个问题'文档乱码',查看文件之后发现文件编码不对,总共100多个文件,如果用编辑器另存为utf8,那就悲催了.所以自己就写了个程序,批量修改文件编码格式. 代码: 复制代码 代码如下: /**  * 修改文件编码格式,例如:GBK转UTF8  * 支持多级目录  * @param {String} [root_path] [需要进行转码的文件路径]  * @para

  • javascript顺序加载图片的方法

    本文实例讲述了javascript顺序加载图片的方法.分享给大家供大家参考.具体如下: javascript监听一个图片是否加载完毕 如果加载完成再加载下一张,不是一次性从服务器加载 减少服务器压力, 可用到的地方:比如制作类似google地图的应用,可以使小图一张一张的加载 function Load_pic(arr){ this.loop_f=function(i,o_file,len,f,obj){ if(i<len-1){ i=i+1; f(i,o_file,len,obj); } };

随机推荐