案例介紹
歡迎來的我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個乘法積分游戲，乘法游戲主要通過用戶輸入的數值和程式計算的數值進行對比，正確積一分，錯誤扣一分，通過實戰我們將學會JSON.parse方法、JSON.stringify方法、localStorage.setItem方法和localStorage.getItem方法，
案例演示
運行程式后用戶根據題目在輸入框內輸入結果，點擊提交后，系統判定，正確得分加一分，錯誤得分扣一分，
案例設計
JavaScript實戰案例-乘法游戲
我們來看此案例的思維導圖設計，包括需求描述，頁面設計和技術架構，
其中架構設計包含了HTML，CSS，JavaScript 共三部分代碼，
原始碼學習
進入核心代碼學習，我們先來看HTML中的核心代碼，
<form id="form">
<h4 id="score">得分</h4>
<h1 id="question">1x1=?</h1>
<input type="text"
id="input"
placeholder="輸入你的答案"
autofocus
autocomplete="off"/>
<button type="submit" >提交</button>
</form>
然后我們來撰寫核心的JavaScript代碼，通過math隨機生成數字，自由組成題目，通過getElementById獲得指定id的物件，使用innerText將題目、得分設定在頁面上，當用戶點擊提交時，將用戶提交的結果和程式計算的結果進行比較，兩者一樣得分+1，兩者不同得分-1，
const num1=Math.ceil(Math.random()*10);
const num2=Math.ceil(Math.random()*10);
const questionEI=document.getElementById("question");
const inputEI=document.getElementById("input");
const formEI=document.getElementById("form");
const scoreEI=document.getElementById("score");
let score=JSON.parse(localStorage.getItem("score"));
if(!score){
score=0;
}
scoreEI.innerText=`得分：${score}`;
questionEI.innerText=`${num1} X ${num2} = ?`;
const correctAns=num1*num2;
formEI.addEventListener("submit",()=>{
const userAns=+inputEI.value;
if(userAns===correctAns){
score++;
updateLocalStorage();
}else{
score--;
updateLocalStorage();
}
});
function updateLocalStorage() {
localStorage.setItem("score",JSON.stringify(score));
}
總結思考
學習點
1、JSON.parse：將資料轉換為 JavaScript 物件，
2、JSON.stringify：將 JavaScript 物件轉換為字串，
3、localStorage.setItem：將value存盤到key欄位
4、localStorage.getItem：獲取指定key本地存盤的值
問答
1、localStorage.setItem將什么存盤到key欄位？
2、JSON.stringify是將物件轉換為字串嗎？
3、JSON.parse：將資料轉換為什么物件？
關注我，跟著我每天學習一點點，讓你不再枯燥，不再孤單..
全網可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰編程案例，編程/就業/副業/創業/資源，
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視頻原始碼免費獲取)
（部分素材來源于互聯網，如有保護請聯系作者）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540709.html
標籤：其他