首页 >> 全栈工程 >>JavaScript >> js如何实现秒表倒计时效果?(代码示例)
详细内容

js如何实现秒表倒计时效果?(代码示例)

时间:2020-07-27        阅读

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>

效果图:

1.gif

更多web前端开发知识,请查阅ots网络安全门户 !!!

最新评论
请先登录才能进行回复登录
技术支持: 建站ABC | 管理登录