js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)代碼
更新時(shí)間：2016年08月11日 09:01:52 作者：jineslee
這篇文章主要為大家詳細(xì)介紹了js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
倒計(jì)時(shí)：
1.設(shè)置一個(gè)有效的結(jié)束日期
2.計(jì)算剩余時(shí)間
3.將時(shí)間轉(zhuǎn)換成可用的格式
4.輸出時(shí)鐘數(shù)據(jù)作為一個(gè)可重用的對(duì)象
5.在頁(yè)面上顯示時(shí)鐘，并在它到達(dá)0時(shí)停止
html
<div id="clock"> <span id="days"></span>天 <span id="hours"></span>時(shí) <span id="minutes"></span>分 <span id="seconds"></span>秒 </div>
js代碼
<script><br>/*計(jì)算剩余時(shí)間*/
function getTimeReamin(endtime){
//剩余的秒數(shù)
var remainSec=(Date.parse(endtime)-Date.parse(new Date()))/1000;
var days=Math.floor(remainSec/(3600*24));
var hours=Math.floor(remainSec/3600%24);
var minutes=Math.floor(remainSec/60%60);
var seconds=Math.floor(remainSec%60);
return{"remainSec":remainSec,
"days":days,
"hours":hours,
"minutes":minutes,
"seconds":seconds
}
}
var endtime="2016/10/10";
var clock=document.getElementById("clock");
//設(shè)置定時(shí)器
var timeid=setInterval(function () {
var t=getTimeReamin(endtime);
//判斷時(shí)間格式
days= t.days>=0&& t.days<10?"0"+t.days:t.days;
hours= t.hours>=0&& t.hours<10?"0"+t.hours:t.hours;
minutes=t.minutes>=0&&t.minutes<10?"0"+t.minutes:t.minutes;
seconds=t.seconds>=0&&t.seconds<10?"0"+t.seconds:t.seconds;
//設(shè)置時(shí)間
document.getElementById("days").innerText= days;
document.getElementById("hours").innerText= hours;
document.getElementById("minutes").innerText= minutes;
document.getElementById("seconds").innerText=seconds;
//清除定時(shí)器
if(t.remainSec<=0){
clearInterval(timeid);
}
});
<script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)瀏覽器倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面效果
- php倒計(jì)時(shí)出現(xiàn)-0情況的解決方法
- JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)效果
- 點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)
- javascript顯示倒計(jì)時(shí)控制按鈕的簡(jiǎn)單實(shí)現(xiàn)
- js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果
- BOM系列第三篇之定時(shí)器應(yīng)用(時(shí)鐘、倒計(jì)時(shí)、秒表和鬧鐘)
相關(guān)文章
這篇文章主要介紹了詳解JavaScript修改注冊(cè)表的方法,本實(shí)例主要通過(guò)WshShell 對(duì)象的相關(guān)方法實(shí)現(xiàn),需要的朋友可以參考下2020-01-01
這篇文章主要給大家介紹了關(guān)于利用微信小程序?qū)崿F(xiàn)皮膚功能，也就是實(shí)現(xiàn)夜間模式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
這篇文章主要介紹了javascript制作的cookie封裝及使用指南,需要的朋友可以參考下2015-01-01
簡(jiǎn)單實(shí)現(xiàn)bootstrap選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)bootstrap選項(xiàng)卡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)畫(huà)彈出層效果
本文給大家介紹的是是一款javascript彈出層特效,支持點(diǎn)擊觸發(fā)js彈出層,滑過(guò)觸發(fā)js彈出層,帶動(dòng)畫(huà)效果js彈出層,可自定義函數(shù)回調(diào)js彈出層。2015-05-05
通過(guò)V8源碼看一個(gè)關(guān)于JS數(shù)組排序的詭異問(wèn)題
一直在學(xué)習(xí)C++，也想閱讀點(diǎn)開(kāi)源的C++項(xiàng)目，發(fā)現(xiàn)網(wǎng)上對(duì)Google V8評(píng)價(jià)不錯(cuò)，于是上Github上找到了源代碼，但在學(xué)習(xí)中遇到一個(gè)js數(shù)組排序的問(wèn)題，下面這篇文章主要給大家介紹了通過(guò)V8源碼說(shuō)說(shuō)一個(gè)關(guān)于JS數(shù)組排序的詭異問(wèn)題的相關(guān)資料，需要的朋友可以參考下。2017-08-08
JavaScript判斷數(shù)組的方法總結(jié)與推薦
這篇文章主要給大家介紹了關(guān)于JavaScript判斷數(shù)組方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
為JavaScript提供睡眠功能(sleep) 自編譯JS引擎
如何在js中讓函數(shù)睡眠多少秒? 經(jīng)常會(huì)有Javascript初學(xué)者提出這樣的問(wèn)題,自從js出現(xiàn)以來(lái).2010-08-08
Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，語(yǔ)法行為與傳統(tǒng)函數(shù)完全不同。這篇文章給大家介紹Es6 Generator函數(shù)的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-02-02
這篇文章主要介紹了JavaScript交換兩個(gè)變量方法實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11