麦子笔记
您现在的位置是: 个人博客

js实现指定时间倒计时

简介js根据输入的日期时间,实现距离当前时间的倒计时,程序比较简单,直接上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
<body>
  <div class="count_box"></div>
  <script>
  window.onload = function () {
  countDown();
  function fillZero(i) {
  return i < 10 ? "0" + i: i + "";
  }
  function countDown() {
  var nowtime = new Date();
  var endtime = new Date("2021/12/09,23:59:59");//日期格式建议用斜杠
  var result = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
  var d = parseInt(result / (24*60*60))
  var h = parseInt(result / (60 * 60) % 24);
  var m = parseInt(result / 60 % 60);
  var s = parseInt(result % 60);
  d = fillZero(d)
  h = fillZero(h);
  m = fillZero(m);
  s = fillZero(s);
  if(parseInt(d)>0){
document.querySelector(".count_box").innerHTML = `距离当前时间:  ${d}天 ${h} 时 ${m} 分 ${s} 秒`;
  }else{
if(parseInt(h)>0){
document.querySelector(".count_box").innerHTML = `距离当前时间:  ${h} 小时 ${m} 分 ${s} 秒`;
}else{
if(parseInt(m)>0){
document.querySelector(".count_box").innerHTML = `距离当前时间:  ${m} 分 ${s} 秒`;
}else{
document.querySelector(".count_box").innerHTML = `距离当前时间:  ${s} 秒`;
}
}

  }
  
  if (result <= 0) {
  document.querySelector(".count_box").innerHTML = "倒计时结束";
  return;
  }
  setTimeout(countDown, 1000);
}
}
</script>
</body>
</html>

效果:image.png

作者麦子 本文地址https://www.maizibiji.com/read/63.html

版权声明: 本文为原创文章,版权归 麦子笔记 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论
昵称*
邮箱*
评论列表