如何根据exac时间重新加载内容而不刷新页面

时间:2016-08-31 10:22:20

标签: javascript jquery ajax

我正在准备简单的数字标牌脚本,需要时间安排。 我能够用javascript每隔15分钟刷新一次。 但我的问题是,如何在不刷新页面的情况下测量时间并在确切时间内更改内容?

我的页面如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="900" >
<title>Signage</title>
<style>
body {
   margin: 0;
   padding: 0;
}
</style>
<script>
function src() { 
    var Day = "day.html";
    var Lunch = "lunch.html";
    var Evening = "evening.html";
    var Src;

    var hour = new Date().getHours();
    var day = new Date().getDay();

    if (hour >= 10 && hour <= 13 && day >= 1 && day <=5) {
        Src = Lunch;    
    }       

    else if (hour >= 7 && hour <= 19)   {
        Src = Day;
            }

    else  {
        Src = Evening;
            }

document.getElementById('signage').src = Src; 

}

</script>

</head>
<body onLoad="src();">
<iframe scrolling="no" id="signage" src="about:blank" width="1920" height="1080" frameborder="0"></iframe>

</body>
</html>

2 个答案:

答案 0 :(得分:2)

如果您希望页面在特定时间段后自动刷新,则可以使用javascript的setInterval()功能。

setInterval(function() { window.location.reload(); } , timePeriod );

答案 1 :(得分:0)

尝试在头部添加此代码

<script> document.addEventListener("DOMContentLoaded", setTimeout(function() {src();}, 5000 /*5 sec*/)); </script>