【发布时间】：2021-07-06 03:15:25
【问题描述】：
美好的一天
我开始使用 JavaScript 练习，最近我使用我的电脑的当地时间安装了一个简单的数字时钟，我建议在其中添加一些其他内容，以显示我们当前所处的日期，我想使用包含日期的单个标签<p> 实现此目的：Mon - Tue - Wed - Thu - Fri - Sat - Sun，想法是使用<span> 标签将不同的样式应用于当前日期，我不知道这是否是正确的方法它或者是否有更有效的方法消耗更少的资源，我希望你能帮助我改进我的代码。
我当前的问题归结为我误用了Element.classList.add (" class "); 并且无法更新元素的类。
我附上我的代码：
"use strict";
const hour = document.getElementById("hour");
const date = document.getElementById("date");
const days = document.getElementById("day");
let daysString = '<span id="mon"> Mon </span> - <span id="tue"> Tue </span> - <span id="wed"> Wed </span> - ' +
'<span id="thu">Thu </span> - <span id="fri"> Fri </span> - <span id="sat"> Sat </span> - <span id="sun"> Sun </span>';
const nameMonths = ["January","February","March","April","May","June","July",
"August","September","October","November","December"];
days.innerHTML = daysString;
const getTime = ()=>{
const local = new Date();
let day = local.getDate(),
month = local.getMonth(),
year = local.getFullYear();
let getTime = local.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric',
hour12: true });
let time = getTime.slice(0, -2);
let moment = getTime.slice(-2);
hour.innerHTML = `${time} <span class="ampm">${moment[0]}.${moment[1]}.</span>`;
date.innerHTML = `${day} / ${nameMonths[month]} / ${year}`;
// ------------------------------------------------------------------------------------------------------------
let d = local.getDay();
let finalDays = daysString;
days.innerHTML = finalDays;
let currentDay;
switch(d){
case 0:
currentDay = document.getElementById("sun");
currentDay.classList.add("active-day");
break;
case 1:
currentDay = document.getElementById("mon");
currentDay.classList.add("active-day");
break;
case 2:
currentDay = document.getElementById("tue");
currentDay.classList.add("active-day");
break;
case 3:
currentDay = document.getElementById("wed");
currentDay.classList.add("active-day");
break;
case 4:
currentDay = document.getElementById("thu");
currentDay.classList.add("active-day");
break;
case 5:
currentDay = document.getElementById("fri");
currentDay.classList.add("active-day");
break;
case 6:
currentDay = document.getElementById("sat");
currentDay.classList.add("active-day");
break;
default:
finalDays = daysString;
}
days.innerHTML = finalDays;
}
getTime();
setInterval(getTime,1000);* {
margin: 0;
padding: 0;
}
body{
background: url(background2.jpg) no-repeat center center fixed;
background-size: cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'lato';
}
.container-clock{
text-align: center;
color: #fff;
}
.container-clock h1{
font-size: 12rem;
font-weight: 400;
text-shadow: 0 0 20px #409CFA;
}
.dates{
font-size: 2.5rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-shadow: 0 0 10px #409CFA;
}
.days{
font-size: 1.5rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(155, 155, 155);
text-shadow: 0 0 8px #409CFA;
}
.active-day{
color: #fff;
text-shadow: 0 0 10px #409CFA;
font-size: 2rem;
}
.ampm{
font-size: 5rem;
}<!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">
<title>Digital clock</title>
</head>
<body ondragstart="return false" onselectstart="return false" oncontextmenu="return false">
<div class="container-clock">
<h1 id="hour">00:00:00</h1>
<p id="date" class="dates">date</p>
<br><br>
<p id="day" class="days">day-day-day-day-day-day-day</p>
</div>
<script src="clock.js"></script>
</body>
</html>我无法获得所需的效果，因为我无法将所需的类添加到元素中，如果有人告诉我我做错了，我将不胜感激。
以同样的方式，我将不胜感激有关如何改进此代码的任何建议和/或想法，例如，我知道使用if / else 比使用switch () 更好，因为它消耗的资源更少。
我还意识到，当一天在 23:59 结束时，我并没有删除活动的一天课程，同样的，在我解决我的问题之前，没有课程可以替换或删除。
非常感谢任何可以帮助我的人！
【问题讨论】：
-
我得到“ReferenceError: Can't find variable: fecha”。
-
@Ofek 下面给出了一个有效的答案。顺便说一句，您的代码的问题是，您正在使用跨度列表设置“天”的 InnerHTML。相反，尝试为每个跨度使用
appendChild()，然后使用switch添加类将没有问题。 -
请阅读How to Ask。目前尚不清楚您要求我们在这里解决什么确切问题。它看起来更像是审查您的代码的请求。请缩小问题范围并提供有用的标题。这样的问题对任何人都没有帮助。
标签： javascript html css date web