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 相关文章推荐
js怎么覆盖原有方法实现重写
Sep 04 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
微信小程序tabBar设置实例解析
Nov 14 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 采集程序原理分析篇
2010/03/05 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
将list转换为json失败的原因
2013/12/17 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
python实现滑雪者小游戏
2020/02/22 Python
Python新手学习标准库模块命名
2020/05/29 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
药品业务员岗位职责
2014/04/17 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
2014年会策划方案
2014/05/11 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
2015年招生工作总结
2015/05/04 职场文书
聘用合同范本
2015/09/21 职场文书
2019入党申请书格式
2019/06/25 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Redis分布式锁Redlock的实现
2021/08/07 Redis