Javascript实现秒表倒计时功能


Posted in Javascript onNovember 17, 2018

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

效果图:

Javascript实现秒表倒计时功能

代码:

<html>

<body>
<span id="clock" style="font-size: 3em">00:30:00:00</span>
<script type="text/javascript">
 var oclock=document.getElementById("clock");
 var start1 = oclock.innerHTML;
 var finish = "00:00:00:00";
 var timer = null;

 run();

 function run() {//定义时间函数,让秒表每100ms变化一次
 timer =setInterval("onTimer()", 100);//100ms的定时器
 }

 function onTimer()
 {
 if (start1 == finish)//如果倒计时结束清除时间函数
 {
  clearInterval(timer);
  start1="00:00:00:10";//(清除时间函数后还是会执行一次 所以多给一个10ms再动态赋值)
 }

 var hms = new String(start1).split(":");//以:作为分隔符号取字符串内的数据
 var ms = new Number(hms[3]);//给每个数据定义对象
 var s = new Number(hms[2]);
 var m = new Number(hms[1]);
 var h = new Number(hms[0]);

 ms -= 10;//每次执行ms减10

 if (ms < 0)//判断时间并进行变化
 {
  ms = 90;
  s -= 1;
  if (s < 0)
  {
  s = 59;
  m -= 1;
  }
  if (m < 0)
  {
  m = 59;
  h -= 1;
  }
 }
 var ms = ms < 10 ? ("0" + ms) : ms;//如果出现个位数给个位数前面添加0
 var ss = s < 10 ? ("0" + s) : s;
 var sm = m < 10 ? ("0" + m) : m;
 var sh = h < 10 ? ("0" + h) : h;
 start1 = sh + ":" + sm + ":" + ss + ":" + ms;
 oclock.innerHTML = start1;//重新给oclock赋值
 }
</script>
</body>
</html>

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

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

Javascript 相关文章推荐
纯javascript实现自动发送邮件
Oct 21 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
js实现简单模态框实例
Nov 16 #Javascript
js实现搜索栏效果
Nov 16 #Javascript
JavaScript实现简单音乐播放器
Apr 17 #Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 #Javascript
微信小程序自定义toast的实现代码
Nov 16 #Javascript
vue实现简单的星级评分组件源码
Nov 16 #Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 #Javascript
You might like
php 时间计算问题小结
2009/01/04 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php微信支付之APP支付方法
2015/03/04 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
js中的string.format函数代码
2020/08/11 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
spyder常用快捷键(分享)
2017/07/19 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
农民工创业典型事迹
2014/01/25 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
赡养老人协议书范本
2015/08/06 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js