js基础应用篇 - 模拟京东倒计时

最新推荐文章于 2025-04-30 19:15:12 发布

470368525

最新推荐文章于 2025-04-30 19:15:12 发布

阅读量828

点赞数 2

分类专栏： javascript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_45217584/article/details/94633898

版权

javascript 专栏收录该内容

28 篇文章

订阅专栏

模拟京东倒计时，按照图示进行布局和效果实现

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>倒计时 </title>
    <style>
        li{list-style: none}
      #box{
          color: #fff;
          width: 200px;
          height: 330px;
          background-color: #e83632;
          text-align: center;
          overflow: hidden;
      }
        #box h2{
            font-weight: normal;
            margin-top: 40px;
        }
        #box i{
            display: block;
            width: 40px;
            height: 70px;
            margin: 0 auto;
            background: url(img/seckill.png) no-repeat -65px 0;
        }
        #box p:nth-child(2){
            color: #f19a98;
        }
        #box ul {
            position: absolute;
        }
        #box ul li{
            float: left;
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-weight: bold;
            margin-right: 5px;
            background-color: #2f3430;
        }
        #box .line{
            position: absolute;
            top: 50%;
            width: 130px;
            height: 1px;
            background-color: #e83632;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>倒计时</h2>
    <p>COUNT DOWN</p>
    <i></i>
    <P>距离结束还剩</P>
    <ul id="time">
        <li></li>
        <li></li>
        <li></li>
        <li class="line"></li>
    </ul>
</div>


<script>
    var div = document.getElementById('div2');
    var star = new Date('07 10 2020 00:00:00');
    var lis  = document.getElementsByTagName('li');

    setInterval(function () {
        var now = new Date();
        var c = star-now;

        var s = parseInt(c/1000%60);
        s = toString(s);
        var m = parseInt(c/1000/60%60);
        m = toString(m);
        var h = parseInt(c/1000/60/60);
        h = toString(h);
        lis[0].innerHTML = h;
        lis[1].innerHTML = m;
        lis[2].innerHTML = s;

    },1000);
    
    // 保留2位数，个位数前加0
    function toString(num) {
        num += "";
        if (num.length<2) {
            num = "0"+ num;
        }
        return num;
    }

</script>

</body>
</html>