電商限時購:精確到毫秒的倒計時!


現如今做電商網站必不可少的一個效果就是限時搶購,這也是各大電商網站的一種促銷手段。下面的圖片就是聚划算上面的限時搶的效果

一、實現限時搶的效果需要用到的知識 :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喲!O(∩_∩)O~


注意!

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



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