TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

倒计时代码

老狮博主
2020-10-20
/
0 评论
/
567 阅读
/
39 个字
/
百度已收录
10/20
本文最后更新于2020年10月20日,已超过175天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

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

<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>
美化代码
朗读
赞(1)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

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

评论 (0)

互动读者

  • 老狮博主

    评论 9 次 | 文章 335 篇

  • 最后闲逛

    评论 5 次 | 文章 0 篇

  • 白嫖爱好者闲逛

    评论 4 次 | 文章 0 篇

  • 独乐乐闲逛

    评论 3 次 | 文章 0 篇

标签云

最新回复

  1. JamesQ闲逛
    2021-04-12
  2. eee闲逛
    2021-04-12
  3. lksani闲逛
    2021-04-12
  4. 拉克丝闲逛
    2021-04-12
  5. lksain闲逛
    2021-04-12