jquery如何實現倒計時效果


首先獲取當前時間與目標時間的時間差,然后通過定時器更新這個時間差,就實現了倒計時效果。實現上述過程需要以下兩個函數:

12 getTime()       // 返回距1970年1月1日之間的毫秒數,這樣將時間差(毫秒數)÷3600÷24即為天數,時分秒類似setTimeout(code,millisec);    // 在指定的毫秒數后調用函數

實例演示如下

  1. 創建Html元素

    123456 <div class="box">    <span>距離2015年國慶節還剩:</span>    <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>
  2. 設置css樣式

    1234 div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}div.box>span{color:#999;font-style:italic;}div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}input[type='text']{width:45px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}
  3. 編寫jquery代碼

    1234567891011121314151617181920212223242526272829303132333435363738394041 $(function(){     show_time();});  function show_time(){     var time_start = new Date().getTime(); //設定當前時間    var time_end =  new Date("2015/10/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);     // 設置定時器    setTimeout("show_time()",1000); }

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com