用JS實現簡易計算器，供大家參考，具體內容如下
首先創建結構和樣式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin:0; padding:0; background-color: #abcdef; } .cal{ width:560px; height:100px; margin:0 auto; padding-top:300px; } </style></head><body> <div class="cal"> <p> <input type="text" class="num1" value="1"> <span class="sign">+</span> <input type="text" class="num2" value="1"> <span>=</span> <span class="res">2</span> </p> <p> <input type="button" value="+"> <input type="button" value="-"> <input type="button" value="*"> <input type="button" value="/"> </p> </div><script></script></body></html>然后添加Java script
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin:0; padding:0; background-color: #abcdef; } .cal{ width:560px; height:100px; margin:0 auto; padding-top:300px; } </style></head><body> <div class="cal"> <p> <input type="text" class="num1" value="1"> <span class="sign">+</span> <input type="text" class="num2" value="1"> <span>=</span> <span class="res">2</span> </p> <p> <input type="button" value="+" class="btn"> <input type="button" value="-" class="btn"> <input type="button" value="*" class="btn"> <input type="button" value="/" class="btn"> </p> </div><script> var cal=document.querySelector(".cal"); var num1=cal.querySelector(".num1"); var num2=cal.querySelector(".num2"); var sign=cal.querySelector(".sign"); var res=cal.querySelector(".res"); var btns=cal.querySelectorAll(".btn"); btns[0].onclick=add; btns[1].onclick=subtract; btns[2].onclick=multiply; btns[3].onclick=divide; function add(){ sign.innerHTML="+"; //由于DOM獲取到的值都是字符串形式，因此進行操作時需要先轉為number類型 res.innerHTML=Number(num1.value)+Number(num2.value); } function subtract(){ sign.innerHTML="-"; res.innerHTML=Number(num1.value)-Number(num2.value); } function multiply(){ sign.innerHTML="*"; res.innerHTML=Number(num1.value)*Number(num2.value); } function divide(){ sign.innerHTML="/"; res.innerHTML=Number(num1.value)/Number(num2.value); }</script></body></html>
新聞熱點
疑難解答
圖片精選
