快捷導(dǎo)航

javascript實現(xiàn)簡易的計算器功能

更新時間：2022年03月29日 16:00:35 作者：Of_the

這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡易的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)簡易的計算器的具體代碼，供大家參考，具體內(nèi)容如下

javascript實現(xiàn)簡易計算器，只有兩個input輸入框，簡單實現(xiàn)加減乘除：

<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>簡易計算器</title>
? ? </head>
? ? <style>
? ? ? ? body{
? ? ? ? border: 2px #00FFFF; ? ?
? ? ? ? }
? ? </style>
? ? <body ?background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 10px;">
? ? ? ? <p>
? ? ? ? ? ? <h1>簡易計算器</h1>
? ? ? ? ? ? <input type="text" id="num1" width="50px" />
? ? ? ? ? ? <select id="select">
? ? ? ? ? ? ? ? <option value="+">+</option>
? ? ? ? ? ? ? ? <option value="-">-</option>
? ? ? ? ? ? ? ? <option value="*">*</option>
? ? ? ? ? ? ? ? <option value="/">/</option>
? ? ? ? ? ? </select>
? ? ? ? ? ? <input type="text" id="num2" width="50px"/>
? ? ? ? ? ? <br />
? ? ? ? ? ? <input type="button" value="計算" onclick="cal()" style="color: #FF0000;"/>
? ? ? ? ? ? <input id="result"></input>
? ? ? ? </p>
? ? </body>
? ? <script type="text/javascript">
? ? ? ? function cal(){
? ? ? ? ? ? var num1=document.getElementById("num1").value;
? ? ? ? ? ? var num2=document.getElementById("num2").value;
? ? ? ? ? ? var c = document.getElementById("select").value;
? ? ? ? ? ? num1=parseFloat(num1);
? ? ? ? ? ? num2=parseFloat(num2);
? ? ? ? ? ? switch(c){
? ? ? ? ? ? ? ? case "+":
? ? ? ? ? ? ? ? document.getElementById("result").value=parseInt(num1)+parseInt(num2);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case "-":
? ? ? ? ? ? ? ? document.getElementById("result").value=parseInt(num1)-parseInt(num2);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case "*":
? ? ? ? ? ? ? ? document.getElementById("result").value=parseInt(num1)-parseInt(num2);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case "/":
? ? ? ? ? ? ? ? document.getElementById("result").value=parseInt(num1)/parseInt(num2);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
</script>
</html>

效果截圖：

JavaScript eval() 函數(shù)實現(xiàn)計算器：只有一個input輸入框：

<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>簡易計算器</title>
? ? </head>
? ? <body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 10px;">
? ? ? ? <h1>簡易計算器</h1>
? ? ? ? <p>
? ? ? ? ? ? <input ?type="text" id="num1"/>
? ? ? ? ? ? <input type="button" value="計算" onclick="cal()" />
? ? ? ? </p>
? ? ? ? <p>
? ? ? ? ? ? <span id="result" style="color: #FF0000;">計算結(jié)果：</span>
? ? ? ? </p>
? ? </body>
? ? <script type="text/javascript">
? ? ? ? function cal(){
? ? ? ? ? ? var num1=document.getElementById("num1").value;
? ? ? ? ? ? var result=document.getElementById("result");
? ? ? ? ? ? try{
? ? ? ? ? ? ? ? //有值就計算
? ? ? ? ? ? ? ? var res=eval("("+num1+")");
? ? ? ? ? ? ? ? result.innerHTML=res;
? ? ? ? ? ? }catch(e){
? ? ? ? ? ? ? ? console.log(e);
? ? ? ? ? ? ? ? result.innerHTML="表達式異常";
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</html>

實現(xiàn)效果：