在相机的实时馈送上方显示时钟

时间:2014-02-25 06:37:53

标签: javascript html5

这就是我正在尝试的:

<!DOCTYPE html>
<!-- cam.html -->
<html>
<head>
    <meta charset="UTF-8" />
    <title> IP Camera </title>
</head>

<body>
    <h1> 
        Live Feed
    </h1>

    <script type="text/javascript">

        function GetClock(){
            d = new Date();
            nday   = d.getDay();
            nmonth = d.getMonth();
            ndate  = d.getDate();
            nyear = d.getYear();
            nhour  = d.getHours();
            nmin   = d.getMinutes();
            nsec   = d.getSeconds();

            if(nyear<1000) nyear=nyear+1900;

            if(nhour ==  0) {ap = " AM";nhour = 12;} 
            else if(nhour <= 11) {ap = " AM";} 
            else if(nhour == 12) {ap = " PM";} 
            else if(nhour >= 13) {ap = " PM";nhour -= 12;}

            if(nmin <= 9) {nmin = "0" +nmin;}
            if(nsec <= 9) {nsec = "0" +nsec;}

            document.getElementById('clockbox').innerHTML=""+(nmonth+1)+"/"+ndate+"/"+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
            setTimeout("GetClock()", 1000);
        }
        window.onload = GetClock;
    </script>

    <div id="clockbox"></div>

    <img src='http://192.168.0.4/video/mjpg.cgi' />

</body>
</html>

在我意识到window.onload意味着页面必须首先加载之后,我无法弄清楚为什么它不起作用,当然,考虑到它的jpeg流,页面永远不会完成加载。

如何在不等待<img>标记完成加载的情况下运行脚本?

1 个答案:

答案 0 :(得分:1)

将脚本块移动到页面底部并调用GetClock();

<!DOCTYPE html>
<!-- cam.html -->

<html>
<head>
    <meta charset="UTF-8" />
    <title> IP Camera </title>
</head>

<body>
<h1> 
Live Feed
</h1>


<div id="clockbox"></div>

<img src='http://192.168.0.4/video/mjpg.cgi' />
<script type="text/javascript">

function GetClock(){
d = new Date();
nday   = d.getDay();
nmonth = d.getMonth();
ndate  = d.getDate();
nyear = d.getYear();
nhour  = d.getHours();
nmin   = d.getMinutes();
nsec   = d.getSeconds();

if(nyear<1000) nyear=nyear+1900;

     if(nhour ==  0) {ap = " AM";nhour = 12;} 
else if(nhour <= 11) {ap = " AM";} 
else if(nhour == 12) {ap = " PM";} 
else if(nhour >= 13) {ap = " PM";nhour -= 12;}

if(nmin <= 9) {nmin = "0" +nmin;}
if(nsec <= 9) {nsec = "0" +nsec;}

document.getElementById('clockbox').innerHTML=""+(nmonth+1)+"/"+ndate+"/"+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
setTimeout("GetClock()", 1000);
}
GetClock();
</script>

</body>
</html>