教你用JavaScript实现计数器
<a name="BpjhQ" rel="noopener">
案例介绍
欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个计数器。点击按钮数字改变，点击重置数字归0。
通过实战我们将学会forEach循环、contains方法、textContent属性。
案例演示
点击加号按钮数字增加，点击减号数字减少，数字可为负数，点击重置数字归0。
案例设计
JavaScript实战案例-计数器
我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。
源码学习
进入核心代码学习，我们先来看HTML中的核心代码。
<main>
<h2>有个小院-计数器</h2>
0
<button ><iaria-hidden="true"></i> </button>
<button >重置</button>
<button ><iaria-hidden="true"></i> </button>
</main>然后我们来编写核心的JavaScript代码，设置数字初始值为0；通过querySelector获取HTML元素信息；使用forEach循环获得点击按钮情况，添加按钮点击事件，如果点击减少按钮则数字减少，如果点击增加按钮则数字增加，反之数字归0；设置HTML文本内容为数字，当数字大于0时，文本颜色为绿色；当数字小于0时，文本颜色为红色；当数字等于0时，文本颜色为黑色。
//有个小院-兴趣编程let num=0;const value=document.querySelector(".value");const btns = document.querySelectorAll(".btn");btns.forEach((btn)=>{btn.addEventListener("click",(e)=>{ const styles=e.currentTarget.classList; if(styles.contains("decrease")){ num--; }else if(styles.contains("increase")){ num++; }else{ num=0; } value.textContent=num; if(num>0){ value.style.color="green"; }else if(num
页:
[1]