javascript小时、分钟和秒倒计时效果

吐槽君 分类:实例代码

本章节分享一段代码实例,它实现了小时、分钟和秒的倒计时效果。

这样的效果应用其实非常的广泛的,比如考试倒计时,商城搞活动倒计时。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript" language="javascript">
//总时间,以分为单位
var time = 100;
//小时
var h = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0;
//分
var m = time % 60;
//秒
var s = 60;
//输出到当前Script的Dom位置
document.write('<span>限时秒杀,还剩余<font id="f_hh">'
+ h + '</font>小时<font id="f_mm">'
+ m + '</font>分<font id="f_ss">'
+ s + '</font>秒</span>');
//开始执行倒计时
var timeInterval = setInterval(function () {
//如果时、分、秒都为0时将停止当前的倒计时
if (h == 0 && m == 0 && s == 0) { clearInterval(timeInterval); return; }
  //当秒走到0时,再次为60秒
  if (s == 0) { s = 60; }
  if (s == 60) {
    //每次当秒走到60秒时,分钟减一
    m -= 1;
    //当分等于0时并且小时还多余1个小时的时候进里面看看
    if (m == 0 && h > 0) {
      //小时减一
      h -= 1;
      //分钟自动默认为60分
      m = 60;
      //秒自动默认为60秒
      s = 60;
    }
  }
  //秒继续跳动,减一
  s -= 1;
  //小时赋值
  document.getElementById('f_hh').innerHTML = h;
  //分钟赋值
  document.getElementById('f_mm').innerHTML = m;
  //秒赋值
  document.getElementById('f_ss').innerHTML = s;
}, 1000);
</script>
</head>
<body>
 
</body>
</html>

javascript小时、分钟和秒倒计时效果,这样的场景在实际项目中还是用的比较多的,关于javascript小时、分钟和秒倒计时效果就介绍到这了。

javascript小时、分钟和秒倒计时效果属于前端实例代码,有关更多实例代码大家可以查看

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容