window.onload 无法加载多个函数
[英]Multiple functions won't load with window.onload
问题描述
我知道这个问题已经被问过很多次了，并且有很多解决方案，但由于某种原因我无法让它正常工作。 人们说要使用<body onload=""> ，但我所做的不允许这样做。 我所拥有的是由 JavaScript 提供支持的 4 个区域，用于显示某些内容：
<div id="social-media"></div>
<div id="clock"></div>
<div id="date"></div>
<div id="copyright"></div>
我希望在页面加载时加载所有这些。 我发现每个人都说要把你所有的functions放在 1 个 main function如下所示：
window.onload = function () {
function TimeUpdate () {code-here};
function CopyrightYear () {code-here};
function DateUpdate () {code-here};
function SocialMedia () {code-here};
}
但它不会工作。 如果它完全独立，每个都会加载，但当组合在一起时不会加载，所以我认为我不需要对functions进行那么多修改。 我尝试向主函数添加一个名称： window.onload = function Text () {code-here} ，但没有奏效。 我什至尝试重新排列functions的顺序，但这也没有任何作用。 我需要一些帮助来解决这个问题，以及可能的修复的详细解释。 谢谢。
这是完整的代码：
window.onload = function () {
// Clock
function TimeUpdate () {
var now = new Date (), hours = now.getHours (), minutes = now.getMinutes (), seconds = now.getSeconds ();
if (hours >= 12 && hours < 24) {var TimeOfDay = "PM";}
else {var TimeOfDay = "AM";}
if (hours > 12) {hours = hours - 12;}
if (seconds < 10) {seconds = "0" + seconds;}
if (minutes < 10) {minutes = "0" + minutes;}
if (hours < 10) {hours = "0" + hours;}
var CurrentTime = hours + ':' + minutes + ':' + seconds + " " + TimeOfDay;
var MyClock = document.getElementById ('clock');
MyClock.innerHTML = CurrentTime;
};
setInterval (function () {TimeUpdate ();}, 1000);
// Copyright
function CopyrightYear () {
document.getElementById ("copyright").innerHTML = 'Copyright © 20xx–20xx. All rights reserved.';
};
// Date
function DateUpdate () {
var date = new Date (), month = date.getMonth () +1, day = date.getDate (), year = date.getFullYear ();
month = (month < 10 ? "0" : "") + month;
day = (day < 10 ? "0" : "") + day;
month = (month > 12) ? month - 12 : month;
month = (month == 0) ? 12 : month;
var TimeDisplay = month + "/" + day + "/" + year;
document.getElementById ("date").innerHTML = TimeDisplay;
};
// Social Media
function SocialMedia () {
document.getElementById ("social-media").innerHTML = '<ul><li id="facebook"><a href="---"><br></a></li><li id="google-plus"><a href="---"><br></a></li><li id="linkedin"><a href="---"><br></a></li></ul>'
};
}
3 个解决方案
解决方案1
1 2015-11-24 20:15:17
您永远不会执行这些功能。
JavaScript 函数在被解释器命中时不会自动执行，您必须在定义后调用它们才能发生某些事情。
例如：
var num = 0; function count() { num += 1; document.write(num); document.write('<br/>'); // New line. } count(); count(); count();
因此，在您的情况下，如果您希望这些函数运行，则需要在onload函数的末尾调用它们，如下所示：
CopyrightYear();
DateUpdate();
SocialMedia();
解决方案2
0 2015-11-24 20:14:19
从 onload 事件处理程序中删除所有这些函数，然后从那里调用它们，一切都应该正常工作。
// Clock function TimeUpdate() { var now = new Date(), hours = now.getHours(), minutes = now.getMinutes(), seconds = now.getSeconds(); if (hours >= 12 && hours < 24) { var TimeOfDay = "PM"; } else { var TimeOfDay = "AM"; } if (hours > 12) { hours = hours - 12; } if (seconds < 10) { seconds = "0" + seconds; } if (minutes < 10) { minutes = "0" + minutes; } if (hours < 10) { hours = "0" + hours; } var CurrentTime = hours + ':' + minutes + ':' + seconds + " " + TimeOfDay, var MyClock = document.getElementById('clock'); MyClock.innerHTML = CurrentTime; }; // Copyright function CopyrightYear() { document.getElementById("copyright").innerHTML = 'Copyright © 20xx–20xx. All rights reserved.'; }; // Date function DateUpdate() { var date = new Date(), month = date.getMonth() + 1, day = date.getDate(), year = date.getFullYear(); month = (month < 10 ? "0" : "") + month; day = (day < 10 ? "0" : "") + day; month = (month > 12) ? month - 12 : month; month = (month == 0) ? 12 : month; var TimeDisplay = month + "/" + day + "/" + year; document.getElementById("date").innerHTML = TimeDisplay; }; // Social Media function SocialMedia() { document.getElementById("social-media").innerHTML = '<ul><li id="facebook"><a href="---"><br></a></li><li id="google-plus"><a href="---"><br></a></li><li id="linkedin"><a href="---"><br></a></li></ul>' }; window.onload = function() { DateUpdate(); setInterval(function() { TimeUpdate(); }, 1000); CopyrightYear(); SocialMedia(); }解决方案3
0 2015-11-24 20:20:19
我想你几乎拥有它，你只是错过了对函数的调用......
window.onload = function () {
// Clock
function TimeUpdate () {
var now = new Date (), hours = now.getHours (), minutes = now.getMinutes (), seconds = now.getSeconds (),TimeOfDay = "AM";
if (hours >= 12 && hours < 24) {TimeOfDay = "PM";}
else {TimeOfDay = "AM";}
if (hours > 12) {hours = hours - 12;}
if (seconds < 10) {seconds = "0" + seconds;}
if (minutes < 10) {minutes = "0" + minutes;}
if (hours < 10) {hours = "0" + hours;}
var CurrentTime = hours + ':' + minutes + ':' + seconds + " " + TimeOfDay;
var MyClock = document.getElementById ('clock');
MyClock.innerHTML = CurrentTime;
//Call CopyRight Function...
CopyrightYear();
//Call DateUpdate Function...
DateUpdate();
//Call SocialMedia Function...
SocialMedia();
};
setInterval (function () {TimeUpdate ();}, 1000);
// Copyright
function CopyrightYear () {
document.getElementById ("copyright").innerHTML = 'Copyright © 20xx–20xx. All rights reserved.';
};
// Date
function DateUpdate () {
var date = new Date (), month = date.getMonth () +1, day = date.getDate (), year = date.getFullYear ();
month = (month < 10 ? "0" : "") + month;
day = (day < 10 ? "0" : "") + day;
month = (month > 12) ? month - 12 : month;
month = (month == 0) ? 12 : month;
var TimeDisplay = month + "/" + day + "/" + year;
document.getElementById ("date").innerHTML = TimeDisplay;
};
// Social Media
function SocialMedia () {
document.getElementById ("social-media").innerHTML = '<ul><li id="facebook"><a href="---"><br></a></li><li id="google-plus"><a href="---"><br></a></li><li id="linkedin"><a href="---"><br></a></li></ul>'
};
}
为什么我的 JavaScript 无法加载到我的网页上（使用 window.onload）？
[英]Why won't my JavaScript load on my webpage (using window.onload)?
window.onload Javascript，带有接收参数的函数？
[英]window.onload Javascript, with functions that receives parameter?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.