h5页面计时器-蒲公英云

h5页面计时器

小鱼儿 2023-10-18 09:22 140阅读 0赞

h5页面计时器

效果
代码

效果

在这里插入图片描述

代码

<script>
        function countTime(){
            var endDateStr="2018-09-29 15:00:00";
            var date = new Date();
            var now = date.getTime();
            var endDate = new Date(endDateStr);
            var end = endDate.getTime();
            var leftTime = end-now;
            var d,h,m,s;
            var days,hours,minutes,seconds;
            var str = '';
            if (leftTime>0) {
                d = parseInt(leftTime/1000/60/60/24, 10); //剩余天数
                h = parseInt(leftTime/1000/60/60%24, 10); //剩余小时数
                m = parseInt(leftTime/1000/60%60, 10); //剩余分钟数
                s = parseInt(leftTime/1000%60, 10); //剩余秒数
                days = checkTime(d);
                hours = checkTime(h);
                minutes = checkTime(m);
                seconds = checkTime(s);
                if (d>0) {
                    str = days+'天'+hours+'小时'+minutes+'分'+seconds+'秒';
                }else if (h>0) {
                    str = hours+'小时'+minutes+'分'+seconds+'秒';
                }else if (m>0) {
                    str = minutes+'分钟'+' : '+seconds+'秒';
                }else if (s>0) {
                    str = seconds+'秒';
                }
                document.getElementById('timer').innerHTML = str;
                setTimeout('countTime()',1000);
            }else{
                clearTimeout(countTime);
            }        
        }
        function checkTime(i){
            if (i>0 && i<10) {
                i = '0'+i;
            }
            return i;
        }
        countTime();
    </script>