快捷導(dǎo)航

基于javascript實(shí)現(xiàn)精確到毫秒的倒計(jì)時(shí)限時(shí)搶購(gòu)

更新時(shí)間：2016年04月17日 10:21:28 投稿：lijiao

現(xiàn)如今做電商網(wǎng)站必不可少的一個(gè)效果就是限時(shí)搶購(gòu)，這也是各大電商網(wǎng)站的一種促銷手段。如何實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu)，本文為大家分享了javascript實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu)的的相關(guān)代碼，感興趣的小伙伴們可以參考一下

這篇文章為大家分享了javascript實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu)，精確到毫秒的倒計(jì)時(shí)，供大家參考，具體內(nèi)容如下

一、效果圖

下面的圖片就是聚劃算上面的限時(shí)搶的效果

二、實(shí)現(xiàn)限時(shí)搶的效果需要用到的知識(shí) ：Javascript Date()對(duì)象
Date()返回當(dāng)前的日期和事件
getYear()返回年份獲得年最好用
getFullYear()方法來(lái)操作(完整格式如2016)
getMonth()返回月份值(從0開(kāi)始,+1)
getDay()返回星期幾(0-6)
getHours()返回小時(shí)數(shù)(0-23)
getMinutes()返回分鐘數(shù)(0-59)
getSeconds()返回秒數(shù)
getTime()返回毫秒數(shù)
當(dāng)然，上面的調(diào)用方法我們不一定全部用到，也要看你自己的需求，廢話不多說(shuō)，我們直接上代碼：
1、HTML頁(yè)面代碼：
<p class="left-time"></p>
我們把倒計(jì)時(shí)的內(nèi)容放在class為left-time的<p>標(biāo)簽內(nèi).
2、JS腳本：

$(function(){
  function leftTime(){
    var endTime = new Date("2016/5/20,12:00:00");//結(jié)束時(shí)間
    var curTime = new Date();//當(dāng)前時(shí)間
    var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//獲得時(shí)間差
    //小時(shí)、分、秒需要取模運(yùn)算
    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+"小時(shí)"+m+"分鐘"+s+"."+ms+"秒";
    $(".left-time").text(txt);
    if(leftTime<=0){ $(".left-time").text("團(tuán)購(gòu)結(jié)束");}
  };
  leftTime();
  var set = setInterval(leftTime,100);
});

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

最后記得不要忘記了給個(gè)if()判斷時(shí)間結(jié)束的時(shí)候需要顯示的內(nèi)容哦，不然就會(huì)出現(xiàn)不必要的小bug喲！

您可能感興趣的文章:

相關(guān)文章

強(qiáng)大的JavaScript響應(yīng)式圖表Chartist.js的使用
本篇文章主要介紹了強(qiáng)大的JavaScript響應(yīng)式圖表Chartist.js的使用，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-09-09
對(duì) lightbox JS 圖片控件進(jìn)行了一下改造, 使其他支持復(fù)雜的圖片說(shuō)明
如果要為圖片添加詳細(xì)的圖片說(shuō)明，并為圖片的說(shuō)明設(shè)置一些格式，如字體的大小、顏色等，那么使用 title 這個(gè)屬性來(lái)設(shè)置這些說(shuō)明信息是沒(méi)辦法實(shí)現(xiàn)的。
2010-03-03
js 操作css實(shí)現(xiàn)代碼
雖說(shuō)jquery支持css選擇器，可以把一些css規(guī)則放在js里，js無(wú)論如何是比css靈活的。但是js修改的是dom的htmlelement的stlye，是一個(gè)操作而非規(guī)則。
2009-06-06
基于JavaScript實(shí)現(xiàn)輪播圖原理及示例
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)輪播圖原理及示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
JS中${}什么意思有什么作用
在JavaScript中,${}用于模板文字（template?literals）,為ES6中新增的字符串方法,其作用是配合反單引號(hào)實(shí)現(xiàn)字符串拼,代替以前傳統(tǒng)復(fù)雜的引號(hào)雙引號(hào)與+的拼接,簡(jiǎn)介明了,非常好用,本文給大家介紹JS中‘${}‘什么意思有什么作用,感興趣的朋友一起看看吧
2023-08-08
JavaScript實(shí)現(xiàn)下拉列表選擇框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)下拉列表選擇框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
javascript自定義加載loading效果
這篇文章主要為大家詳細(xì)介紹了javascript自定義加載loading效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
Javascript調(diào)試之console對(duì)象——你不知道的一些小技巧
這篇文章主要總結(jié)了console對(duì)象的一些有用的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-07-07
javascript實(shí)現(xiàn)的基于金山詞霸網(wǎng)絡(luò)翻譯的代碼
下面的這段代碼是基于金山詞霸網(wǎng)絡(luò)翻譯提供的接口，遠(yuǎn)程調(diào)用文件，可以作為一個(gè)自定義的在線查詢工具。
2010-01-01
前端url拼接參數(shù)格式&?用&和??=拼接方法實(shí)例
在一些情況下需要直接往url上拼接請(qǐng)求參數(shù),下面這篇文章主要給大家介紹了關(guān)于前端url拼接參數(shù)格式&?用&和??=拼接的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02