嘗試使用 Javascript 在 html 上制作時鍾，但我的腳本不起作用。時鍾實際上並沒有運行

Question

所以我需要制作一個實時工作的時鍾，但實際時鍾並沒有改變。 CSS 和 HTML 似乎有效，但 javascript 無效。

我似乎無法弄清楚它可能是什么。 我很確定 javascript 文件鏈接到 HTML 文件，因為 CSS 是。 也許它可能與我電腦上的某些設置有關？ 就像腳本可能鏈接到 HTML 但它沒有從其他地方獲得正確的時間輸入？ 老實說，我完全迷失了。

 var d, h, m, s, animate; function init() { d = new Date(); h = d.getHours(); m = d.getMinutes(); s = d.getSeconds(); clock(); }; function clock() { s++; if (s == 60) { s = 0; m++; if (m == 60) { m = 0; h++; if (h == 24) { h = 0; } } } $('sec', s); $('min', m); $('hr', h); animate = setTimeout(clock, 1000); }; function $(id, val) { if (val < 10) { val = '0' + val; } document.getElementById(id).innerHTML = val; }; window.onload = init;

 * { font-family: Epilogue; font-size: 36px; } .clock { text-align: center; width: center; height: center; }

 <div class="clock"> <span id="hr">00</span> <span> : </span> <span id="min">00</span> <span> : </span> <span id="sec">00</span> </div>

這是它的樣子

Answer 1

雖然我們很好奇為什么你的例子對你不起作用，但你應該知道這個時鍾會在一小時后消失幾分鍾。 您不能依賴 setTimeout，它會被在它之前運行的所有代碼阻止。 這是一個可以繞過對 init 的調用並確保您的時鍾始終正確的示例

**javascript code**                

function $(id,val){
    if(val<10){
        val='0'+val;
    }
    let e = document.getElementById(id);
    if (e) e.innerHTML=val;  // only update if element exists <<
};


function clock(){
    d = new Date();
    $('sec', d.getSeconds());
    $('min', d.getMinutes());
    $('hr',  d.getHours());
};

setInterval(clock, 1000);

Answer 2

我只是認為 id 把所有東西都放在一個地方給你。 正如評論所建議的那樣，您的代碼運行良好。 我也按照塞利姆的建議更新了 JS。 請參閱下面代碼中的注釋。 但只是為了讓您看到所有內容一起工作，將所有這些代碼復制到您的 HTML 文件中，然后根據代碼中的注釋將您的 JS 和 CSS 移動到單獨的文件中。 確保鏈接到正確路徑中的 JS 文件。

  <html>
  <head>
  <meta charset="utf-8">
  <title>Current Time</title>
  <script type="text/javascript">
    // MOVE THIS CODE INTO A FILE CALLED CLOCK.JS
    // SAVE THE FILE IN THE SAME FOLDER AS YOUR HTML FILE (OR A LIBRARY/JS FOLDER)
    // LINK TO THE FILE <script src="clock.js"> < /script>
     
    function $(id,val){
    
        if(val < 10){
            val = '0' + val;
        }
        let e = document.getElementById(id);
        if (e) e.innerHTML = val;  
    };


    function clock(){
        d = new Date();
        $('sec', d.getSeconds());
        $('min', d.getMinutes());
        $('hr',  d.getHours());
    };
    
    setInterval(clock, 1000);
</script>
<style type="text/css">
    /* PLACE THIS CODE IN YOUR CSS FILE AND LINK TO IT AS PER JS FILE
    <link href="style.css" rel="stylesheet"> */
    *{
        font-family: Epilogue;
        font-size:36px;
    }
    .clock{
        text-align:center;
        width:center;
        height:center;
    }
</style> 
</head>

<body>
    <div class="clock">
     <span id = "hr" >00</span>
     <span> : </span>
     <span id = "min" >00</span>
     <span> : </span>
     <span id = "sec" >00</span>
    </div>
  </body>
</html>

嘗試使用 Javascript 在 html 上制作時鍾，但我的腳本不起作用。時鍾實際上並沒有運行

問題描述

2 個解決方案

解決方案1
1 2020-09-25 18:12:17

解決方案2
0 2020-09-25 22:58:20

嘗試使用 Javascript 在 html 上制作時鍾，但我的腳本不起作用。 時鍾實際上並沒有運行

問題描述

2 個解決方案

解決方案1 1 2020-09-25 18:12:17

解決方案2 0 2020-09-25 22:58:20

嘗試使用 Javascript 在 html 上制作時鍾，但我的腳本不起作用。時鍾實際上並沒有運行

解決方案1
1 2020-09-25 18:12:17

解決方案2
0 2020-09-25 22:58:20