js倒計(jì)時(shí)小實(shí)例（多次定時(shí)）
更新時(shí)間：2016年12月08日 16:01:57 作者：小朋友663
這篇文章主要介紹了js實(shí)現(xiàn)可多次定時(shí)的倒計(jì)時(shí)小實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一個(gè)簡(jiǎn)單的js計(jì)時(shí)函數(shù)（多次定時(shí)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{text-align:center;font-size:40px;}
</style>
</head>
<body>
<h1 id="number">
<!-- 倒計(jì)時(shí)還有 01時(shí)01分01秒 -->
</h1>
<script>
//設(shè)置倒計(jì)時(shí)的時(shí)間范圍
var seconds = 1000;
//手工調(diào)用計(jì)時(shí)函數(shù)
timeRun();
//定時(shí)調(diào)用函數(shù)
var timer = setInterval(timeRun, 1000);
//倒計(jì)時(shí)函數(shù)
function timeRun(){
//獲取 h1
var h1 = document.getElementById('number');
//判斷
if (seconds <= 0) {
h1.innerHTML = "Game Over";
h1.style.fontSize = "120px";
clearInterval(timer);
return;
}
//計(jì)算 秒數(shù) 里面包含的小時(shí)數(shù)
var h = Math.floor(seconds / 3600);
//計(jì)算剩下的秒數(shù)
var s = seconds - h * 3600;
//在從剩下的秒數(shù)中 取出 分鐘
var m = Math.floor(s / 60);
//計(jì)算剩下的秒數(shù)
s -= m * 60;
//處理數(shù)字 <10的數(shù)字前加0
h = (h<10)?'0'+h:h;
m = (m<10)?'0'+m:m;
s = (s<10)?'0'+s:s;
//拼接字符串
var message = "倒計(jì)時(shí)還有 "+h+'時(shí)'+m+'分'+s+'秒';
//把字符串輸出到h1中
h1.innerHTML = message;
//秒數(shù)減少
seconds --;
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- BOM系列第三篇之定時(shí)器應(yīng)用(時(shí)鐘、倒計(jì)時(shí)、秒表和鬧鐘)
- 各種頁(yè)面定時(shí)跳轉(zhuǎn)(倒計(jì)時(shí)跳轉(zhuǎn))代碼總結(jié)
- Javascript倒計(jì)時(shí)（定時(shí)）執(zhí)行跳轉(zhuǎn)事件的代碼
- 團(tuán)購(gòu)、定時(shí)搶購(gòu)倒計(jì)時(shí)js版
- js倒計(jì)時(shí)搶購(gòu)實(shí)例
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- js實(shí)現(xiàn)n秒倒計(jì)時(shí)后才可以點(diǎn)擊的效果
- js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)方法
- javascript同步服務(wù)器時(shí)間和同步倒計(jì)時(shí)小技巧
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
相關(guān)文章
layui?框架的upload上傳文件的data參數(shù)傳到后端的方法
這篇文章主要介紹了layui框架的upload上傳文件的data參數(shù)傳到后端的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了ES6新特性之Symbol類型用法,結(jié)合形式分析了Symbol類型的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03
JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法
這篇文章主要給大家介紹了關(guān)于JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
使用Bootstrap typeahead插件實(shí)現(xiàn)搜索框自動(dòng)補(bǔ)全的方法
這篇文章主要介紹了使用Bootstrap typeahead插件實(shí)現(xiàn)搜索框自動(dòng)補(bǔ)全的方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
15個(gè)簡(jiǎn)單的JS編碼標(biāo)準(zhǔn)讓你的代碼更整潔(小結(jié))
這篇文章主要介紹了15個(gè)簡(jiǎn)單的JS編碼標(biāo)準(zhǔn)讓你的代碼更整潔(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07 
這篇文章主要介紹了JS實(shí)現(xiàn)文字掉落效果的方法,可實(shí)現(xiàn)文字往下掉落最終排序正常顯示的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-05-05 
微信小程序與webview?H5交互的方法(內(nèi)嵌H5跳轉(zhuǎn)原生頁(yè)面)
小程序webView中嵌套H5頁(yè)面,難免會(huì)遇到小程序與h5頁(yè)面進(jìn)行數(shù)據(jù)通信或交互的場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于微信小程序與webview?H5交互的相關(guān)資料,內(nèi)嵌H5跳轉(zhuǎn)原生頁(yè)面,需要的朋友可以參考下
2022-11-11 
Javascript驗(yàn)證用戶輸入U(xiǎn)RL地址是否為空及格式是否正確
這篇文章主要介紹了Javascript驗(yàn)證用戶輸入U(xiǎn)RL地址是否為空及格式是否正確,很實(shí)用，需要的朋友可以參考下
2014-10-10 
這篇文章主要為大家詳細(xì)介紹了微信小程序slider組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01