js實現(xiàn)倒計時關鍵代碼
更新時間：2017年05月05日 08:36:25 作者：Cythia-milk
這篇文章主要為大家詳細介紹了js實現(xiàn)倒計時的關鍵代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
我們經(jīng)常會在一些電商網(wǎng)站上看到秒殺倒計時,雙11倒計時.其實倒計時的效果實現(xiàn)起來也是很簡單的,并不復雜.
首先呢,開始寫之前一定要理清楚思路,思路清晰了,那寫起來就容易多了,下面我分了幾個步驟:
1.獲取當前的時間,并且定義結(jié)束的時間
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 = "距離結(jié)束時間還有" + (day < 10 ? ("0" + day) : day) + "天" + (hour < 10 ? ("0" + hour) : hour) + "小時" + (minute < 10 ? ("0" + minute) : minute) + "分" + (sec < 10 ? ("0" + sec) : sec) + "秒";
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機點名器的精簡版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細介紹了JavaScript登錄驗證的基礎教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
javascript命名約定(變量?函數(shù)?類?組件)
這篇小文章主要是通過一些例子來介紹一些Javascript中一些關于命名變量，函數(shù)，類或者是組件的通用約定，雖然這些規(guī)則并不是強制性的，但是呢，他們卻被一些JS社區(qū)所廣泛采用，所以，了解他們還是很有必要的2023-03-03
檢測AC是否放行成功，是否可以訪問公網(wǎng)阿里云服務器。下面給大家分享JS檢測是否可以訪問公網(wǎng)服務器功能代碼，需要的的朋友參考下吧2017-06-06
ES6?關鍵字?let?和?ES5?及關鍵字?var?的區(qū)別解析
var可以穿透控制語句、條件語句這樣的作用域，導致變量沖突經(jīng)常發(fā)生，這篇文章主要介紹了ES6?關鍵字?let?和?ES5?及關鍵字?var?的區(qū)別,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)鼠標拖動效果,涉及微信小程序事件綁定及元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-12-12
Javascript封裝DOMContentLoaded事件實例
這篇文章主要介紹了Javascript封裝DOMContentLoaded事件實例,DOMContentLoaded是FF,Opera 9的特有的Event, 當所有DOM解析完以后會觸發(fā)這個事件,需要的朋友可以參考下2014-06-06
JavaScript保存并運算頁面中數(shù)字類型變量的寫法
這篇文章主要介紹了JavaScript保存并運算頁面中數(shù)字類型變量的寫法,當你在頁面中需要不停運算一個數(shù)字變量時非常有用,普通的寫法不能正常運算,使用本文方法就可以,需要的朋友可以參考下2015-07-07
網(wǎng)頁打開的順序都是按頁面從上到下的順序加載完成的，所以要想使廣告不影響頁面打開速度，就要等頁面全部打開完成后，再加載JS代碼。2010-11-11
這篇文章主要介紹了Bootstrap3制作搜索框樣式的方法 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07