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中的几个关键概念的理解-原型链的构建
May 12 Javascript
jquery随机展示头像代码
Dec 21 Javascript
js对象的复制继承实例
Jan 10 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
JS监听Esc 键触发事键
Apr 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
自己做矿石收音机
2021/03/02 无线电
表单元素事件 (Form Element Events)
2009/07/17 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
初入社会应届生求职信
2013/11/18 职场文书
秘书英文求职信范文
2014/01/31 职场文书
学生安全教育材料
2014/02/14 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python