首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 15:05:11
原創
2148 人瀏覽過

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

一、效果圖

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

二、實現限時搶的效果需要用到的知識 :Javascript Date()物件
Date()傳回目前的日期和事件
getYear()回國年份 取得年最好用
getFullYear()方法來操作(完整格式如2016)
getMonth()傳回月份值(從0開始,+1)
getDay()傳回星期(0-6)
getHours()回傳小時數(0-23)
getMinutes()傳回分鐘數(0-59)
getSeconds()傳回秒數
getTime()傳回毫秒數
當然,上面的呼叫方法我們不一定全部用到,要看你自己的需求,廢話不多說,我們直接上程式碼:
1、HTML頁面代碼:


我們把倒數計時的內容放在class為left-time的

標籤內.
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喲!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!