第二次刷新时的JavaScript输出_Javascript_Html

第二次刷新时的JavaScript输出

javascript html

第二次刷新时的JavaScript输出,javascript,html,Javascript,Html,我试图在java脚本中运行一个动态计时器，每当我运行它时，它都不会给我任何东西，但在第二次刷新时，它会给输出以第一次加载时已经启动的时间运行。我在考虑本地存储，因为我想为多个选项卡共享计时器。任何解决办法都可以帮助我 p{ 文本对齐：居中；字体大小：60px；边际上限：0px； } var countDownDate=localStorage.getItem（“时间”）；如果（！倒计时日期）{ var today=新日期（）； var fewhours=today.setMinutes

我试图在java脚本中运行一个动态计时器，每当我运行它时，它都不会给我任何东西，但在第二次刷新时，它会给输出以第一次加载时已经启动的时间运行。我在考虑本地存储，因为我想为多个选项卡共享计时器。任何解决办法都可以帮助我


p{
文本对齐：居中；
字体大小：60px；
边际上限：0px；
}

var countDownDate=localStorage.getItem（“时间”）；
如果（！倒计时日期）{
var today=新日期（）；
var fewhours=today.setMinutes（today.getMinutes（）+1）；
setItem（“时间”，fewhours）；
}
否则{
//每1秒更新一次倒计时
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//在id=“demo”的元素中输出结果
document.getElementById（“demo”）.innerHTML=days+d+hours+h
+分钟+米+秒+秒；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
document.getElementById（“demo”）.innerHTML=“过期”；
}
}, 1000);
}
<代码> > P> >，让我们看看这里的JS代码：
首先，它尝试从本地存储中获取时间
if(!countDownDate){
  var today = new Date();
  var fewhours=today.setMinutes(today.getMinutes() + 1);
  localStorage.setItem("time", fewhours);
}

然后，如果未找到time
，或者等于false
，它将在本地存储器中设置它。到目前为止，一切都很好
else{...}

好的。所以，这里是事情变得棘手的地方
if
/else
块通常具有以下功能：
他们检查if
后面括号内的语句
如果该语句为true
，则将执行代码块（大括号内的代码{}
）
如果该语句为false
，它将继续，忽略它后面可能出现的任何其他else
块
如果在If
块的右下方有一个else
，它将继续评估该零件。在任何不同的情况下，它将继续正常执行代码
那么在这种情况下会发生什么呢？如果与If
部分代码对应的代码块运行，这意味着这是我们第一次运行它，因为本地存储中没有time
，JavaScript将忽略以下else{…}
块中的代码
但是我们想让它在页面第一次加载时运行，不是吗
如果是这样的话，我们应该考虑在代码< > < /COD>块外移动实际倒计时的代码。这样，我们的代码将首先检查
time
是否确实存在于本地存储中，如果不存在，它将初始化它。然后，它可以继续在屏幕上实际显示剩余时间
那么，我们如何解决这个问题呢？简单
我们唯一要做的就是删除else{
行，以及相应的右大括号：
var countDownDate = localStorage.getItem("time");

if (!countDownDate) {
    var today = new Date();
    var fewhours = today.setMinutes(today.getMinutes() + 1);
    localStorage.setItem("time", fewhours);
}

// Update the count down every 1 second
var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
        minutes + "m " + seconds + "s ";

    // If the count down is over, write some text 
    if (distance < 0) {
        // clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);

通过这种方式，我们可以立即获得正确的值，并继续执行代码的其余部分
以下是代码的最终版本，包括上述所有更改：
<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            text-align: center;
            font-size: 60px;
            margin-top: 0px;
        }
    </style>
</head>

<body>
    <p id="demo"></p>
    <script>
        var countDownDate = localStorage.getItem("time");

        if (!countDownDate) {
            var today = new Date();
            var fewhours = today.setMinutes(today.getMinutes() + 1);
            localStorage.setItem("time", fewhours);
            // Get time one more time
            countDownDate = localStorage.getItem("time");
        }

        // Update the count down every 1 second
        var x = setInterval(function() {

            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Output the result in an element with id="demo"
            document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
                minutes + "m " + seconds + "s ";

            // If the count down is over, write some text 
            if (distance < 0) {
                // clearInterval(x);
                document.getElementById("demo").innerHTML = "EXPIRED";
            }
        }, 1000);
    </script>

</body>

</html>


p{
文本对齐：居中；
字体大小：60px；
边际上限：0px；
}

var countDownDate=localStorage.getItem（“时间”）；
如果（！倒计时日期）{
var today=新日期（）；
var fewhours=today.setMinutes（today.getMinutes（）+1）；
setItem（“时间”，fewhours）；
//再来一次
countDownDate=localStorage.getItem（“时间”）；
}
//每1秒更新一次倒计时
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//在id=“demo”的元素中输出结果
document.getElementById（“demo”）.innerHTML=days+d+hours+h+
分钟+米+秒+秒；
//如果倒计时结束，写一些文字
如果（距离<0）{
//净间隔（x）；
document.getElementById（“demo”）.innerHTML=“过期”；
}
}, 1000);
第一次运行-您在Localstorage中没有记录，因此如果记录为true，则其他记录无效。更改脚本的逻辑，我不确定您想要什么？脚本与您编写的代码一样工作。谢谢，非常感谢您的精彩解释。理解，为我工作…很高兴听到它帮助您：）您介意接受答案吗？
<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            text-align: center;
            font-size: 60px;
            margin-top: 0px;
        }
    </style>
</head>

<body>
    <p id="demo"></p>
    <script>
        var countDownDate = localStorage.getItem("time");

        if (!countDownDate) {
            var today = new Date();
            var fewhours = today.setMinutes(today.getMinutes() + 1);
            localStorage.setItem("time", fewhours);
            // Get time one more time
            countDownDate = localStorage.getItem("time");
        }

        // Update the count down every 1 second
        var x = setInterval(function() {

            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Output the result in an element with id="demo"
            document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
                minutes + "m " + seconds + "s ";

            // If the count down is over, write some text 
            if (distance < 0) {
                // clearInterval(x);
                document.getElementById("demo").innerHTML = "EXPIRED";
            }
        }, 1000);
    </script>

</body>

</html>