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 css float属性的特殊写法
Nov 13 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
React Native项目框架搭建的一些心得体会
May 28 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信息函数
2015/10/21 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
python局部赋值的规则
2013/03/07 Python
python中的tcp示例详解
2018/12/09 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
深入学习python多线程与GIL
2019/08/26 Python
python之array赋值技巧分享
2019/11/28 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
总经理助理的八要求
2013/11/12 职场文书
中学教师培训制度
2014/01/31 职场文书
认识深刻的检讨书
2014/02/16 职场文书
员工安全生产承诺书
2014/05/22 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android