js實現(xiàn)倒計時關鍵代碼
更新時間：2017年05月05日 08:36:25 作者：Cythia-milk
這篇文章主要為大家詳細介紹了js實現(xiàn)倒計時的關鍵代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
我們經常會在一些電商網站上看到秒殺倒計時,雙11倒計時.其實倒計時的效果實現(xiàn)起來也是很簡單的,并不復雜.
首先呢,開始寫之前一定要理清楚思路,思路清晰了,那寫起來就容易多了,下面我分了幾個步驟:
1.獲取當前的時間,并且定義結束的時間
2.用求未來時間和當前時間的時間差,并且求出時分秒
3.設置定時器,讓時間每秒遞減
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;
}
//注意點:當時間小于10的時候,要在前面補0
div.innerHTML = "距離結束時間還有" + (day < 10 ? ("0" + day) : day) + "天" + (hour < 10 ? ("0" + hour) : hour) + "小時" + (minute < 10 ? ("0" + minute) : minute) + "分" + (sec < 10 ? ("0" + sec) : sec) + "秒";
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Javascript中this關鍵字通常指向當前函數(shù)的擁有者。在javascript中通常把這個擁有者叫做執(zhí)行上下文。2010-07-07
模仿選擇文件夾效果的javascript封裝類，效果不錯，實際應用呢，暫時用不到，大家可以學習思路2008-09-09
寫一個字符串轉成駝峰的方法，使用js代碼實現(xiàn)，具體如下，感興趣的朋友可以了解下哈2013-06-06
JavaScript中的this陷阱的最全收集并整理(沒有之一)
這篇文章主要介紹了JavaScript中的this陷阱的最全收集,需要的朋友可以參考下2017-02-02
使用JSX 建立組件 Parser（解析器）開發(fā)的示例
這篇文章主要介紹了使用JSX 建立組件 Parser（解析器）開發(fā)的示例（前端組件化）本文重點講述我們如何從0開始搭建一個組件系統(tǒng)，基于標記語言的Parser的一種風格2021-04-04
本文通過實例代碼介紹JS中的Select框實現(xiàn)模糊搜索功能,下面是使用JavaScript來實現(xiàn)模糊搜索的功能,代碼分為html部分和javascript部分,感興趣的朋友跟隨小編一起看看吧2024-06-06
javascript捕獲窗口關閉事件有兩種方法2009-07-07
JavaScript 判斷一個對象{}是否為空對象的簡單方法
下面小編就為大家?guī)硪黄狫avaScript 判斷一個對象{}是否為空對象的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本篇文章主要介紹了js樹形控件—zTree使用總結，樹形控件的使用是應用開發(fā)過程中必不可少的。zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點.2016-12-12
今天做了群友發(fā)的一個鏈接, 關于js 的一些題目的. 這樣的題目常常有很多陷阱在里面,等著別人去踩. 很不幸,灑家踩了, 還蠻悲劇.2010-12-12