如何有效地将javascript链接到html？

Question

I am trying to link a javascript file to my html that will display a digital clock 我正在尝试将一个javascript文件链接到我的html，它将显示数字时钟

I've checked online and used the script tag as it was said but the changes don't show on my web page, I need help please 我已经在线检查并按原样使用了脚本标签，但更改未显示在我的网页上，请寻求帮助

html
 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" charset=>
        <title>About Me</title>
        <link href=".\main.css" type="text/css" rel="stylesheet">
        <script src="script.js"></script>
    </head>

java script Java脚本

function updateClock(){
    var currentTime = new Date();
    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();

    currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
    currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

    var timeOfDay = (currentHours < 12) ? "AM" : "PM";
    currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
    currentHours = (currentHours == 0) ? 12 : currentHours;

    var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + ":" + timeOfDay;

    document.getElementById('clock').innerHTML = currentTimeString;
};

//windows.onload=init;

Answer 1

In your HTML, try to put onLoad="updateClock()" in the body tag or a container tag to call your clock method from JS. 在您的HTML中，尝试在body标签或容器标签中放置onLoad="updateClock()"以从JS调用您的clock方法。

Like this, 像这样，

<div onLoad="updateClock()" class="clock"></div>

OR 要么

<body onLoad="updateClock()">
....
</body>

This can be done with any tag. 可以使用任何标签来完成。

Full example here: 完整示例如下：

https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

Answer 2

Quite a number of problems. 很多问题。

First, in your head, either set the charset value to something or get rid of it. 首先，将您的charset值设置为某个值或摆脱它。 The problem I'm referring to is <meta name="viewport" content="width=device-width, initial-scale=1" charset=> . 我要指的问题是<meta name="viewport" content="width=device-width, initial-scale=1" charset=> 。

Second, the html needs to load before your javascript is called. 其次，需要在调用javascript之前加载html。 To fix this, put your script at the bottom, right before your </body> tag or change your <body> to <body onload="updateClock()"> . 要解决此问题，请将脚本放在</body>标记之前的底部，或者将<body>更改为<body onload="updateClock()"> 。 If you do it the first way, make sure to call your function; 如果您是第一种方式，请确保调用您的函数。 otherwise, nothing will happen. 否则，将不会发生任何事情。

Finally, you need to add a div tag or something with the id "clock"; 最后，您需要添加div标签或ID为“ clock”的东西； otherwise your document.getElementById('clock').innerHTML won't be able to do anything. 否则，您的document.getElementById('clock').innerHTML将无法执行任何操作。

Total Summary: 总摘要：

  function updateClock(){ var currentTime = new Date(); var currentHours = currentTime.getHours(); var currentMinutes = currentTime.getMinutes(); var currentSeconds = currentTime.getSeconds(); currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; var timeOfDay = (currentHours < 12) ? "AM" : "PM"; currentHours = (currentHours > 12) ? currentHours - 12 : currentHours; currentHours = (currentHours == 0) ? 12 : currentHours; var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + ":" + timeOfDay; document.getElementById('clock').innerHTML = currentTimeString; };

  <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>About Me</title> </head> <body onload="updateClock()"> <div id="clock"></div> </body>

如何有效地将javascript链接到html？

问题描述

2 个解决方案

解决方案1
4 2019-07-11 21:56:18

解决方案2
0 已采纳 2019-07-11 22:02:10

如何有效地将javascript链接到html？

问题描述

2 个解决方案

解决方案1 4 2019-07-11 21:56:18

解决方案2 0 已采纳 2019-07-11 22:02:10

解决方案1
4 2019-07-11 21:56:18

解决方案2
0 已采纳 2019-07-11 22:02:10