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

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

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

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

首先呢,開始寫之前一定要理清楚思路,思路清晰了,那寫起來就容易多了,下面我分了幾個步驟:

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

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

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

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

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

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

您可能感興趣的文章:

js
倒計時

相關(guān)文章

this和執(zhí)行上下文實現(xiàn)代碼
Javascript中this關(guān)鍵字通常指向當(dāng)前函數(shù)的擁有者。在javascript中通常把這個擁有者叫做執(zhí)行上下文。
2010-07-07
js模擬電腦選擇多文件夾效果_選區(qū)代碼
模仿選擇文件夾效果的javascript封裝類，效果不錯，實際應(yīng)用呢，暫時用不到，大家可以學(xué)習(xí)思路
2008-09-09
js寫一個字符串轉(zhuǎn)成駝峰的實例
寫一個字符串轉(zhuǎn)成駝峰的方法，使用js代碼實現(xiàn)，具體如下，感興趣的朋友可以了解下哈
2013-06-06
JavaScript中的this陷阱的最全收集并整理(沒有之一)
這篇文章主要介紹了JavaScript中的this陷阱的最全收集,需要的朋友可以參考下
2017-02-02
使用JSX 建立組件 Parser（解析器）開發(fā)的示例
這篇文章主要介紹了使用JSX 建立組件 Parser（解析器）開發(fā)的示例（前端組件化）本文重點講述我們?nèi)绾螐?開始搭建一個組件系統(tǒng)，基于標記語言的Parser的一種風(fēng)格
2021-04-04
JS中的Select框?qū)崿F(xiàn)模糊搜索功能
本文通過實例代碼介紹JS中的Select框?qū)崿F(xiàn)模糊搜索功能,下面是使用JavaScript來實現(xiàn)模糊搜索的功能,代碼分為html部分和javascript部分,感興趣的朋友跟隨小編一起看看吧
2024-06-06
JavaScript 捕獲窗口關(guān)閉事件
javascript捕獲窗口關(guān)閉事件有兩種方法
2009-07-07
JavaScript 判斷一個對象{}是否為空對象的簡單方法
下面小編就為大家?guī)硪黄狫avaScript 判斷一個對象{}是否為空對象的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
詳解js樹形控件—zTree使用總結(jié)
本篇文章主要介紹了js樹形控件—zTree使用總結(jié)，樹形控件的使用是應(yīng)用開發(fā)過程中必不可少的。zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點.
2016-12-12
一些javascript一些題目的解析
今天做了群友發(fā)的一個鏈接, 關(guān)于js 的一些題目的. 這樣的題目常常有很多陷阱在里面,等著別人去踩. 很不幸,灑家踩了, 還蠻悲劇.
2010-12-12