使用Javascript、HTML、CSS实现时间戳转成天、小时、分钟、秒

最新推荐文章于 2023-10-20 16:06:03 发布

浅默淡殇450

最新推荐文章于 2023-10-20 16:06:03 发布

阅读量968

点赞数 2

分类专栏：网页设计 Javascript 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_56296642/article/details/127157756

版权

网页设计同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Javascript

3 篇文章 0 订阅

订阅专栏

倒计时效果

效果如下:
在这里插入图片描述
下面展示具体代码。

// 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         *{padding: 0px;margin: 0px;list-style: none;}
        .title{
            height: 30px;
            line-height: 30px;
        }
        .logo,.time,.text{
            float: left;
        }
        a{float: right;}
        .text{
            font-size:12px;
            color: #F23030;
        }
        .time span{
            font-size:12px;
            color: #fff;
        }
        .time span:nth-child(odd){
            width:20px;
            height: 20px;
            border-radius:30%;
            background: #000;
        }
        .time span:nth-child(even){color: #000;}
        .logo{
            background: url(项目J3-7/images/jd-sprites.PNG) no-repeat;
            width: 20px;
            height: 22px;
            background-position: 3px 8px;/* 背景图象在水平和垂直方向的位置 */
        }
    </style>
</head>
<body>
    <div class="title">
        <div class="logo"></div>
        <div class="text">京东秒杀：距离2022双11还有</div>
        <div class="time">
            <span>00</span>
            <span>天</span>
            <span>00</span>
            <span>:</span>
            <span>00</span>
            <span>:</span>
            <span>00</span>
        </div>
        <a href="#" class="more">秒杀一切</a>
    </div>
</body>
</html>
<script>
    function CountdownTime(){
        var spans=document.querySelectorAll('.time span:nth-child(odd)');//获取操作的元素，返回文档中匹配到的指定的元素
        var endTime=new Date("2022/11/11 00:00:00");
        var nowTime=new Date();//获取当前时间
        var t=Math.floor((endTime.getTime()-nowTime.getTime()) /1000);//getTime()得到的是毫秒数，1秒等于1000毫秒
        var timer=setInterval(function(){
            //获取小于或等于X的最大整数，即向下取整
            var d=Math.floor(t/3600/24);//天数
            //取模时获取剩余的小时、分钟、秒
            var h=Math.floor(t/3600%24);
            var m=Math.floor((t/60)%60);
            var s=Math.floor(t%60);
            //小于10，是统一用两位数表示
            if(d<10){d="0"+d};
            if(h<10){h="0"+h};
            if(m<10){m="0"+m};
            if(s<10){s="0"+s};
            //设置或返回元素开始和结束标签之间的HTML,向对象插入内容
            spans[0].innerHTML=d;
            spans[1].innerHTML=h;
            spans[2].innerHTML=m;
            spans[3].innerHTML=s;
            t--;
        },1000);
    }
    CountdownTime();
</script>