在我继续学习 JS 的过程中，我尝试构建小项目。
今天，我已经构建了一个数字时钟（我自己制作了一点，并按照教程制作了一个 [更大] 的小时钟）。
有两件小事我不明白，教程中也没有解释。顺便说一句，如果有人感兴趣这里教程。
这里是 JS 代码
setInterval(function() {
let hours = document.querySelector('.hours')
let minutes = document.querySelector('.minutes')
let seconds = document.querySelector('.seconds')
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
hours.innerHTML = hours.innerHTML = h<10?'0'+h:h;
minutes.innerHTML = m<10?'0'+m:m;
seconds.innerHTML = s<10?'0'+s:s;
}, 1000);
小东西n°1：
为什么使用new Date()？我相信new关键字与对象有关，但我不确定。我刚开始看一眼物体。我试过hours.innerHTML = getHours()哪个在我眼中没问题，但当然没有用。怎么来的？
小东西n°2：
按照教程，如果小时、分钟和秒低于 10，它们将显示为 7、2、4、9 等，而不是 07、02、04、09 等。
我尝试了逻辑和知识的混合（剧透警报 = 它不起作用）并说
if(m < 10) {
'0' + s
}
我也试过：
if(m < 10) {
s= '0' + s
return s
}
这可能是错误的，但对不起，我正在学习......
你猜到了！它没有用！
然后我查看了评论，一个人发布了代码以使0之前的数字更小，10但这是一个速记，我不太明白，尤其是我不明白，为什么在末尾有一个:h, :m,:s每个语句？
这里是片段
setInterval(function() {
let hours = document.querySelector('.hours')
let minutes = document.querySelector('.minutes')
let seconds = document.querySelector('.seconds')
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
hours.innerHTML = h<10?'0'+h:h;
minutes.innerHTML = m<10?'0'+m:m;
seconds.innerHTML = s<10?'0'+s:s;
}, 1000);* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
.container {
width: 90vw;
margin: auto;
border: 1px solid rgb(50,50,50);
margin-top: 50vh;
transform: translateY(-50%);
display: flex;
justify-content: space-around;
padding: .5em;
font-size: 3em;
font-family: verdana;
background: rgb(170,190,170);
box-shadow: 0 0 10px black inset;
box-reflect: below 0 linear-gradient(transparent, white);
-webkit-box-reflect: below 0 linear-gradient(transparent, rgba(255,255,255,.5));
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Digital Clock</title>
</head>
<body>
<div class="container">
<div class="hours"></div>
<div class="minutes"></div>
<div class="seconds"></div>
</div>
<script src="main.js"></script>
</body>
</html>小东西n°1：
小东西n°2：
STATEMENT ? IF_TRUE : IF_FALSE
解释：链接
在这种情况下h<10?'0'+h:h意味着如果h < 10将 innerHTML 设置为'0' + h. 如果 h >= 10 则innerHTML 是h。
if(m < 10) {
s= '0' + s
return s
}
由于 if 中的语句，这不起作用。变量是“m”，这不是教程中的比较，在这种情况下是“s”。
我希望这能澄清一点:)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句