案例介紹
歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個計數器，點擊按鈕數字改變，點擊重置數字歸0，
通過實戰我們將學會forEach回圈、contains方法、textContent屬性，
案例演示
點擊加號按鈕數字增加，點擊減號數字減少，數字可為負數，點擊重置數字歸0，
案例設計
JavaScript實戰案例-計數器
我們來看此案例的思維導圖設計，包括需求描述，頁面設計和技術架構，
其中架構設計包含了HTML，CSS，JavaScript 共三部分代碼，
原始碼學習
進入核心代碼學習，我們先來看HTML中的核心代碼，
<!-- 有個小院-興趣編程 -->
<main>
<div >
<h2>有個小院-計數器</h2>
<span >0</span>
<div>
<button ><i aria-hidden="true"></i> </button>
<button >重置</button>
<button ><i aria-hidden="true"></i> </button>
</div>
</div>
</main>
然后我們來撰寫核心的JavaScript代碼，設定數字初始值為0；通過querySelector獲取HTML元素資訊；使用forEach回圈獲得點擊按鈕情況，添加按鈕點擊事件，如果點擊減少按鈕則數字減少，如果點擊增加按鈕則數字增加，反之數字歸0；設定HTML文本內容為數字，當數字大于0時，文本顏色為綠色；當數字小于0時，文本顏色為紅色；當數字等于0時，文本顏色為黑色，
//有個小院-興趣編程
let num=0;
const value=https://www.cnblogs.com/xFeater/archive/2022/12/23/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 (視頻原始碼免費獲取)
（部分素材來源于互聯網，如有保護請聯系作者）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540645.html
標籤：其他
上一篇：VUE常用方法