JS倒计时代码

原创 2019-01-16 21:26:20 453
摘要:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js倒计时代码</title><style type="text/

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js倒计时代码</title>

<style type="text/css">

* {

margin: 0;

padding: 0;

}

body{ text-align:center;}

ul, li {

list-style: none;

}

#show_time {

color: #f00;

font-size: 24px;

font-weight: bold;

width:100%;

text-align:center;

padding-top:30px;

}

</style>

</head>

<body>

<div id="show_time"> </div>

<script type="text/javascript"> 

function countdown(){

    var show_time = document.getElementById("show_time");

    var endtime = new Date("12/31/2020 23:59:59");//结束时间f

    var today = new Date();//当前时间

    var delta_T = endtime.getTime() - today.getTime();//时间间隔

    if(delta_T < 0){

        clearInterval(auto);

        show_time.innerHTML = "倒计时已经结束";

    }

    window.setTimeout(countdown,1000);

    var total_days = delta_T/(2*24*60*60*1000);//总天数

    var total_show = Math.floor(total_days);//实际显示的天数

    var total_hours = (total_days - total_show)*24;//剩余小时

    var hours_show = Math.floor(total_hours);//实际显示的小时数

    var total_minutes = (total_hours - hours_show)*60;//剩余的分钟数

    var minutes_show = Math.floor(total_minutes);//实际显示的分钟数

    var total_seconds = (total_minutes - minutes_show)*60;//剩余的分钟数

    var seconds_show = Math.floor(total_seconds);//实际显示的秒数

    show_time.innerHTML = "距离2020年还有:" + total_show + "天" + hours_show + "时" + minutes_show + "分" + seconds_show + "秒";

}

countdown();

</script>

</body>

</html>

演示地址 -> http://47.107.64.136/JS/3/


批改老师:韦小宝批改时间:2019-01-17 09:14:42
老师总结:写的很不错 看来关于时间的js方法你已经掌握的差不多了

发布手记

热门词条