时间戳

首页 > 解决方案 > 反 JS 问题，不会每 1 秒切换一次类

javascript - 反 JS 问题，不会每 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>

标签： javascripttogglesetinterval

解决方案

您的问题是您正在使用 .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>

推荐阅读