簡易計算器

...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

    #box{
        font-size: 100px;
        color: red; 
    }
</style>

</head>
<body>
<h1>實現(xiàn)一個計算器(使用switch判讀來實現(xiàn)下面的計算器效果)</h1>
第一個數(shù): <input type="number" id="input1">



第二個數(shù): <input type="number" id="input2">



<button onclick="getNum(1)">+</button>
<button onclick="getNum(2)">-</button>
<button onclick="getNum(3)">*</button>
<button onclick="getNum(4)">/</button>
<div id="box"></div>

<script>
      
      // 傳參

      function getNum(n){
          
           var inp1=Number(document.getElementById('input1').value);
           var inp2=Number(document.getElementById('input2').value);

           switch(n){

               case 1: num=inp1+inp2;break;
               case 2: num=inp1-inp2;break;
               case 3: num=inp1*inp2;break;
               case 4: num=inp1/inp2;break;
           }
           
           document.getElementById("box").innerHTML=num;
      }

</script>

</body>
</html>
...

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容