通过JS实现倒计时

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>倒计时</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

 

        body {

            background: lightcyan;

        }

 

        #time {

            width: 500px;

            height: 80px;

            line-height: 80px;

            border: 1px dashed darkblue;

            margin: 0 auto;

            text-align: center;

            font-size: 24px;

        }

    </style>

</head>

 

<body>

    <div id="time">06时45分30秒</div>

</body>

 

</html>

<script>

    /*

        现在的时间:

        目标时间:"2020-11-20 17:00:00"

        时间差:new Date('2020-11-20 17:00:00')-new Date()

    */

    

    function timedown(str){

        var times = new Date(str) - new Date();

        if(times<=0){

            clearInterval(timer);

            timer=null;

            return 'timepass';

        }

        var hours = Math.floor(times / 1000 / 60 / 60);

        var min = Math.floor((times-hours*1000*60*60)/1000/60);

        var sec = Math.floor((times-hours*1000*60*60-min*1000*60)/1000);

        return fn(hours)+'时'+fn(min)+'分'+fn(sec)+'秒'

    }

    function fn(num){

        if(num<10){

            return '0'+num

        }

        return num;

    }

//目标时间    

var str='2020-11-20 17:00:00';

    document.getElementById('time').innerText =timedown(str)

    var timer=setInterval(function () {

        document.getElementById('time').innerText =timedown(str)

    }, 1000)

</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值