js編寫簡單的計時器功能

更新時間：2017年07月15日 15:23:32 作者：ouqi_qiou

這篇文章主要為大家詳細介紹了js編寫簡單的計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js計時器功能的編寫代碼，供大家參考，具體內容如下

小白一枚，如有代碼不規(guī)范或者寫錯的地方，希望得大神指導

代碼：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>

<body>
<div id="waitTime"></div>

<script src="js/jquery-git.js"></script>
<script type="text/javascript">
//計時
var time = 0;
var a = setInterval(jishi, 1000); //1000毫秒
var isCanCancerOrder = false;

function jishi() {
time++;

$('#waitTime').html(calTime(time)); //倒計時

if(time == 60) { //1分鐘之后
alert("一分鐘到啦！");
}
}

function calTime(time) {
var spit = ":";
var hour = "00";
var second = "00";
var min = "00";
var result = "";

if(time % 60 != 0) { //秒
if(time % 60 > 10) {
second = time % 60;
} else {
second = "0" + time % 60;
}
}

if(parseInt(time / 60) != 0) { //分
if(parseInt(time / 60) > 10) {
min = parseInt(time / 60);
} else {
min = "0" + parseInt(time / 60);
}
}

if(parseInt(time / 3600) != 0) { //時
if(parseInt(time / 3600) > 10) {
hour = parseInt(time / 3600);
} else {
hour = "0" + parseInt(time / 3600);
}
}

result = hour + spit + min + spit + second;

return result;
}
</script>
</body>

</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
計時器

用Golang運行JavaScript的實現(xiàn)示例
這篇文章主要介紹了用Golang運行JavaScript的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
有趣的JavaScript隱式類型轉換操作實例分析
這篇文章主要介紹了JavaScript隱式類型轉換操作,結合實例形式分析了JavaScript隱式類型轉換操作相關實現(xiàn)技巧與注意事項,需要的朋友可以參考下
2020-05-05
js如何判斷訪問是來自搜索引擎(蜘蛛人)還是直接訪問
這篇文章主要介紹了js如何判斷訪問是來自搜索引擎(蜘蛛人)還是直接訪問,需要的朋友可以參考下
2015-09-09
詳解JS對象遍歷的順序問題
你知不知道JS對象遍歷順序，本文就來詳細的介紹了一下JS對象遍歷順序問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
Bootstrap 按鈕樣式與使用代碼詳解
這篇文章主要介紹了Bootstrap -- 按鈕樣式與使用，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-12-12
通過url查找a元素應用案例
這篇文章主要介紹了通過url查找a元素的實現(xiàn)思路，解決一些比較實際的問題，感興趣的朋友可以參考下
2014-04-04
JavaScript中執(zhí)行上下文和執(zhí)行棧
這篇文章主要介紹了JavaScript中執(zhí)行上下文和執(zhí)行棧，執(zhí)行上下文是評估和執(zhí)行JavaScript代碼的環(huán)境的抽象概念，更多相關介紹，感興趣的朋友可以參考一下
2022-09-09
淺談如何使用webpack構建多頁面應用
這篇文章主要介紹了淺談如何使用webpack構建多頁面應用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
js實現(xiàn)可拖動DIV的方法
這篇文章主要介紹了js實現(xiàn)可拖動DIV的方法，有需要的朋友可以參考一下
2013-12-12
LBS blog sql注射漏洞[All version]-官方已有補丁
LBS blog sql注射漏洞[All version]-官方已有補丁...
2007-08-08