我是一只历经沧桑的老狮

倒计时代码

纯水贴一篇,不知道该写些什么,分享一个倒计时的代码吧

<style>
.time {
  color: #fff;
  background:url(图片地址);
  height:200px;
  width:980px
  text-transform: uppercase;
  display: flex;
  justify-content: center;
}

.time span {  
  padding: 110px 14px;
  font-size: 0.8rem;
}

.time span div {
  font-size: 3rem;
  background:rgba(0,0,0,0.3);
}
</style>

    <div class="time"><span style="font-size: 3rem;"> 距离圣诞节还有:</span>
        <span>
        <div id="d">
            00
        </div>
         天 </span> <span>
        <div id="h">
            00
        </div>
        时 </span> <span>
        <div id="m">
            00
        </div>
        分 </span> <span>
        <div id="s">
            00
        </div>
        秒 </span>
    </div>
</div>

<script>

const comingdate = new Date("12 24, 2020 00:00:00");

const d = document.getElementById("d");
const h = document.getElementById("h");
const m = document.getElementById("m");
const s = document.getElementById("s");

const countdown = setInterval(() => {const now   = new Date();
  const des   = comingdate.getTime() - now.getTime();
  const days  = Math.floor(des / (1000 * 60 * 60 * 24));
  const hours = Math.floor((des % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const mins  = Math.floor((des % (1000 * 60 * 60)) / (1000 * 60));
  const secs  = Math.floor((des % (1000 * 60)) / 1000);

  d.innerHTML = getTrueNumber(days);
  h.innerHTML = getTrueNumber(hours);
  m.innerHTML = getTrueNumber(mins);
  s.innerHTML = getTrueNumber(secs);

  if (x <= 0) clearInterval(x);
}, 1000);

const getTrueNumber = x => (x < 10 ? "0" + x : x);
</script>
本站未注明转载的文章均为原创,转载请注明来源,谢谢!

添加新评论