javascript计时秒表简单设计

这是一个简单的秒表设计，能够实现计时、停止等功能，涉及Window对象中setInterval、location等知识点的应用。

<!doctype html>
<html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin:0; padding:0}body {text-align:center; font:bold 32px/32px "宋体"; color:#fff;}input[type="button"] {padding:5px; margin:5px 10px;}#time {background:#0f0;}#content {background:#f00;}</style><script>/*功能：获取任意两个时间差参数：（要求传入两个时间的对象）start 开始的时间对象end   结束的时间对象*/function getDiff(start,end){// 剩余多少分钟零多少秒零多少毫秒var sMs = start.getTime(); //起始时间的总毫秒数var eMs = end.getTime(); //结束时间的总毫秒数var temp = eMs-sMs;  //两个时间的总毫秒差值//1s = 1000ms    var remainms = temp%1000; //剩余的毫秒数var totalSeconds = parseInt(temp/1000); //转换后的总秒数var remains = totalSeconds%60; //剩余的秒var totalMinutes = parseInt(totalSeconds/60) //剩余的总分钟var remainm = totalMinutes%60;  //剩余的分钟var totalHours = parseInt(totalMinutes/60); //表示剩余的总小时remainms = checkTime(remainms);return  {remainms:remainms,remains:remains,remainm:remainm,totalHours:totalHours};}/*检查毫秒，前补0，防抖动*/function checkTime(t){if(t>=10 && t<100){t = "0" + t;}else if(t<10){t = "00" + t;}return t;}</script></head><body><div class="btn"><input type="button" value="开始" id="btnStart"></input><input type="button" value="计时" id="btnTime"></input><input type="button" value="重置" id="btnReset"></input></div><div id="time"></div><div id="content"></div><script>var btnStart = document.getElementById("btnStart");//获取开始按钮var btnTime = document.getElementById("btnTime");//获取计时按钮var btnReset = document.getElementById("btnReset");//获取重置按钮var time = document.getElementById("time");//获取显示时间var content = document.getElementById("content");//获取计时显示内容var desc;//计时那一刻的秒表时间var sTime;//点击开始按钮时获得的时间var st;//刷新对象var count = 0;//名次var contentTime = "";//计时内容/*时间差处理函数*/function click(){var eTime = new Date();//获取当前时间var timeDif = getDiff(sTime,eTime);//获取时间差desc = timeDif.totalHours + ":" + timeDif.remainm + ":" + timeDif.remains + ":" + timeDif.remainms;time.innerHTML = desc;//将获取的时间显示到页面中}/*开始按钮点击事件*/btnStart.onclick = function(){sTime = new Date();//获取当前时间if(btnStart.value=="开始"){btnStart.value = "停止";//修改按钮valuest = setInterval("click()",1);}else{btnStart.value = "开始";clearInterval(st);}}/*计时按钮点击事件*/btnTime.onclick = function(){count++;contentTime = contentTime + "第" + count + "名：" + desc + "<br/>";content.innerHTML = contentTime;//添加到页面中}/*重置按钮点击事件*/btnReset.onclick = function(){location.reload();//刷新页面}</script></body>
</html>

效果图如下：

javascript计时秒表简单设计相关推荐

html网页制作秒表原理,JavaScript怎么实现简单的秒表效果？（代码示例）
JavaScript怎么实现简单的秒表效果?下面本篇文章给大家通过代码示例介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 描述: 实现一个简单的秒表,点击启动按钮时开始计时 ...
HTML5期末大作业：简单全屏音乐个人网站模板——音乐娱乐网站(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:简单全屏音乐个人网站模板--音乐娱乐网站(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页 ...
HTML5期末大作业：网购网站设计——品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码学生简单购物网站设计成品
HTML5期末大作业:网购网站设计--品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码学生简单购物网站设计成品常见网页设计作业题材有个人. 美食. 公司. 学校 ...
用Python写一个最简单的计时秒表
在Windows上是自带计时秒表的,这玩意一般用不上.但对于做视频相关操作的工程师有一个巨大的作用,就是用摄像头拍屏幕上的秒表然后把摄像头得到的图像经过压缩->传输->解析->重新显 ...
HTML5期末大作业：体育足球网站设计——足球(6页) HTML+CSS+JavaScript 大学生体育运动网页设计模板代码校园足球网页作业成品学校足球网页制作模板学生简单体育运动网站设计成
HTML5期末大作业:体育足球网站设计--足球(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有 ...
HTML5期末大作业：校园篮球网页网站设计源码(5页) HTML+CSS+JavaScript 大学生体育运动网页设计模板代码校园篮球网页作业成品学校篮球网页制作模板学生简单体育运动网站设计成品
HTML5期末大作业:校园篮球网页网站设计源码(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码常见网页设计作业题材 ...
HTML5期末大作业：动漫人物介绍网站设计——柯南(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品学生动漫网页设计模板下载海贼王大学生HTML网页制作作品简单漫画网
HTML5期末大作业:动漫人物介绍网站设计--柯南(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材 ...
基于c语言单片机秒表课程设计,基于c语言单片机秒表课程设计要点.doc
课程设计报告课程名称:单片机原理及应用报告题目:秒表学生姓名: 所在学院:信息科学与工程学院专业班级: 学生学号: 指导教师: 2013 年 12 月 25 日课程设计任务书报告题目秒表完 ...
单片机控制秒表C语言程序,89C51单片机秒表的设计（全文完整版）
<89C51单片机秒表的设计.doc>由会员分享,可免费在线阅读全文,更多与<89C51单片机秒表的设计>相关文档资源请在帮帮文库(www.woc88.com)数亿文档库存里搜 ...

javascript计时秒表简单设计

javascript计时秒表简单设计相关推荐

最新文章

热门文章