孙肖宁

倒计时
描述:在页面上显示距离某一时间还有几天几时几分几秒示例代码:<!DOCTYPE html> <h...
扫描右侧二维码阅读全文
09
2018/04

倒计时

描述:在页面上显示距离某一时间还有几天几时几分几秒
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        .time{
            width: 1200px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
    <div class="time"></div>
</body>
</html>
<script>
    var time = document.getElementsByClassName("time")[0];
    var timer = setInterval(fn,1);
    function  fn() {
        var nowTime = new Date();
        var future = new Date("2018/11/23 00:00:00");
        var timeSum = future.getTime() - nowTime.getTime();
        var day = parseInt(timeSum/1000/60/60/24);
        var hour = parseInt(timeSum/1000/60/60%24);
        var minu = parseInt(timeSum/1000/60%60);
        var sec = parseInt(timeSum/1000%60);
        var millsec = parseInt(timeSum%1000);
        day = day<10 ?"0"+day:day;
        hour = hour<10? "0"+hour:hour;
        minu = minu<10?"0"+minu:minu;
        sec = sec<10?"0"+sec:sec;
        if(millsec<10){
            millsec = "00"+millsec;
        }else if(millsec<100){
            millsec = "0"+millsec;
        }
        if(timeSum<0){
            time.innerHTML = "距离孙肖宁的生日还有00天00小时00分00秒000毫秒";
            clearInterval(timer);
            return;
        }else {
            time.innerHTML = "距离孙肖宁的生日还有"+day+"天"+hour+"小时"+minu+"分"+sec+"秒"+millsec+"毫秒";

        }
    }
</script>
Last modification:April 9th, 2018 at 11:17 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment