TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱

倒计时代码

2020-10-20
/
0 评论
/
199 阅读
/
正在检测是否收录...
10/20

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

<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>
美化代码
朗读
赞(0)
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/2200.html(转载时请注明本文出处及文章链接)

评论 (0)

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月