设计倒计时

最新推荐文章于 2023-06-19 09:41:25 发布

石界星空

最新推荐文章于 2023-06-19 09:41:25 发布

阅读量484

点赞数

分类专栏： js 文章标签：设计

本文链接：https://blog.csdn.net/stone10086/article/details/70568687

版权

js 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jd秒杀条</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            font-style: normal;
            text-decoration: none;
        }

        .tip{
            width: 1190px;
            height: 55px;
            padding: 0 20px 0 30px;
            background: url('./img/bg.png') no-repeat;
            margin: 50px auto;
            box-sizing: border-box;
            position: relative;
        }

        .tip .left{
            float: left;
            height: 40px;
            margin-top: 9px;
            line-height: 40px;
        }

        .tip .left em{
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 20px;
            height: 20px;
            background: url('./img/sprite.png') no-repeat -194px -52px;
        }

        .tip .left s{
            display: block;
            width: 40px;
            height: 40px;
            float: left;
            background: url('./img/sprite.png') no-repeat 0px -40px;
        }

        .tip .left i{
            font-size: 26px;
            font-weight: 400;
            color: #fff;
            display: block;
            float: left;
            height: 40px;
            line-height: 40px;  
            font-family: fzzhengheis-el-gbregular;
        }

        .tip .left a{
            display: block;
            height: 24px;
            margin-top: 8px;
            font-size: 14px;
            color: #fff;
            float: left;
            padding-left: 20px;
            position: relative;
        }

        .tip .left a:after{
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            background: url('./img/sprite.png') -154px -40px;
            position: absolute;
            top: 12px;
            right: -24px;
        }


        .tip .right{
            float: right;
        }

        .tip .right>em{
            margin-top: 7px;
            display: block;
            height: 40px;
            line-height: 40px;
            float: left;
            font-size: 14px;
            color: #fff;
        }

        .tip .right>s{
            margin-top: 7px;
            display: block;
            height: 40px;
            line-height: 40px;
            float: right;
            font-size: 14px;
            color: #fff;
        }
        .tip .right span{
            display: block;
            height: 35px;
            float: left;
            border-radius: 8px;
            margin-top: 10px;
            font-size: 26px;
            line-height: 35px;
        }

        .tip .right span s,.tip .right span u,.tip .right span i{
            display: block;
            background: rgba(0,0,0,0.6);
            height: 35px;
            width: 35px;
            float: left;
            color: #E01222;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            line-height: 35px;
            border-radius: 8px;
        }
        .tip .right span em{
            display: block;
            height: 35px;
            line-height: 35px;
            text-align: center;
            width: 10px;
            margin-top: 0;
            float: left;
        }
    </style>
</head>
<body>
    <div class="tip">
        <div class="left">
            <em></em>
            <s></s>
            <i>京东秒杀</i>
            <a href="#">总有你想不到的低价</a>
        </div>
        <div class="right">
                <em>当前场次</em>
                <span>
                    <s></s>
                    <em>:</em>
                    <u></u>
                    <em>:</em>
                    <i></i>
                </span>
                <s>后结束抢购</s>
        </div>
    </div>
</body>
<script>
    (function(){

        //设置时间格式函数，方便调用；
        function num(n){
                return n<10? '0'+n:n;
            };

        setInterval(function(){
            var s=document.querySelector('.right span s');
            var u=document.querySelector('.right span u');
            var i=document.querySelector('.right span i');

            //获取当前时间
            var startTime=new Date();

            //设置结束时间
            var endTime=new Date('2017/04/24 23:00:00');

            //计算时间差，单位毫秒，为数字形式
            var countDown=(endTime.getTime()-startTime.getTime());

            //转化为时分秒形式
            var hours=parseInt(countDown/(3600*1000));
            var hoursmore=countDown%(3600*1000);
            var minutes=parseInt(hoursmore/(60*1000));
            var minutesmore=hoursmore%(60*1000);
            var seconds=parseInt(minutesmore/(1000));

            //将数值植入文本中
            s.innerHTML=num(hours);
            u.innerHTML=num(minutes);
            i.innerHTML=num(seconds);
        },1000)
    })();
</script>
</html>

石界星空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计倒计时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jd秒杀条</title> <style> *{ padding: 0; margin: 0; font-style: normal;
复制链接

扫一扫