Javascript获取文件内容循环

时间:2016-04-03 21:34:11

标签: javascript php jquery html

我一直试图让函数每秒重新加载一次。

我可以使用php获取文件内容(以及元页面重新加载),但我也使用JS来显示时间,而不是在加载时立即显示闪烁效果。

我用JS尝试了这个,但它没有显示任何内容。

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vivarium Enviroment Control Centre</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    function updateTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        if (minutes < 10){
            minutes = "0" + minutes;
        }
        if (seconds < 10){
            seconds = "0" + seconds;
        }
        var v = hours + ":" + minutes + ":" + seconds + " ";
        if(hours > 11){
            v+="PM";
        } else {
            v+="AM"
        }
        setTimeout("updateTime()",1000);
        document.getElementById('time').innerHTML=v;
    }
updateTime();

$("document").ready(function(){
    setInterval(function(){
        $("#wifi").load('wifiout.php');
    },1000);
});


function changeStatus() {
    var image = document.getElementById('lightStatus');
    if (image.src.match("lightoff")) {
        image.src = "lighton.png";
    } else {
        image.src = "lightoff.png";
    }
}
</script>
</head>
<body>
<div id="topbar">
    <span id="time"></span>
    <div id="wifi"></div>
    <img id="lightStatus" class="right" onclick="changeStatus()" src="lightoff.png" width="32" height="32">
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

<强> Working fiddle

您缺少jQuery插件声明,请在脚本标记之前添加以下行:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

注意:在就绪功能中调用updateTime()函数,否则会出现以下错误:

  

TypeError:无法设置属性&lt; innerHTML&#39;为null

因为您尚未在页面未完全加载时尝试使用范围time

希望这会有所帮助。