如何有效地將javascript鏈接到html？

Question

我正在嘗試將一個javascript文件鏈接到我的html，它將顯示數字時鍾

我已經在線檢查並按原樣使用了腳本標簽，但更改未顯示在我的網頁上，請尋求幫助

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

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

在您的HTML中，嘗試在body標簽或容器標簽中放置onLoad="updateClock()"以從JS調用您的clock方法。

像這樣，

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

要么

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

可以使用任何標簽來完成。

完整示例如下：

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

Answer 2

很多問題。

首先，將您的charset值設置為某個值或擺脫它。 我要指的問題是<meta name="viewport" content="width=device-width, initial-scale=1" charset=> 。

其次，需要在調用javascript之前加載html。 要解決此問題，請將腳本放在</body>標記之前的底部，或者將<body>更改為<body onload="updateClock()"> 。 如果您是第一種方式，請確保調用您的函數。 否則，將不會發生任何事情。

最后，您需要添加div標簽或ID為“ clock”的東西； 否則，您的document.getElementById('clock').innerHTML將無法執行任何操作。

總摘要：

  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