Question

我制作了一个Javascript代码，首先评估本地机器的当前时间，并根据指定的时间块显示文本/消息。例如，消息将在时间块00小时-04小时之间为“通知-1”。因此，在24小时内有6个时间块（例如，00小时至04小时，04小时至08小时...... 20小时至00小时）。

如果新浏览器已打开，我的代码运行良好，但在刷新浏览器之前，它不会自动更改文本。

我的问题是：我需要根据指定的时间段自动轮换文本/消息而不刷新页面。

我知道PHP但是Javascript中的noob并且不知道如何使用setTimeOut。其次，如果它是无限循环或递归，它会过度消耗机器资源吗？

我的工作代码是：

    <p id="try"></p>

    <script>
    var d = new Date();
    var curr_hour = d.getHours();
    var curr_minute = d.getMinutes();
    var curr_time = curr_hour + curr_minute/60;


    if (curr_time >= 0 && curr_time < 4) {
       document.getElementById("try").innerHTML = "Notification-1";

    } else if (curr_time >= 4 && curr_time < 8) {
       document.getElementById("try").innerHTML = "Notification-2";

    } else if (curr_time >= 8 && curr_time < 12) {
       document.getElementById("try").innerHTML = "Notification-3";

    } else if (curr_time >= 12 && curr_time < 16) {
       document.getElementById("try").innerHTML = "Notification-4";

    } else if (curr_time >= 16 && curr_time < 20 ) {
       document.getElementById("try").innerHTML = "Notification-5";

    } else if (curr_time >= 20 && curr_time < 23.98 ) {
       document.getElementById("try").innerHTML = "Notification-6";

    } 

</script>

我得到了下面的代码，表示每秒都会替换SetInterval的功能，但不足以应用：

// A basic setTimeout loop, mimicking setInterval
var doStuff = function () {
  // Do stuff
   setTimeout(doStuff, 1000);
};
setTimeout(doStuff, 1000);

Answer 1

我会改用setInterval。对于这样一个简单的脚本，您将不会遇到任何资源使用问题。

<p id="try"></p>

<script>
function showNotification() {
    var d = new Date();
    var curr_hour = d.getHours();
    var curr_minute = d.getMinutes();
    var curr_time = curr_hour + curr_minute/60;


    if (curr_time >= 0 && curr_time < 4) {
       document.getElementById("try").innerHTML = "Notification-1";

    } else if (curr_time >= 4 && curr_time < 8) {
       document.getElementById("try").innerHTML = "Notification-2";

    } else if (curr_time >= 8 && curr_time < 12) {
       document.getElementById("try").innerHTML = "Notification-3";

    } else if (curr_time >= 12 && curr_time < 16) {
       document.getElementById("try").innerHTML = "Notification-4";

    } else if (curr_time >= 16 && curr_time < 20 ) {
       document.getElementById("try").innerHTML = "Notification-5";

    } else if (curr_time >= 20 && curr_time < 23.98 ) {
       document.getElementById("try").innerHTML = "Notification-6";

    } 
}

setInterval(showNotification, 1000);

</script>

如果您不想在第一条消息之前等待1秒，只需添加showNotification（）;在setInterval之后

Answer 2

我认为应该这样做，你只需将代码包装在一个函数中，这样你就可以在每个时间段内调用它：

 <p id="try"></p>

    <script>
 function setTextNotification() {
    var d = new Date();
    var curr_hour = d.getHours();
    var curr_minute = d.getMinutes();
    var curr_time = curr_hour + curr_minute/60;

    if (curr_time >= 0 && curr_time < 4) {
       document.getElementById("try").innerHTML = "Notification-1";

    } else if (curr_time >= 4 && curr_time < 8) {
       document.getElementById("try").innerHTML = "Notification-2";

    } else if (curr_time >= 8 && curr_time < 12) {
       document.getElementById("try").innerHTML = "Notification-3";

    } else if (curr_time >= 12 && curr_time < 16) {
       document.getElementById("try").innerHTML = "Notification-4";

    } else if (curr_time >= 16 && curr_time < 20 ) {
       document.getElementById("try").innerHTML = "Notification-5";

    } else if (curr_time >= 20 && curr_time < 23.98 ) {
       document.getElementById("try").innerHTML = "Notification-6";

    } 
}
var doStuff = function () {
  setTextNotification();
   setTimeout(doStuff, 1000);
};
setTimeout(doStuff, 1000);  

</script>

如何使用setTimeOut在Javascript中更改指定时间块中的文本？

2 个答案: