Question

我知道这个问题在很多时候都被问过，并且有很多解决方案，但由于某些原因我无法正常工作。人们曾说过使用<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 + "&nbsp;" + TimeOfDay;
  var MyClock = document.getElementById ('clock');
  MyClock.innerHTML = CurrentTime;
 };
 setInterval (function () {TimeUpdate ();}, 1000);

 // Copyright
 function CopyrightYear () {
  document.getElementById ("copyright").innerHTML = 'Copyright &copy; 20xx&ndash;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>'
 };
}

Answer 1

你永远不会执行这些功能。

当JavaScript函数被解释器命中时，它们不会自动执行，你必须在定义它们之后调用它们才能发生某些事情。

例如：

var num = 0;
function count() {
    num += 1;
    document.write(num);
    document.write('<br/>'); // New line.
}

count();
count();
count();

因此，在您的情况下，如果您希望运行这些函数，则需要在onload函数的末尾调用它们，如下所示：

CopyrightYear();
DateUpdate();
SocialMedia();

Answer 2

从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 + "&nbsp;" + TimeOfDay,
     var MyClock = document.getElementById('clock');
   MyClock.innerHTML = CurrentTime;
 };

 // Copyright
 function CopyrightYear() {
   document.getElementById("copyright").innerHTML = 'Copyright &copy; 20xx&ndash;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();

 }

Answer 3

我认为你几乎拥有它，你只是错过了对函数的调用......

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 + "&nbsp;" + 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 &copy; 20xx&ndash;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不会加载多个函数

3 个答案: