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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
js如何取消事件冒泡
2013/09/23 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
Python SQLite3简介
2018/02/22 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
新书发布会策划方案
2014/06/09 职场文书
爱护公共设施标语
2014/06/24 职场文书
学习雷锋标语
2014/06/25 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
2014年内勤工作总结
2014/11/24 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书