教你用JavaScript制作计数器
案例介绍
欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!
我们来用JavaScript编程实战案例,做一个计数器。点击按钮数字改变,点击重置数字归0。
通过实战我们将学会forEach循环、contains方法、textContent属性。
案例演示
点击加号按钮数字增加,点击减号数字减少,数字可为负数,点击重置数字归0。
案例设计
我们来看此案例的思维导图设计,包括需求描述,页面设计和技术架构。
其中架构设计包含了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 属性可以设置指定节点的文本内容吗?
关注我,跟着我每天学习一点点,让你不再枯燥,不再孤单…
全网可搜:小院里的霍大侠, 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
github:yougexiaoyuan (视频源码免费获取)
(部分素材来源于互联网,如有保护请联系作者)
教你用JavaScript制作计数器相关推荐
- 教你用JavaScript制作背景图像滚动效果
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个背景图像滚动效果.滚动鼠标背景图像缩小,下方滑动出现文字.通过实战我们将学会obj ...
- 教你用JavaScript制作图片回廊
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个图片回廊.图片展示在页面上,用户可通过按钮手动旋转.通过实战我们将学会事件和Eve ...
- 教你用JavaScript制作轮播图
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个轮播图.图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时 ...
- 教你用JavaScript制作进度条
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个进度条.进度条数字自动增加,条状图片动画演示进度完成度.通过实战我们将学会函数fu ...
- 教你用JavaScript制作小日历
案例介绍 欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个小日历.小日历主要展示年份.月份.星期和日期.通过实战我们将学会getElemen ...
- 教你用JavaScript制作鼠标特效
案例介绍 欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个鼠标爱心特效.鼠标在页面移动时会出现彩色爱心特效.通过实战我们将学会createE ...
- 利用JavaScript制作倒计时牌(转)
利用JavaScript制作倒计时牌 五一劳动节很快就到了.哈哈,到时可以出去好好玩一玩了.是不是在掐指计算了.下面教你一种方法在网页上面制作倒计时牌,这样就方便多了. 把下面的JavaScript代 ...
- HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
- HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的) 程序员给大家留下的印象往往是代码的机器,整天写代码-程序员不懂爱!其实这是对程序员一种片面的看法.程序员固然 ...
最新文章
- R语言ncol函数获取dataframe或者matrix列的个数实战
- 从TCP到RDMA网络最新技术|扩展技术视野
- 空格分隔输出(信息学奥赛一本通-T1026)
- 原生H5 select自动提示搜索
- 怎样运用Oracle的BFILE
- node:爬虫爬取网页图片 1
- mybatis ------ 懒加载(八)
- 逆向基础——软件手动脱壳技术入门
- 消除计算机硬盘的碎片应该使用,win10系统电脑C盘磁盘碎片怎么清理?
- java 网页版通讯_JavaWeb网页聊天室(WebSocket即时通讯)
- OpenInfra基金会成立多元化董事会领袖组,任命总干事助推OpenInfra下一个十年的发展...
- Kryo 缓冲区溢出
- 生物信息学|Extracting Drug-Drug Interactions with Attention CNNs
- js实现微信禁止h5网页下拉,禁止微信h5页面默认下拉
- 股市学习稳扎稳打(一)认识市场上的各路游资
- 闲谈“个人核心竞争力”与“危机感”
- SMETA验厂辅导,贸易公司、物流仓储公司是否可以申请SMETA审核
- 电脑xp系统坏了,如何处理
- 简单工厂模式(代码实现)
- 七天七夜,直播也救不了天涯?网友们的青春回忆还能重启吗?