js+html5實現(xiàn)頁面可刷新的倒計時效果
更新時間：2017年07月15日 15:12:37 作者：ouqi_qiou
這篇文章主要為大家詳細介紹了js+html5實現(xiàn)頁面可刷新的倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
寫了一個5分鐘倒計時的代碼，有的時候代碼需要刷新，然后倒計時又從4：59開始了，我想到的一個解決辦法，就是使用緩存，將開始倒計時的時間加上要倒計時的5分鐘設為緩存，然后直接用這個緩存時間減去當前時間，就可以一直倒計時了，不管你在倒計時過程中操作了什么，時間總在變吧，哈哈，原理就是這樣嘀。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>簡單易用的倒計時js代碼</title>
</head>
<body>
<div id="time"></div>
<script src="js/jquery-git.js"></script>
<script>
localStorage.setItem('start', new Date().getTime());
countDown(localStorage.getItem('start'));
function countDown(startTime) {
var time = setInterval(function() {
var currentTime = new Date();
var second = 59 - parseInt(((currentTime.getTime() - startTime) / 1000) % 60);
var min = 4 - parseInt((currentTime.getTime() - startTime) / 60000);
if(min < 10) {
min = "0" + min;
}
if(second < 10) {
second = "0" + second;
}
var countDown = min + ":" + second;
$('#time').html(countDown);
if(second == 0 && min == 0) {
clearInterval(time);
}
}, 1000)
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在 uni-app 中使用自定義插槽（slots）可以讓開發(fā)者在封裝的組件內(nèi)部定義可替換內(nèi)容區(qū)域，從而實現(xiàn)高度定制化的組件復用，以下是如何在 uni-app 中使用自定義插槽的基本步驟,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)背景音樂播放和暫停，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
下面小編就為大家?guī)硪黄獪\談JS繼承_借用構造函數(shù) & 組合式繼承。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
下面小編就為大家?guī)硪黄赾anvas粒子系統(tǒng)的構建詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
js判斷undefined類型,undefined,null, 的區(qū)別詳細解析
本篇文章主要是對js判斷undefined類型,undefined,null,NaN的區(qū)別進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
拖拉縮放效果，實現(xiàn)通過鼠標拖動來調(diào)整層的面積（寬高）大小。例如選框效果。2008-12-12
這篇文章主要介紹了JavaScript?賦值,淺復制和深復制的區(qū)別，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要為大家詳細 介紹了JS實現(xiàn)帶動畫的回到頂部效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
今天上午抽空隨手寫了個星級評分的效果，給大家分享下。由于水平有限，如有問題請指出;首先要準備一張星星的圖片，灰色是默認狀態(tài)，黃色是選擇狀態(tài)，需要的朋友可以參考下2012-12-12
javascript判斷機器是否聯(lián)網(wǎng)的2種方法
只有機器已經(jīng)聯(lián)網(wǎng)以后，web應用才能啟動，下面使用javascript判斷機器是否聯(lián)網(wǎng)，具體判斷代碼如下，有此需求的朋友可以參考下2013-08-08