Counter JS 问题,不会每 1 秒切换一次类

卡米卢伊斯1

计数器不能正常工作。我想在 counterFun 函数切换 .active 类并每 1 秒显示一次时得到结果。目前,课程已切换,但显示每个第二个数字,并且看起来不是每 1sek 发生一次

let clickNumber = 0;
const time = 1000;
const h1 = document.querySelector('h1');



function counterFun() {
    clickNumber++;
    h1.textContent = clickNumber;
    h1.classList.toggle('active');

    console.log(clickNumber);
}
setInterval(counterFun, time);
.regular {
  opacity: 0;
}

 .active {
   font-size: 100px;
   opacity: 1;
   transition: .4s;
}
HTML
<div>
    <h1 class="regular active">0</h1>
</div>

基本的

您的问题是您正在使用 .toggle ,它在第二次迭代之前不会再次切换。所以基本上你最终得到:

0 - 切换 1 - 关闭 2 - 切换 3 - 关闭

您的选择是为类使用 .remove 和 .add 或添加第二个 .toggle。

删除示例:

let clickNumber = 0;
const time = 1000;
const h1 = document.querySelector('h1');



function counterFun() {
   h1.classList.remove('active');
    clickNumber++;
    h1.textContent = clickNumber;
    h1.classList.add('active');
    console.log(clickNumber);
}
setInterval(counterFun, time);
.regular {
  opacity: 0;
}

 .active {
   font-size: 100px;
   opacity: 1;
   transition: .4s;
}
HTML
<div>
    <h1 class="regular active">0</h1>
</div>

切换示例:

let clickNumber = 0;
const time = 1000;
const h1 = document.querySelector('h1');



function counterFun() {
    h1.classList.toggle('active');
    clickNumber++;
    h1.textContent = clickNumber;
    h1.classList.toggle('active');
    console.log(clickNumber);
}
setInterval(counterFun, time);
.regular {
  opacity: 0;
}

 .active {
   font-size: 100px;
   opacity: 1;
   transition: .4s;
}
HTML
<div>
    <h1 class="regular active">0</h1>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章