倒计时

最新推荐文章于 2024-07-19 12:58:53 发布

qq_39196605

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量71

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_39196605/article/details/114578451

版权

倒计时：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./utils.js"></script>
    <title>Document</title>
</head>
<style>
    *{
        margin:0;
        padding:0
    }
    h1{
        font-size: 35px;
    }
    .box{
        width:300px;
        height: 40px;
        padding:20px;
        border:2px solid #333;
        margin:50px auto;
        line-height: 40px;
    }
    .box > p{
        line-height: 40px;
        display: inline-block;
        width: 40px;
        background:#ccc;
        color: #fff;
        font-size: 30px;
        text-align: center;
    }
</style>

<body>
    <h1>倒计时抢购：</h1>
    <div class="box">
        <p id="dayBox">XX</p>天
        <p id="hoursBox">XX</p>时
        <p id="minutesBox">XX</p>分
        <p id="secondsBox">XX</p>秒
    </div>
     <script>
        //  目标时间
         var target = new Date(2031,2,9,18,30,00)
         function daojishi(){
                var current = new Date()
                var diff = getTimeDifference(current,target)
                console.log(diff)
                if(diff.day<10) diff.day='0'+diff.day
                if(diff.hours<10) diff.hours='0'+diff.hours
                if(diff.minutes<10) diff.minutes='0'+diff.minutes
                if(diff.seconds<10) diff.seconds='0'+diff.seconds

                dayBox.innerHTML=diff.day
                hoursBox.innerHTML=diff.hours
                minutesBox.innerHTML=diff.minutes
                secondsBox.innerHTML=diff.seconds
         }
         daojishi()
         setInterval(daojishi,1000)
     </script>
</body>


</html>

utils.js

function getTimeDifference(time1, time2) {
    var diffTime = Math.round(Math.abs(time1.getTime() - time2.getTime()) / 1000)
    var day = parseInt(diffTime / (60 * 60 * 24))
    var hours = parseInt(diffTime % (60 * 60 * 24) / (60 * 60))
    var minutes = parseInt(diffTime % (60 * 60) / 60)
    var seconds = diffTime % 60
    return {
        day:day,
        hours:hours,
        minutes:minutes,
        seconds:seconds
    }
}

qq_39196605

关注

0
点赞
踩
0

收藏

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

倒计时：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script
复制链接

扫一扫