计数器不能正常工作。我想在 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] 删除。
我来说两句