1.效果圖
2.代碼實現
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" id="input" ><span id="num1"></span><span id="op"></span><span id="num2"></span><span>=</span><span id="sum">?</span><button id="btn" onclick="sumbit()">提交</button><script src="./js/index.js"></script>
</body>
</html>
index.js
let num1_text = document.getElementById(`num1`)
let num2_text = document.getElementById(`num2`)
let sum_text = document.getElementById(`sum`)
let input = document.getElementById(`input`)
let op_text = document.getElementById(`op`)
let num1, num2, op
//生成隨機數的方法
let rand = (min, max) => {//傳入隨機數范圍result= parseInt((max-min+1)*Math.random()+min)//將結果轉為整數return result //返回結果
}
//初始化方法
let init = () => {num1 = rand(1, 10)//生成一個1~10之間的隨機數賦給num1num2 = rand(1, 10)//生成一個1~10之間的隨機數賦給num2switch (rand(1, 4)) {//隨機生成四則運算符case 1: op_text.textContent = `+`,op=`+`; break//當隨機數為1為+，并將值賦給opcase 2: op_text.textContent = `-`, op = `-`; breakcase 3: op_text.textContent = `*`, op = `*`; breakcase 4: op_text.textContent = `/`, op = `/`; break}num1_text.textContent = `${num1}`//將當前num1的值顯示到前端對應的標簽中num2_text.textContent = `${num2}`
}
//頁面加載時先執行一次
init()
//聲明一個點擊事件的方法
let sumbit = () => {//根據上面隨機到的op，num1,num2結合獲取到前端輸入框中的值進行判斷if (op == `+`&& parseInt(input.value)==(num1+num2)) alert("驗證成功")else if (op == `-` && parseInt(input.value) == (num1 - num2)) alert("驗證成功")else if (op == `*` && parseInt(input.value) == (num1 * num2)) alert("驗證成功")else if (op == `/` && parseInt(input.value) == parseInt(num1 / num2)) alert("驗證成功")else alert("驗證失敗")//提交后再次初始化init()
}
