这就是我正在尝试的:
<!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>
标记完成加载的情况下运行脚本?
答案 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>