倒计时小案例

数星星°

已于 2023-03-30 15:48:01 修改

阅读量63

点赞数

分类专栏： JS 文章标签： javascript 前端 html

于 2023-03-29 17:56:44 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52291147/article/details/129842088

版权

JS 专栏收录该内容

24 篇文章

订阅专栏

该代码段展示了一个使用JavaScript实现的实时倒计时功能，计算从当前时间到2023年6月18日的京东秒杀活动开始的剩余天数、小时、分钟和秒数。它通过设置间隔定时器每秒更新显示在HTML页面的<divid=box></div>中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
    <script>
        var targetDate = new Date("2023/6/18")

        function diffTime(current,target){

            var sub = Math.ceil((target-current)/1000)

            // console.log(sub)
            var day = parseInt(sub/(60*60*24))//一个小时3600秒，一天24小时
            // console.log(day)
            var hours = parseInt(sub%(60*60*24)/(60*60))
            // console.log(hours)
            var minutes = parseInt(sub%(60*60)/60)
            // console.log(minutes)
            var seconds = sub%60
            // console.log(seconds)

            var obj = {
                day:day,
                hours:hours,
                minutes:minutes,
                seconds:seconds
            }

            // console.log(obj)

            return obj
        }
        // 间隔定时器(1s)
        setInterval(function(){
            var currentDate = new Date()
            var res = diffTime(currentDate,targetDate)

            // document.write(`京东秒杀-${res.day}天
            //                     ${res.hours}时
            //                     ${res.minutes}分
            //                     ${res.seconds}秒`)
            // document.write("<br/>")
            box.innerHTML = `京东秒杀-${res.day}天
                                   ${res.hours}时
                                   ${res.minutes}分
                                   ${res.seconds}秒`
            
        },1000)
    </script>
</body>
</html>