倒计时计时器未在javascript中显示

Countdown Timer is not showing in javascript

本文关键字：显示 javascript 计时器 倒计时      更新时间：2023-09-26

我是javascript新手，我想用localStorage创建一个从给定时间开始到00:00:00的倒计时计时器，但它不起作用，当我运行我的代码时，它显示值"1506"。

这是我的代码

<script type="text/javascript">
            if (localStorage.getItem("counter")) {
                var CurrentTime = localStorage.getItem("counter");
            }
            else {
                var Hour = 3;
                var Minute = 25;
                var Second = 60;
                var CurrentTime = Hour.toString() + ":" + Minute.toString() + ":" + Second.toString();
            }

            function CountDown() {                                
                document.getElementById('lblDuration').innerHTML = CurrentTime;
                Second--;
                if (Second == -1) {
                    Second = 59;
                    Minute--;
                }
                if (Minute == -1) {
                    Minute = 59;
                    Hour--;
                }
                localStorage.setItem("counter", CurrentTime);
            }
            var interval = setInterval(function () { CountDown(); }, 1000);
    </script>
  1. 您需要在if else块外声明变量Hour, Minute, Second, CurrentTime。在这种情况下，它们不在function CountDown()范围内
  2. 您没有在localStorage.setItem("counter", CurrentTime);之后设置CurrentTime = Hour.toString() + ":" + Minute.toString() + ":" + Second.toString();

var Hour = 3;
var Minute = 25;
var Second = 60;
var CurrentTime = Hour.toString() + ":" + Minute.toString() + ":" + Second.toString();
function CountDown() {
    document.getElementById('lblDuration').innerHTML = CurrentTime;
    Second--;
    if (Second == -1) {
        Second = 59;
        Minute--;
    }
    if (Minute == -1) {
        Minute = 59;
        Hour--;
    }
    CurrentTime = Hour.toString() + ":" + Minute.toString() + ":" + Second.toString();
}
setInterval(function () {
    CountDown();
}, 1000);
<div id="lblDuration"></div>

当localStorage可用时，您不设置Hour、Minute和Second的值。因此，当执行倒计时函数时，它发现Second是未定义的，语句Second--将Second转换为NaN。要修复它，只需初始化小时、分钟和秒变量。我重构了你的代码，希望它能有所帮助：

function CountDown() { 
    var currentTime =  getCurrentTime();                           
    printCurrentTime(currentTime)
    currentTime.second--;
    if (currentTime.second == -1) {
        currentTime.second = 59;
        currentTime.minute--;
    }
    if (currentTime.minute == -1) {
        currentTime.minute = 59;
        currentTime.hour--;
    }
    setCurrentTime(currentTime);
}
  function setCurrentTime(newCurrentTime){
    if(localStorage) localStorage.setItem("counter", JSON.stringify(newCurrentTime));
    else setCurrentTime.storage = newCurrentTime;
  }
  function getCurrentTime(){
    var result = localStorage ? localStorage.getItem("counter") : setCurrentTime.storage;
    result = result || {hour:3, minute:25, second:60};
    if (typeof(result) === "string")result = JSON.parse(result);
    result.toString = function(){
        return result.hour +  ":" + result.minute + ":" + result.second;
    }
    return result;
  }
  function printCurrentTime(currentime){
        var domTag = document.getElementById('lblDuration');
        if(domTag) domTag.innerHTML = currentime.toString();
        else console.log(currentime);
  }
setInterval(function () { CountDown(); }, 1000);
相关文章：