zoukankan      html  css  js  c++  java
  • js 倒计时实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="demo01" class="colockbox">剩余
    <i class="day">0</i><i class="hour">0</i><i class="minute">0</i><i class="second">0</i><input id="end_time_gou" type="hidden" value="2015/08/20 13:00:00">
    <input id="now_gou" type="hidden" value="2015/06/25 11:44:08">
    </div>
    
    <div id="timer" class="colockbox">
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script>
    var time_end = $('#end_time_gou').val();
    var time_now_server = $('#now_gou').val();
    countDown(time_end,time_now_server,"#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second");
    function countDown(endtime,now,day_elem,hour_elem,minute_elem,second_elem){
    var end_time = new Date(endtime).getTime(),//月份是实际月份-1
    current_time = new Date(now).getTime(),
    sys_second = (end_time-current_time)/1000;
    var timer = setInterval(function(){
    if (sys_second > 0) {
    sys_second -= 1;
    var day = Math.floor((sys_second / 3600) / 24);
    var hour = Math.floor((sys_second / 3600) % 24);
    var minute = Math.floor((sys_second / 60) % 60);
    var second = Math.floor(sys_second % 60);
    day_elem && $(day_elem).text(day);//计算天
    $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
    $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
    $(second_elem).text(second<10?"0"+second:second);// 计算秒
    } else {
    clearInterval(timer);
    }
    }, 1000);
    }
    </script>
    <script type="text/javascript">
    var time_now_server,time_now_client,time_end,time_server_client,timerID;
    time_end=new Date($('#end_time_gou').val());//结束的时间
    time_end=time_end.getTime();
    time_now_server=new Date($('#now_gou').val());//开始的时间,服务器
    time_now_server= time_now_server.getTime();
    time_now_client=new Date();
    time_now_client=time_now_client.getTime();//本地的时间
    time_server_client=time_now_server-time_now_client;
    setTimeout("show_time("+time_end+","+time_server_client+","+timerID+")",1000);
    function show_time(time_end,time_server_client,timerID){
    var timer = document.getElementById('timer');
    if(!timer){return;}
    timer.innerHTML = timer.innerHTML;
    var time_now,time_distance,str_time;
    var int_day,int_hour,int_minute,int_second;
    var time_now=new Date();
    time_now=time_now.getTime()+time_server_client;
    time_distance=time_end-time_now;
    if(time_distance>0){
    int_day=Math.floor(time_distance/86400000)
    time_distance-=int_day*86400000;
    int_hour=Math.floor(time_distance/3600000)
    time_distance-=int_hour*3600000;
    int_minute=Math.floor(time_distance/60000)
    time_distance-=int_minute*60000;
    int_second=Math.floor(time_distance/1000)
    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;
    str_time=int_day+""+int_hour+"小时"+int_minute+"分钟"+int_second+"";
    timer.innerHTML=str_time;
    setTimeout("show_time("+time_end+","+time_server_client+","+timerID+")",1000);
    }else{
    timer.innerHTML =timer.innerHTML;
    clearTimeout(timerID)
    }
    }
    
    </script>
    </body>
    </html>
     
  • 相关阅读:
    django报错问题解决
    django2-项目实战
    django1-环境搭建与开始
    python学习-模块与包(九)
    逆水行舟,不进则退
    待学习规划内容
    越来越强大法则
    windows下安装scoop
    pytest+allure生成测试报告
    Angular vscode 调试
  • 原文地址:https://www.cnblogs.com/druids/p/4600082.html
Copyright © 2011-2022 走看看