案例介紹 歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用JavaScript編程實戰案例，做一個計數器。點擊按鈕數字改變，點擊重置數字歸0。通過實戰我們將學會forEach迴圈、contains方法、textContent屬性。 案例演示 點擊加號按鈕數字增加，點擊減號數字減少， ...
案例介紹
歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用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 (視頻源碼免費獲取)
（部分素材來源於互聯網，如有保護請聯繫作者）
