Javascript实现简单倒计时

       说实话,写这个我也很脑阔疼,虽然也就四五十行代码,我还是更喜欢写那种几千行的静态页面,哈哈,这个获取每一个时间的时,分,秒我真的是炸了,下面就让各位大佬浅看一下吧,如果有更好的方法,求大佬指点,嘻嘻。

       这个简单倒计时,实现的很有点草率,但我也没办法,目前就学了这么点东西,我也想加上样式给它整好看点,但是我真的会累,这道题整完,真的疯了。

      这个获取时间,完全都是靠js内置的时间日期API完成的,再加上一些运算和判断语句实现时间日期的计算,然后通过定时器,实现倒计时。

        //倒计时效果
        <div></div>
        //距离周一 8: 30 剩下 xx: xx: xx 定时器
        var str = '';
        let divs = document.querySelector('div');
        setInterval(function() {
                var aftertime = new Date("2022-3-21 08:30");
                var nowtime = new Date;
                // var remainSecond = second;
                var shenyutime = Math.floor((aftertime - nowtime) / 1000); //秒

                //获取天数
                var shenyuday = Math.floor(shenyutime / (60 * 60 * 24))
                shenyutime %= (60 * 60 * 24);

                //获取小时数
                var shenyuhour = Math.floor(shenyutime / (60 * 60));
                shenyuhour = shenyuhour <= 9 ? '0' + shenyuhour : shenyuhour;
                //这个判断主要是让0-9之间的数字前面补一个零
                shenyutime %= 3600 //除去小时数之后的秒数

                var minute = Math.floor(shenyutime / 60); //分钟数
                minute = minute <= 9 ? '0' + minute : minute;
                //这个判断主要是让0-9之间的数字前面补一个零
                shenyutime %= 60; //除去分钟后剩下的秒数
                shenyutime = shenyutime >= 9 ? shenyutime : '0' + shenyutime;

                str = shenyuday + "天  " + shenyuhour + ':' + minute + ':' + shenyutime;
                //console.log(str);
                //document.write(`<div>${str}</div>`)
                divs.innerHTML = str;

            }, 1000)
            //document.write(`<div>${str}</div>`)
    </script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值