堆棧內存溢出
  簡體   English   中英

為什么我的 JavaScript 不能在 HTML Visual Code 中運行

[英]Why won't my JavaScript run in HTML Visual Code

 原文  2021-06-16 12:15:45  4   3    javascript/ html

問題描述

我的 JavaScript 不會為我的着陸頁時鍾運行。 我試圖將 JavaScript 放在頭部和身體中，但它仍然不會讓我的時鍾滴答作響。 我的代碼有什么問題？ 我該如何解決？ 

 const time = document.getElementById('time'), greeting = document.getElementById('greeting'), name = document.getElementById('name'), focus = document.getElementById('focus'); function showTime() { let today = new Date(), hour = today.getHours(), min = today.getMinutes(), sec = today.getSeconds(); //Set Am or PM const amPM = hour >= 12 ? 'PM' : 'AM'; //12hr Format hour = hour % 12 || 12; //Output Time time.innerHTML = '${hour}<span>:</span>${min}<span>:</span>${sec}'; setTimeout(showTime, 1000); } Run showTime();
 <!DOCTYPE html> <html lang="en" <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2? family=Quicksand&display=swap" rel="stylesheet" <title>Welcome Page</title> </head> <body> <time id="time">12:34:56 PM</time> <h1> <span id="greeting">Good Afternoon</span> <span id="name" contenteditable="true">Heather</span> </h1> <h2>What Is Your Focus For Today?</h2> <h2 id="focus" contenteditable="true">FIX THIS ISH ! </h2> <script src="js/main.js"></script> </body> </html>

3 個解決方案

解決方案1
 1  2021-06-16 12:39:56

首先，您應該使用setInterval而不是setTimeout 。

其次，您應該使用`而不是'來輸出時間。 

 const time = document.getElementById('time'), greeting = document.getElementById('greeting'), name = document.getElementById('name'), focus = document.getElementById('focus'); function showTime() { let today = new Date(), hour = today.getHours(), min = today.getMinutes(), sec = today.getSeconds(); //Set Am or PM const amPM = hour >= 12 ? 'PM' : 'AM'; //12hr Format hour = hour % 12 || 12; //Output Time time.innerHTML = `${hour}<span>:</span>${min}<span>:</span>${sec}${amPM}`; } setInterval(showTime,1000);
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2? family=Quicksand&display=swap" rel="stylesheet" > <title>Welcome Page</title> </head> <body> <time id="time">12:34:56 PM</time> <h1> <span id="greeting">Good Afternoon</span> <span id="name" contenteditable="true">Heather</span> </h1> <h2>What Is Your Focus For Today?</h2> <h2 id="focus" contenteditable="true">FIX THIS ISH ! </h2> <script src="js/main.js"></script> </body> </html>

解決方案2
 0  2021-06-16 12:32:13

問題：-

而不是 backtik(``) 你使用了單引號('')

運行（上一行調用 showTime）

試試這個代碼.....

const time = document.getElementById('time'),
  greeting = document.getElementById('greeting'),
  name = document.getElementById('name'),
  focus = document.getElementById('focus');

function showTime() {
  let today = new Date(),
    hour = today.getHours(),
    min = today.getMinutes(),
    sec = today.getSeconds();
  //Set Am or PM
  const amPM = hour >= 12 ? 'PM' : 'AM';

  //12hr Format 
  hour = hour % 12 || 12;

  //Output Time
  time.innerHTML = `${hour}<span>:</span>${min}<span>:</span>${sec}`;

  setTimeout(showTime, 1000);
}
showTime();

解決方案3
 0  2021-06-16 13:40:54

這是我的 JS THANKS 中的反引號！ 

 const time = document.getElementById('time'), greeting = document.getElementById('greeting'), name = document.getElementById('name'), focus = document.getElementById('focus'); function showTime() { let today = new Date(), hour = today.getHours(), min = today.getMinutes(), sec = today.getSeconds(); //Set Am or PM const amPM = hour >= 12 ? 'PM' : 'AM'; //12hr Format hour = hour % 12 || 12; //Output Time time.innerHTML = '${hour}<span>:</span>${min}<span>:</span>${sec}'; setTimeout(showTime, 1000); } Run showTime();
 <!DOCTYPE html> <html lang="en" <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2? family=Quicksand&display=swap" rel="stylesheet" <title>Welcome Page</title> </head> <body> <time id="time">12:34:56 PM</time> <h1> <span id="greeting">Good Afternoon</span> <span id="name" contenteditable="true">Heather</span> </h1> <h2>What Is Your Focus For Today?</h2> <h2 id="focus" contenteditable="true">FIX THIS ISH ! </h2> <script src="js/main.js"></script> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 為什么 Vercel 不運行我在 HTML 中鏈接的 JavaScript 代碼 為什么我的 javascript 代碼不能在 HTML 文件中工作？ 為什么不運行Javascript代碼？ 為什么我的JavaScript函數無法運行？ 為什么我的JS代碼無法運行？ 為什么我的jQuery代碼不會運行？ 為什么JavaScript無法鏈接到我的HTML？ 我有編程經驗，但是對Javascript還是陌生的，無法弄清楚為什么我的代碼無法運行 為什么我的警告框不會出現在我的 Javascript/HTML 代碼中？ 我的代碼無法運行，但是我想這是因為我缺乏html / javascript的經驗
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM