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之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue ref如何获取子组件属性值
Mar 31 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
PHPMailer发送邮件
2016/12/28 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
Python安装模块的常见问题及解决方法
2018/02/05 Python
Python3中的json模块使用详解
2018/05/05 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
深入解析神经网络从原理到实现
2019/07/26 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python字符串的index和find的区别详解
2020/06/20 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
初三家长会邀请函
2014/01/18 职场文书
公司任命书范本
2014/06/04 职场文书
综合实践活动报告
2015/02/05 职场文书