Question

此函数应将页面上花费的时间写入div。它的工作正常，有一个window.onbeforeunload警告..那么为什么这不正常呢？

<script>
function tempo1() {
    var d1 = new Date();
    var t_day = d1.getDate();
    var t_hour = d1.getHours();
    var t_min = d1.getMinutes();
    var t_sec = d1.getSeconds();
    alert("Started at--> " + t_day + "days, " + t_hour + ":" + t_min + ":" + t_sec);

    function tempo2() {
        var d2 = new Date();
        var t_day2 = d2.getDate();
        var t_hour2 = d2.getHours();
        var t_min2 = d2.getMinutes();
        var t_sec2 = d2.getSeconds();
        var day = t_day2 - t_day;
        var hour = t_hour2 - t_hour;
        var min = t_min2 - t_min;
        var sec = t_sec2 - t_sec;
        document.getElementById('timespent').innerHTML = "Total--> '+day+'days, '+hour+':'+min+':'+sec";
    }
    setInterval(tempo2(), 500);
}
window.onload = tempo1();
</script>

<div id="timespent">??days, ??:??:??</div>

作为一个有着良好工作算法的工作小说：

<script>
startTime = new Date();
clockStart = startTime.getTime();
function initStopwatch() {
var NewTime = new Date();
return((NewTime.getTime() - clockStart)/1000);
}
function getSecs() {
var tSecs = Math.round(initStopwatch());
var iSecs = tSecs % 60;
var iMins = Math.round((tSecs-30)/60);
var sSecs ="" + ((iSecs > 9) ? iSecs : "0" + iSecs);
var sMins ="" + ((iMins > 9) ? iMins : "0" + iMins);
document.getElementById('timespent').innerHTML =  sMins+":"+sSecs;
window.setTimeout(getSecs,1000);
}
window.onload=getSecs;
</script>

<div id=timespent></div>

Answer 1

在线

window.onload = tempo1();

...您调用 tempo1函数并将其返回值分配给load上的window事件。 与<{1}}完全相同，其中x = foo();被调用，返回值存储在foo中。

你不想要那些x，你只需要：

()

...指定函数引用，因此在window.onload = tempo1;事件发生时将调用它。

同样地，作为Graham points out，你之后会做同样的事情：

load

应该是

setInterval(tempo2(), 500);

此行还有第二个错误：

setInterval(tempo2, 500);

在那里，您使用双引号（document.getElementById('timespent').innerHTML = "Total--> '+day+'days, '+hour+':'+min+':'+sec";）引用字符串，但在尝试替换"时，您使用的是单引号，{{ 1}}，days和hour个变量。您需要确定用于开始和结束字符串的引用。要么是好的，但你必须选择一个，所以要么都是双打：

min

或所有单打：

sec

请注意，您无需等待document.getElementById('timespent').innerHTML = "Total--> "+day+"days, "+hour+":"+min+":"+sec";事件。如果您将脚本放在页面底部（或下面的任何地方 document.getElementById('timespent').innerHTML = 'Total--> '+day+'days, '+hour+':'+min+':'+sec'; - 即使在其下方），您也可以直接拨打load。在加载所有外部资源（包括所有图像）之后，div对象的tempo1事件在页面加载周期的后期发生非常。如果这就是你想要的，那很好，但如果没有，你还有另一种选择。

参考文献：

Google engineers on when you can access DOM elements

YUI Best Practices to Speed Up Your Website

Answer 2

除上述答案外，您还直接执行第二个功能，而不是将其传递给setInterval。做

setInterval(tempo2, 500);

相反，这将每0.5秒执行一次。

为什么我的onload处理程序不起作用？

2 个答案: