jquery实现倒计时功能 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="jquery.min.js"></script>
    <style>
        div.box{
            width:1200px;
            padding:20px;
            margin:20px;
            border:1px solid #c00;
            border-radius: 5px
        }
        div.box>span{
            color:#999;
            text-align: center;
            font-size: 2em;
        }
        div.content{
            width:1160px;
            margin:10px 0;
            padding:20px;
            border:2px solid #666;
            text-align: center;
        }
        input[type='text']{
            width:45px;
            height:35px;
            padding:5px 10px;margin:5px 0;
            border:1px solid #c00;
            text-align: center;
            border-radius: 5px;
        }

    </style>
</head>
<body>


<div class="box">
    <span>距离2018年元旦还剩：</span><br>
    <div class="content">
        <input type="text" id="time_d">天<input type="text" id="time_h">时<input type="text" id="time_m">分<input type="text" id="time_s">秒
    </div>
</div>

<script>

function show_time(){ 
    var time_start = new Date().getTime(); //设定当前时间
    var time_end =  new Date("2018/01/01 00:00:00").getTime(); //设定目标时间
    // 计算时间差 (毫秒)
    var time_distance = time_end - time_start; 
    // 天
    var int_day = Math.floor(time_distance/86400000) 
    time_distance -= int_day * 86400000; 

    // 时
    var int_hour = Math.floor(time_distance/3600000) 
    time_distance -= int_hour * 3600000; 

    // 分
    var int_minute = Math.floor(time_distance/60000) 
    time_distance -= int_minute * 60000; 

    // 秒 
    var int_second = Math.floor(time_distance/1000) 

    // 时分秒为单数时、前面加零 
    if(int_day < 10){ 
        int_day = "0" + int_day; 
    } 
    if(int_hour < 10){ 
        int_hour = "0" + int_hour; 
    } 
    if(int_minute < 10){ 
        int_minute = "0" + int_minute; 
    } 
    if(int_second < 10){
        int_second = "0" + int_second; 
    } 

    // 显示时间 
    $("#time_d").val(int_day); 
    $("#time_h").val(int_hour); 
    $("#time_m").val(int_minute); 
    $("#time_s").val(int_second); 
}

setInterval("show_time()",1000);

</script>    
</body>
</html>
View Code

 

posted @ 2019-04-01 11:14  雷神约  阅读(216)  评论(0)  编辑  收藏  举报