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


Posted in Javascript onFebruary 16, 2017

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

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

具体代码:

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT HashTable
Jan 22 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
js仿微博动态栏功能
Feb 22 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 #Javascript
canvas时钟效果
Feb 16 #Javascript
支持移动端原生js轮播图
Feb 16 #Javascript
jQuery为DOM动态追加事件的方法
Feb 16 #Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 #Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 #Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
使用php+xslt在windows平台上
2006/10/09 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
浅谈Python的垃圾回收机制
2016/12/17 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
python操作kafka实践的示例代码
2019/06/19 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
机电专业求职信
2014/06/14 职场文书
会计求职自荐信
2014/06/20 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
法学专业求职信范文
2015/03/19 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏