为什么我的加载处理程序不起作用

Why does my onload handler not work?

本文关键字：程序 不起作用 处理 加载 我的 为什么      更新时间：2023-09-26

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

<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>

在线

window.onload = tempo1();

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

你不想要那些()，你只需要：

window.onload = tempo1;

。它分配函数引用，因此当load事件发生时将调用它。

同样，

正如格雷厄姆指出的那样，你以后也会做同样的事情：

setInterval(tempo2(), 500);

应该是

setInterval(tempo2, 500);

还有第二个错误，在这一行：

document.getElementById('timespent').innerHTML = "Total--> '+day+'days, '+hour+':'+min+':'+sec";

在那里，你用双引号("(引用字符串，但是当你试图用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事件。如果你把你的脚本放在页面的底部(或"timespent"div  下面的任何地方——甚至紧靠它的下方(，你可以直接调用tempo1。window对象的load事件发生在页面加载周期的后期，即加载所有外部资源(包括所有图像(之后。如果这是你想要的，很好，但如果不是，你还有其他选择。

引用：

  • 谷歌工程师关于何时可以访问 DOM 元素
  • YUI 最佳实践，以加速您的网站

除了上面的答案，你也在直接执行你的第二个函数，而不是把它传递给setInterval。做

setInterval(tempo2, 500);

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

相关文章：