基於javascript實現精確到毫秒的倒計時限時搶購_javascript技巧

來源:互聯網
上載者:User

這篇文章為大家分享了javascript實現倒計時限時搶購,精確到毫秒的倒計時,供大家參考,具體內容如下

一、效果圖

下面的圖片就是聚划算上面的限時搶的效果

二、實現限時搶的效果需要用到的知識 :Javascript Date()對象
Date()返回當前的日期和事件
getYear()返回年份 獲得年最好用
getFullYear()方法來操作(完整格式如2016)
getMonth()返回月份值(從0開始,+1)
getDay()返回星期幾(0-6)
getHours()返回小時數(0-23)
getMinutes()返回分鐘數(0-59)
getSeconds()返回秒數
getTime()返回毫秒數
當然,上面的調用方法我們不一定全部用到,也要看你自己的需求,廢話不多說,我們直接上代碼:
1、HTML頁面代碼:
<p class="left-time"></p>
我們把倒計時的內容放在class為left-time的<p>標籤內.
2、JS指令碼:

$(function(){  function leftTime(){    var endTime = new Date("2016/5/20,12:00:00");//結束時間    var curTime = new Date();//目前時間    var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//獲得時間差    //小時、分、秒需要模數運算    var d = parseInt(leftTime/(60*60*24));    var h = parseInt(leftTime/(60*60)%24);    var m = parseInt(leftTime/60%60);    var s = parseInt(leftTime%60);    var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10);    var txt = "剩餘:"+d+"天"+h+"小時"+m+"分鐘"+s+"."+ms+"秒";    $(".left-time").text(txt);    if(leftTime<=0){ $(".left-time").text("團購結束");}  };  leftTime();  var set = setInterval(leftTime,100);});

上面的js就實現了一個簡單的限時搶的小例子,其中parseInt()方法是取整,getTime()把時間轉化為毫秒,除了parseInt()方法之外,還可以用Math.floor()向下取整的方法代替.

最後記得不要忘記了給個if()判斷時間結束的時候需要顯示的內容哦,不然就會出現不必要的小bug喲!

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.