多个并行秒杀倒计时

最新推荐文章于 2024-06-16 18:09:06 发布

想成为工程师的菜鸟

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量52

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_46177396/article/details/121202187

版权

<!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>多个并行秒杀倒计时</title>
</head>

<body>
    <div id="timer"></div>

    <p><span class="remainedTime-diffTime" data-timer="1634299800000"></span></p>
    <p><span class="remainedTime-diffTime" data-timer="1634304000000"></span></p>
    <p><span class="remainedTime-diffTime" data-timer="1634308200000"></span></p>


    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>

        // 时间戳转时间格式
        function formatDate(date) {
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            //  return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
            return year + '-' + (String(month).length > 1 ? month : '0' + month) + '-' +
                (String(day).length > 1 ? day : '0' + day) + ' ' + (String(hour).length > 1 ? hour : '0' + hour) + ':' + (String(minute).length > 1 ? minute : '0' + minute)
                + ':' + (String(second).length > 1 ? second : '0' + second)
        }
        //如果记得时间戳是毫秒级的就需要*1000 不然就错了记得转换成整型
        var d = new Date(1634270400000);
        console.log(formatDate(d))

        // 批量添加id
        function add_id(){
            var dlall=document.getElementsByClassName("remainedTime-diffTime")
            for(i=0;i<dlall.length;i++){
                dlall[i].id='id_'+i;
            }
        }
        add_id();

        // 循环获取时间戳，调用倒计时
        let len = $("p .remainedTime-diffTime").length;
        for(let i = 0; i<len; i++){
            let timer = $("p .remainedTime-diffTime").eq(i).attr("data-timer") - 0;
            TimeDown(`id_${i}`, timer)
        }
        
        // 倒计时
        function TimeDown(id, endDateStr) {
            //结束时间
            var endDate = new Date(endDateStr);
            //当前时间
            var nowDate = new Date();
            //相差的总秒数
            var totalSeconds = parseInt((endDate - nowDate) / 1000);
            //天数
            var days = Math.floor(totalSeconds / (60 * 60 * 24)).toString().padStart(2,'0');
            //取模（余数）
            var modulo = totalSeconds % (60 * 60 * 24).toString().padStart(2,'0');
            //小时数
            var hours = Math.floor(modulo / (60 * 60)).toString().padStart(2,'0');
            modulo = modulo % (60 * 60);
            //分钟
            var minutes = Math.floor(modulo / 60).toString().padStart(2,'0');
            //秒
            var seconds = (modulo % 60).toString().padStart(2,'0');

            days = days <= 0 ? "00" : days;
            hours = hours <= 0 ? "00" : hours;
            minutes = minutes <= 0 ? "00" : minutes;
            seconds = seconds <= 0 ? "00" : seconds;

            //输出到页面
            document.getElementById(id).innerHTML = "剩余抢购:" + days + "天" + hours + "：" + minutes + "：" + seconds;
            //延迟一秒执行自己
            let delay = setTimeout(function () {
                TimeDown(id, endDateStr);
                clearTimeout(delay)
            }, 1000)
        }


        // 时间格式转时间戳
        var date = new Date('2021-10-15 12:00:00').getTime();
        console.log(date); // 1634270400000


    </script>
</body>

</html>

想成为工程师的菜鸟

关注

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"> <title>多个
复制链接

扫一扫