Javascript未捕获类型错误：second.style未定义_Javascript

Javascript未捕获类型错误：second.style未定义

javascript

Javascript未捕获类型错误：second.style未定义,javascript,Javascript,我想做一个显示当地时间的钟。以下是html代码： <body> <div class="container text-center"> <div class="row"> <div class="col-xs-12 col-sm-6"> <div id="se

我想做一个显示当地时间的钟。以下是html代码：

  <body>
        <div class="container text-center">
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    <div id="seattle" class="clock rounded-circle">
                        <div class="hand second"></div>
                        <div class="hand hour"></div>
                        <div class="hand minute"></div>       
                    </div>
                </div>
            </div>
        </div>
        <script src="main.js"></script>
  </body>
</html>

css:

为什么显示“未捕获类型错误：second.style未定义”？“第二个”已在html中声明，css包含其样式。非常感谢。

getElementsByClassName（）

将返回一个html元素数组。您需要对它们进行迭代

使用现有代码的可能解决方案

//更改
第二个[0]。style.transform=`rotate（${secondDeg}deg）`；
分钟[0]。style.transform=`rotate（${minuteDeg}deg）`；
小时[0]。style.transform=`rotate（${hourDeg}deg）`；

second[0]

是类名为

second

的第一个子类

通过使用ID

//javascript
//只需访问这样的元素
设second=document.getElementById（“second”）；
设hour=document.getElementById（“hour”）；
让minute=document.getElementById（“minute”）；
// ...

您需要执行以下操作

document.getElementsByClassName（'**'）[0]

它返回一个元素数组。

getElementsByCassName

返回一个类似集合（）的数组。您需要在每个元素上循环。可以这样做：

Array.from(second).forEach(el => {
  el.style.transform = `rotate(${ secondDeg }deg)`;
});

当然，您需要在

分钟和小时内重复此操作。如果您得到答案，我们将不胜感激。
.minute {
    width: 3px;
    background-color: #333;
    height: 90px;
    transform: translateX(100px);
}

.hour {
    width: 5px;
    background-color: rgb(44, 11, 235);
    height: 60px;
    transform: translateX(100px);
}

.second {
    width: 1px;
    background-color: rgb(191, 22, 22);
    height: 90px;
    transform: translateX(100px);
}

Array.from(second).forEach(el => {
  el.style.transform = `rotate(${ secondDeg }deg)`;
});