JS：倒计时小工具

最新推荐文章于 2024-05-22 01:53:01 发布

椰子奶糖

最新推荐文章于 2024-05-22 01:53:01 发布

阅读量2.4k

点赞数 1

分类专栏： # 移动端WEB学习记录 # 前端基础

本文链接：https://blog.csdn.net/symuamua/article/details/104931948

版权

移动端WEB学习记录同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端基础

6 篇文章 1 订阅

订阅专栏

倒计时小工具：自带注释

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js设置日期倒计时代码 - 站长素材</title>

<style>
html {
  display: grid;
  min-height: 100%;
}

body {
  display: grid;
  background: #183059;
}

.container {
  position: relative;
  margin: auto;
  overflow: hidden;
  width: 1500px;
  height: 300px;
}


#timer {
  text-align: center;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  font-size: .7em;
  background: rgb(4, 6, 85);
  
}

.years,.days, .hours, .minutes, .seconds {
  display: inline-block;
  padding: 25px;
  width: 150px;
  border-radius: 30px;
}

.days {
  background: #F0A202;
}

.hours {
  background: #276FCF;
}

.minutes {
  background: #F6F4F4;
}

.seconds {
  background: #EF2F3C;
}

.numbers {
  font-family: "Montserrat", sans-serif;
  color: rgb(4, 6, 85);
  font-size: 5em;
}

</style>
</head>
<body>

<div class="container">
  <div id="timer"></div>
</div>


<script>
/*首先，获得杭州亚运会时间大约为2022年9月10号，几点未查到，姑且设为0:00*/
const target_time = new Date("Sep 10, 2022 00:00:00");
/*获得时间戳，单位毫秒*/
target_time.getTime();

/* 计时，setInterval最后有个参数设定间隔时间，只要设定1000（毫秒）默认单位毫秒，就可以实现每秒计时并更新 */
var timer = setInterval(function() {
  /*
    当前日期时间戳
    */
  const now = new Date().getTime();
  /*
    时间差,用diff_val表示，单位毫秒
    */
  const diff_val = target_time - now;
  /*
    时间差换算:1000==毫秒变秒  60==秒变分钟 、分钟变小时   24==小时变天
    diff_val取模是为了取得相应范围的余数，
    例如seconds：取模60秒，则余数一定是<60秒，即我们想要的当前相差秒数，取模完的单位任然是毫秒
    */ 
  var days = Math.floor(diff_val / (1000 * 60 * 60 * 24));
  var hours = Math.floor((diff_val % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((diff_val % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((diff_val % (1000 * 60)) / 1000);

  /*
    更新timmer内容,通过document的getbyid找到timmer，并将其内容替换成更新后的内容
    */
  document.getElementById("timer").innerHTML =
    "<div class=\"days\"> \
          <div class=\"numbers\">" + days + "</div>days</div> \
    <div class=\"hours\"> \
          <div class=\"numbers\">" + hours + "</div>hours</div> \
      <div class=\"minutes\"> \
          <div class=\"numbers\">" + minutes + "</div>minutes</div> \
      <div class=\"seconds\"> \
          <div class=\"numbers\">" + seconds + "</div>seconds</div> \
      </div>";
}, 1000);
</script>

</body>
</html>

椰子奶糖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS：倒计时小工具

倒计时小工具：自带注释<!doctype html><html><head><meta charset="utf-8"><title>js设置日期倒计时代码 - 站长素材</title><style>html { display: grid; min-height: 100%;}bod...
复制链接

扫一扫