堆栈内存溢出
  简体   繁体   English

为什么我的 JavaScript 不能在 HTML Visual Code 中运行

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

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

问题描述

My JavaScript won't run for my landing page clock.我的 JavaScript 不会为我的着陆页时钟运行。 I have tried to put the JavaScript in the head and in the body but it still will not make my clock tick.我试图将 JavaScript 放在头部和身体中，但它仍然不会让我的时钟滴答作响。 What is wrong with my code?我的代码有什么问题？ How do I fix this?我该如何解决？ 

 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

First, you should use setInterval instead of setTimeout .首先，您应该使用setInterval而不是setTimeout 。

Second, you should use ` instead of ' to output the time.其次，您应该使用`而不是'来输出时间。 

 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

problems:-问题：-

instead of backtik(``) you have used single quote('')而不是 backtik(``) 你使用了单引号('')

Run (previous line of calling showTime)运行（上一行调用 showTime）

try this code.....试试这个代码.....

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

it was the backticks in my JS THANKS !这是我的 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 代码 - Why won't Vercel run my JavaScript code linked in HTML 为什么我的 javascript 代码不能在 HTML 文件中工作？ - Why won't my javascript code work in a HTML file? 为什么不运行Javascript代码？ - Why won't Javascript code run? 为什么我的JavaScript函数无法运行？ - Why won't my javascript function run? 为什么我的JS代码无法运行？ - Why Won't my JS Code Run? 为什么我的jQuery代码不会运行？ - Why won't my jQuery code run? 为什么JavaScript无法链接到我的HTML？ - Why won't javascript link to my html? 我有编程经验，但是对Javascript还是陌生的，无法弄清楚为什么我的代码无法运行 - I'm experienced with programming but new to Javascript, can't figure out why my code won't run 为什么我的警告框不会出现在我的 Javascript/HTML 代码中？ - Why won't my alert box appear in my Javascript/HTML code? 我的代码无法运行，但是我想这是因为我缺乏html / javascript的经验 - My code won't run, but i suppose that it's because I lack experience in html/javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM