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 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Keras实现DenseNet结构操作
2020/07/06 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
What is view? why do we have view?
2012/06/22 面试题
英语道歉信范文
2014/01/09 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
2014年宣传工作总结
2014/11/18 职场文书
英语辞职信怎么写
2015/02/28 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2015元旦感言
2015/12/09 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL