基于JavaScript實(shí)現(xiàn)簡易計(jì)算器
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡易計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>計(jì)算器</title> <style>.op { margin: 50px auto; width: 300px; height: 300px; border: 1px solid orange; background-color: lightskyblue; border-radius: 50px;}input { width: 210px; height: 30px; border-radius: 5px;}button { width: 30px; height: 30px; border-radius: 10px;} </style></head><body><div class='op'> <h2 align='center'>計(jì)算器</h2> <form name='calculator'><table align='center'> <tr><td>num1:</td><td><input type='text' name='num1'></td> </tr> <tr><td>num2:</td><td><input type='text' name='num2'></td> </tr> <tr><td colspan='2'>          <button type='button'>+</button>        <button type='button'>-</button>        <button type='button'>*</button>        <button type='button'>/</button></td> </tr> <tr><td>結(jié)果：</td><td><input type='text' name='result' disabled></td> </tr></table> </form></div><script> //得到標(biāo)簽名下的所有元素對象，返回一個(gè)數(shù)組 let buttonArr = document.getElementsByTagName('button'); for (let but of buttonArr) {but.addEventListener(’click’, function () { let operator = this.innerHTML; count(operator);}); } function count(operator) {//得到form為calculator中name為num1的輸入值let num1 = parseFloat(document.calculator.num1.value);let num2 = parseFloat(document.calculator.num2.value);let result = ’’;switch (operator) { case ’+’:result = num1 + num2;break; case ’-’:result = num1 - num2;break; case ’*’:result = num1 * num2;break; case ’/’:if (num2 == 0) { alert('除數(shù)不能為零'); return;}result = num1 / num2;break;}//將結(jié)果賦值于屬性名name為result的input框document.calculator.result.value = result; }</script></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Laravel操作session和cookie的教程詳解2. html小技巧之td,div標(biāo)簽里內(nèi)容不換行3. XML入門的常見問題(一)4. css進(jìn)階學(xué)習(xí) 選擇符5. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法6. PHP字符串前后字符或空格刪除方法介紹7. jsp實(shí)現(xiàn)登錄界面8. 解析原生JS getComputedStyle9. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達(dá)式10. Echarts通過dataset數(shù)據(jù)集實(shí)現(xiàn)創(chuàng)建單軸散點(diǎn)圖
網(wǎng)公網(wǎng)安備