首页 > 编程语言 >教你用JavaScript实现计数器

教你用JavaScript实现计数器

时间:2022-12-23 15:02:33浏览次数:67  
标签:contains 数字 教你用 JavaScript 计数器 点击 num 按钮

案例介绍

欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用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 属性可以设置指定节点的文本内容吗?

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

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

标签:contains,数字,教你用,JavaScript,计数器,点击,num,按钮
From: https://blog.51cto.com/huodaxia/5965744

相关文章

  • 教你用JavaScript实现计数器
    案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个计数器。点击按钮数字改变,点击重置数字归0。通过实战我们将学......
  • 教你用JavaScript实现随机点名器
    案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript相关知识,做一个随机点名的案例。你可以通过点击开始按钮控制上方名字的闪动,点击停止按......
  • 教你用JavaScript实现背景图像滑动
    案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个背景图像滚动效果。滚动鼠标背景图像缩小,下方滑动出现文字。通......
  • 2022年能让你早点下班的36个JavaScript实用函数!
    携手创作,共同成长!这是我参与「掘金日新计划·8月更文挑战」的第17天,点击查看活动详情之前在掘金写了一篇介绍JavaScript小技巧的文章,很受大家欢迎。但是有朋友说还......
  • JavaScript - DOM 利用节点获取元素
    节点操作网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示。HTMLDOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均......
  • JavaScript 数组结构与树结构的转换
    前言作为前端开发的同学,在与后端进行数据联调的时候,我们前端的同学处理Array数组结构的数据是最多的,list、table、card各种需要遍历的展示显示我们都会用数组来处理。当数......
  • JavaScript-DOM基础【获取元素和对其属性/事件的操作】
     文档对象模型(DocumentObjectModel,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以......
  • 教你用JavaScript实现鼠标特效
    案例介绍欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个鼠标爱心特效。鼠标在页面移动时会出现彩色爱心特效。通过实战我......
  • 教你用JavaScript实现鼠标特效
    案例介绍欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个鼠标爱心特效。鼠标在页面移动时会出现彩色爱心特效。通过实战......
  • JavaScript的this的指向详解
    关于this的指向,主要有一下几个版块,①全局环境下的this指向②函数内的this③对象中的this④箭头函数中的this⑤构造函数中的this⑥原型链中的this【补充一点】关于this,谁调......