javascript - 如何通过点击时钟示例来更新输出值

标签 javascript

当我点击第二个、第三个...时间时,时间不会更新

我编写了一个非常简单的 js 代码,单击按钮后,它会使用“警报”反射(reflect)当前时间。但当您第二次单击时,数字仍与第一次尝试时相同。

<html><head><meta charset="utf-8"><title>What's time is it?</title></head>
    <body>
        <p>Here is the time you wanted to know:</p>
        <script src="/Users/nikita/Desktop/Web/Practice/Static time upon request/script.js"></script>
        <button onclick="btnClick ()">Click me!</button>
    </body>
</html>
var today= new Date();
var day=today.getDay ();
var daylist=["Monday", "Tuesday", "Wednessday", "Thursday", "Friday", "Saturday", "Sunday"];
console.log("Today is: " + daylist[day]);
var hours = today.getHours();
var ampm = (hours>12)? "PM" : "AM";
var hoursAtTheScreen = (hours>12)? hours-12 : hours;
var minutes = today.getMinutes ();
var seconds = today.getSeconds ();
function btnClick () {
    innerHTML=window.alert("Now is " + hoursAtTheScreen + ampm + " " + minutes + "min" + " " + seconds + "sec");
}

我希望每次点击后值都会更新。我尝试使用 .innerHTMl 但没有成功。当然,我遗漏了一个非常简单的点。您能给我解释一下吗?具体是什么?

提前谢谢您!

最佳答案

这是因为你的时间值仅在 JS 首次加载时计算一次。为了保持更新,您必须在函数内生成它们。

var daylist=["Monday", "Tuesday", "Wednessday", "Thursday", "Friday", "Saturday", "Sunday"];

function btnClick () {
    var today= new Date();
    var day=today.getDay ();
    console.log("Today is: " + daylist[day]);
    var hours = today.getHours();
    var ampm = (hours>12)? "PM" : "AM";
    var hoursAtTheScreen = (hours>12)? hours-12 : hours;
    var minutes = today.getMinutes ();
    var seconds = today.getSeconds ();

    innerHTML=window.alert("Now is " + hoursAtTheScreen + ampm + " " + minutes + "min" + " " + seconds + "sec");
}

关于javascript - 如何通过点击时钟示例来更新输出值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57739581/

相关文章:

javascript - 隐藏元素的 Document.onChange

javascript - Angular Slick 旋转木马幻灯片堆叠在页面中

javascript - 从一个函数传递一个值以供另一个函数使用

javascript - 如何使用 C++ 中的 V8 同时运行一堆 JS 代码?

java - 获取大型表单到 Spring Controller

javascript - Google CryptoJS AES 结果太长 1 个区 block

javascript - 如何在没有 Xcode 的情况下手动安装 Phonegap 库?

javascript - jQuery 性能 - 按数据属性或类选择?

javascript - 将过渡添加到 Javascript 显示/隐藏 Div?

javascript - Safari 在自动填写信用卡信息时崩溃