基于JavaScript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎ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)簽名下的所有元素對(duì)象，返回一個(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP.NET MVC實(shí)現(xiàn)下拉框多選2. JSP中param動(dòng)作的實(shí)例詳解3. Jsp servlet驗(yàn)證碼工具類(lèi)分享4. .NET中的MassTransit分布式應(yīng)用框架詳解5. 解決request.getParameter取值后的if判斷為NULL的問(wèn)題6. .NET Framework各版本(.NET2.0 3.0 3.5 4.0)區(qū)別7. .Net反向代理組件Yarp用法詳解8. ASP.NET MVC增加一條記錄同時(shí)添加N條集合屬性所對(duì)應(yīng)的個(gè)體9. 刪除docker里建立容器的操作方法10. 詳解如何使用Net將HTML簡(jiǎn)歷導(dǎo)出為PDF格式
網(wǎng)公網(wǎng)安備