写点什么

教你用 JavaScript 实现计数器

  • 2022-11-30
    河北
  • 本文字数:1304 字

    阅读完需:约 4 分钟

教你用JavaScript实现计数器

案例介绍

欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!


我们来用 JavaScript 编程实战案例,做一个计数器。点击按钮数字改变,点击重置数字归 0。


通过实战我们将学会 forEach 循环、contains 方法、textContent 属性。

案例演示

点击加号按钮数字增加,点击减号数字减少,数字可为负数,点击重置数字归 0。



案例设计

JavaScript实战案例-计数器


我们来看此案例的思维导图设计,包括需求描述,页面设计和技术架构。


其中架构设计包含了 HTML,CSS,JavaScript 共三部分代码。



源码学习

进入核心代码学习,我们先来看 HTML 中的核心代码。


<!-- 有个小院-兴趣编程 --><main>  <div class="set">    <h2>有个小院-计数器</h2>    <span class="value">0</span>    <div>      <button class="btn btn-danger decrease"><i class="fa fa-minus" aria-hidden="true"></i> </button>      <button class="btn btn-secondary reset">重置</button>      <button class="btn btn-success increase"><i class="fa fa-plus" aria-hidden="true"></i> </button>    </div>  </div></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<0){      value.style.color="red";      }else{      value.style.color="black";      }      });      });
复制代码


总结思考

学习点


1、foreach 语句为数组或对象集合中的每个元素重复一个嵌入语句组。foreach 语句用于循环访问集合以获取所需信息,但不应用于更改集合内容以避免产生不可预知的副作用。


2、contains() 方法用于判断字符串中是否包含指定的字符或字符串。


3、textContent 属性设置或者返回指定节点的文本内容。


问答


1、foreach 语句只适用于数组或对象集合中吗?


2、contains() 方法可以用于判断字符串中是否包含指定的字符串吗?


3、textContent 属性可以设置指定节点的文本内容吗?


关注我,跟着我每天学习一点点,让你不再枯燥,不再孤单..


全网可搜:小院里的霍大侠, 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。


私微信:huodaxia_xfeater


二维码: http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg


公众号:有个小院(微信公众号:yougexiaoyuan)


github:yougexiaoyuan (视频源码免费获取)


(部分素材来源于互联网,如有保护请联系作者)


发布于: 刚刚阅读数: 2
用户头像

还未添加个人签名 2020-09-02 加入

还未添加个人简介

评论

发布
暂无评论
教你用JavaScript实现计数器_JavaScript_小院里的霍大侠_InfoQ写作社区