如何在javascript中使用setInterval方法旋转css变量？我尝试了很多不同的方法，结果都失败了

我试着复制代码，什么也没有。我看了教程，其中总有一些东西超出了我的知识范围，没有解释，因此让我更加困惑。Youtube，tuts，谷歌，谷歌搜索的问题，似乎无法解决。我所需要的只是一个小小的启动和对建议的小小解释。多谢各位

这是我的CSS。我已经得到了一个有缺口的圆圈。这就是我想要的。这里没有钟，也不打算有钟。我只想让周围有凹口的圆圈（有点像时钟）旋转。我认为唯一有用的“工具”是setInterval、css变量--rotate以及新的Date和getSeconds属性。我意识到我的代码到处都是，但这就是为什么我在这里，学习和完成

.notch_container {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid black;
    border-radius: 50%;

}


.notch_container .notch {
    --rotate: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.5rem;
    transform: rotate(var(--rotate));
}


.notch_container .notch1 {
    --rotate: 15deg;
}

.notch_container .notch2 {
    --rotate: 45deg;
}

.notch_container .notch3 {
    --rotate: 75deg;
}

.notch_container .notch4 {
    --rotate: 105deg;
}

.notch_container .notch5 {
    --rotate: 135deg;
}

.notch_container .notch6 {
    --rotate: 165deg;
}

.notch_container .notch7 {
    --rotate: 195deg;
}

.notch_container .notch8 {
    --rotate: 225deg;
}

.notch_container .notch9 {
    --rotate: 255deg;
}

.notch_container .notch10 {
    --rotate: 285deg;
}

.notch_container .notch11 {
    --rotate: 315deg;
}

.notch_container .notch12 {
    --rotate: 345deg;
}


This is my "javascript" that ive failed to get to function.


setInterval(setNotches, 1000);

const notches = document.querySelector('notch_container');

function setNotches() {
    dateToday = (new Date());
    notchRevolve = dateToday.getSeconds() / 60;

    startRotate(notches, notchRevolve);
}

function startRotate(document, rotationDegrees) {
    document.style.setProperty('--rotate', rotationDegrees * 360);
}

setNotches();

---

您的代码似乎很好。您犯的唯一错误是只设置了整数值，您需要的是附加deg

function startRotate(document, rotationDegrees) {
    document.style.setProperty('--rotate', (rotationDegrees * 360) + 'deg');
}

另外，您需要在.notch_容器上具有transform rotate属性

setInterval（setNotches，1000）；
const notches=document.querySelector（'.notch_container'）；
函数setNotches（）{
dateToday=（新日期（））；
notchRevolve=dateToday.getSeconds（）/60；
星形（凹口，非圆形）；
}
函数startRotate（文档、旋转度）{
document.style.setProperty（'--rotate'，（rotationDegrees*360）+“deg”）；
}
设置凹口（）
.notch\u容器{
位置：相对位置；
宽度：400px；
高度：400px；
边框：1px纯黑；
边界半径：50%；
变换：旋转（var（--rotate））；
}
.notch_容器。notch{
--旋转：0；
位置：绝对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
字体大小：1.5rem；
变换：旋转（var（--rotate））；
}
.notch_容器。notch1{
--旋转：15度；
}
.notch_容器。notch2{
--旋转：45度；
}
.notch_容器。notch3{
--旋转：75度；
}
.notch_容器。notch4{
--旋转：105度；
}
.notch_容器。notch5{
--旋转：135度；
}
.notch_容器。notch6{
--旋转：165度；
}
.notch_容器。notch7{
--旋转：195度；
}
.notch_容器。notch8{
--旋转：225度；
}
.notch_容器。notch9{
--旋转：255度；
}
.notch_容器。notch10{
--旋转：285度；
}
.notch_容器。notch11{
--旋转：315度；
}
.notch_容器。notch12{
--旋转：345度；
}

切口1
缺口2
缺口3
缺口4
缺口5
缺口6
切口7
缺口8
切口9
切口10
切口11
第12条
您编写的代码似乎很好。您犯的唯一错误是只设置了整数值，您需要的是添加deg

function startRotate(document, rotationDegrees) {
    document.style.setProperty('--rotate', (rotationDegrees * 360) + 'deg');
}

另外，您需要在.notch_容器上具有transform rotate属性


setInterval（setNotches，1000）；
const notches=document.querySelector（'.notch_container'）；
函数setNotches（）{
dateToday=（新日期（））；
notchRevolve=dateToday.getSeconds（）/60；
星形（凹口，非圆形）；
}
函数startRotate（文档、旋转度）{
document.style.setProperty（'--rotate'，（rotationDegrees*360）+“deg”）；
}
设置凹口（）
.notch\u容器{
位置：相对位置；
宽度：400px；
高度：400px；
边框：1px纯黑；
边界半径：50%；
变换：旋转（var（--rotate））；
}
.notch_容器。notch{
--旋转：0；
位置：绝对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
字体大小：1.5rem；
变换：旋转（var（--rotate））；
}
.notch_容器。notch1{
--旋转：15度；
}
.notch_容器。notch2{
--旋转：45度；
}
.notch_容器。notch3{
--旋转：75度；
}
.notch_容器。notch4{
--旋转：105度；
}
.notch_容器。notch5{
--旋转：135度；
}
.notch_容器。notch6{
--旋转：165度；
}
.notch_容器。notch7{
--旋转：195度；
}
.notch_容器。notch8{
--旋转：225度；
}
.notch_容器。notch9{
--旋转：255度；
}
.notch_容器。notch10{
--旋转：285度；
}
.notch_容器。notch11{
--旋转：315度；
}
.notch_容器。notch12{
--旋转：345度；
}

切口1
缺口2
缺口3
缺口4
缺口5
缺口6
切口7
缺口8
切口9
切口10
切口11
第12条
hmm.由于某种原因，它仍然不起作用。事实上，我通过将常量改为var得到了第一个旋转的槽口，但我试着让所有12个槽口都旋转。正如您所看到的，它们都有相同的类名。当我使用querySelectorALL方法时，它会创建一个关于setProperty methodos a null.hmm的新错误。由于某种原因仍然不起作用。事实上，我通过将常量改为var得到了第一个旋转的槽口，但我试着让所有12个槽口都旋转。正如您所看到的，它们都有相同的类名。当我使用querySelectorALL方法时，它会创建一个关于setProperty Methodos的新错误，即null。