快捷導(dǎo)航

js實(shí)現(xiàn)倒計(jì)時(shí)關(guān)鍵代碼

更新時(shí)間：2017年05月05日 08:36:25 作者：Cythia-milk

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)倒計(jì)時(shí)的關(guān)鍵代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

我們經(jīng)常會(huì)在一些電商網(wǎng)站上看到秒殺倒計(jì)時(shí),雙11倒計(jì)時(shí).其實(shí)倒計(jì)時(shí)的效果實(shí)現(xiàn)起來(lái)也是很簡(jiǎn)單的,并不復(fù)雜.

首先呢,開(kāi)始寫之前一定要理清楚思路,思路清晰了,那寫起來(lái)就容易多了,下面我分了幾個(gè)步驟:

1.獲取當(dāng)前的時(shí)間,并且定義結(jié)束的時(shí)間

2.用求未來(lái)時(shí)間和當(dāng)前時(shí)間的時(shí)間差,并且求出時(shí)分秒

3.設(shè)置定時(shí)器,讓時(shí)間每秒遞減

var div = document.getElementsByTagName("div")[0];
      var timer = setInterval(timers, 1000);

      function timers() {
        //獲取現(xiàn)在的時(shí)間
        var now = new Date();
        //獲取你想要的未來(lái)時(shí)間
        var future = new Date("2017/05/10");
        var time = future.getTime() - now.getTime();
        //獲取距離的天數(shù)
        var day = parseInt(time / 24 / 60 / 60 / 1000);
        //獲取距離的小時(shí)
        var hour = parseInt(time / 1000 / 60 / 60 % 24);
        //獲取分
        var minute = parseInt(time / 1000 / 60 % 60);
        //獲取秒
        var sec = parseInt(time / 1000 % 60);
        if(time < 0) {
          div.innerHTML = "距離蘋果發(fā)布會(huì)還有00天00小時(shí)00分00秒000毫秒";
          clearInterval(timer);
          return;
        }
        //注意點(diǎn):當(dāng)時(shí)間小于10的時(shí)候,要在前面補(bǔ)0
        div.innerHTML = "距離結(jié)束時(shí)間還有" + (day < 10 ? ("0" + day) : day) + "天" + (hour < 10 ? ("0" + hour) : hour) + "小時(shí)" + (minute < 10 ? ("0" + minute) : minute) + "分" + (sec < 10 ? ("0" + sec) : sec) + "秒";
      }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)隨機(jī)點(diǎn)名器精簡(jiǎn)版
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名器的精簡(jiǎn)版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
JavaScript登錄驗(yàn)證基礎(chǔ)教程
這篇文章主要為大家詳細(xì)介紹了JavaScript登錄驗(yàn)證的基礎(chǔ)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
javascript命名約定(變量?函數(shù)?類?組件)
這篇小文章主要是通過(guò)一些例子來(lái)介紹一些Javascript中一些關(guān)于命名變量，函數(shù)，類或者是組件的通用約定，雖然這些規(guī)則并不是強(qiáng)制性的，但是呢，他們卻被一些JS社區(qū)所廣泛采用，所以，了解他們還是很有必要的
2023-03-03
JS檢測(cè)是否可以訪問(wèn)公網(wǎng)服務(wù)器功能代碼
檢測(cè)AC是否放行成功，是否可以訪問(wèn)公網(wǎng)阿里云服務(wù)器。下面給大家分享JS檢測(cè)是否可以訪問(wèn)公網(wǎng)服務(wù)器功能代碼，需要的的朋友參考下吧
2017-06-06
ES6?關(guān)鍵字?let?和?ES5?及關(guān)鍵字?var?的區(qū)別解析
var可以穿透控制語(yǔ)句、條件語(yǔ)句這樣的作用域，導(dǎo)致變量沖突經(jīng)常發(fā)生，這篇文章主要介紹了ES6?關(guān)鍵字?let?和?ES5?及關(guān)鍵字?var?的區(qū)別,需要的朋友可以參考下
2022-09-09
微信小程序?qū)崿F(xiàn)鼠標(biāo)拖動(dòng)效果示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)鼠標(biāo)拖動(dòng)效果,涉及微信小程序事件綁定及元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-12-12
Javascript封裝DOMContentLoaded事件實(shí)例
這篇文章主要介紹了Javascript封裝DOMContentLoaded事件實(shí)例,DOMContentLoaded是FF,Opera 9的特有的Event, 當(dāng)所有DOM解析完以后會(huì)觸發(fā)這個(gè)事件,需要的朋友可以參考下
2014-06-06
JavaScript保存并運(yùn)算頁(yè)面中數(shù)字類型變量的寫法
這篇文章主要介紹了JavaScript保存并運(yùn)算頁(yè)面中數(shù)字類型變量的寫法,當(dāng)你在頁(yè)面中需要不停運(yùn)算一個(gè)數(shù)字變量時(shí)非常有用,普通的寫法不能正常運(yùn)算,使用本文方法就可以,需要的朋友可以參考下
2015-07-07
javascript 廣告后加載，加載完頁(yè)面再加載廣告
網(wǎng)頁(yè)打開(kāi)的順序都是按頁(yè)面從上到下的順序加載完成的，所以要想使廣告不影響頁(yè)面打開(kāi)速度，就要等頁(yè)面全部打開(kāi)完成后，再加載JS代碼。
2010-11-11
Bootstrap3制作搜索框樣式的方法
這篇文章主要介紹了Bootstrap3制作搜索框樣式的方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07