JavaScript實現(xiàn)簡單計算器功能

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

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

1.實現(xiàn)基本計算器功能，如圖

2.邏輯代碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>計算器</title>
 <!--設(shè)置樣式-->
 <style>
 .showdiv{
 text-align: center;
 margin:auto;/*設(shè)置居中*/
 border: solid 1px;
 width: 400px;
 height: 500px;
 border-radius: 10px;/*設(shè)置邊框角度*/
 }
 input[type="text"]{
 margin-top: 10px;
 width: 380px;
 height: 40px;
 font-size: 40px;
 }
 input[type="button"]{
 margin: 10px;
 margin-top: 20px;
 width: 60px;
 height: 80px;
 font-size: 40px;
 font-weight: bold;
 }
 </style>
 <!--設(shè)置js代碼-->
 <script type="text/javascript">
 /*將按鈕的值賦值給輸入框*/
 function num(btn){
 //把不能為零去掉
 if(document.getElementById("inp").value.match("除數(shù)")){
  document.getElementById("inp").value = "";
 }
 //獲取button按鈕的value
 var num = btn.value;
 console.log(num +" " +typeof(num))
 //將值賦值給text文本框
 switch(num){
  case "c":
  document.getElementById("inp").value = "";
  break;
  case "=":
  if(document.getElementById("inp").value.match("/")){
  if(document.getElementById("inp").value.split("/")[1] == "0"){
  document.getElementById("inp").value = "除數(shù)不能為零";
  }else{
  document.getElementById("inp").value = eval(document.getElementById("inp").value);
  }
  break;
  }else{
  document.getElementById("inp").value = eval(document.getElementById("inp").value);
  break;
  }
  default: 
  document.getElementById("inp").value = document.getElementById("inp").value+num;
  break;
 }
 }
 </script>
 </head>
 <body>
 <div class = "showdiv">
 <input type="text" name="" id="inp" value="" readonly="readonly"/><br />
 <input type="button" name="" id="" value="0" onclick="num(this)"/>
 <input type="button" name="" id="" value="1" onclick="num(this)"/>
 <input type="button" name="" id="" value="2" onclick="num(this)"/>
 <input type="button" name="" id="" value="3" onclick="num(this)"/><br />
 <input type="button" name="" id="" value="4" onclick="num(this)"/>
 <input type="button" name="" id="" value="5" onclick="num(this)"/>
 <input type="button" name="" id="" value="6" onclick="num(this)"/>
 <input type="button" name="" id="" value="7" onclick="num(this)"/><br />
 <input type="button" name="" id="" value="8" onclick="num(this)"/>
 <input type="button" name="" id="" value="9" onclick="num(this)"/>
 <input type="button" name="" id="" value="+" onclick="num(this)"/>
 <input type="button" name="" id="" value="-" onclick="num(this)"/><br />
 <input type="button" name="" id="" value="*" onclick="num(this)"/>
 <input type="button" name="" id="" value="/" onclick="num(this)"/>
 <input type="button" name="" id="" value="=" onclick="num(this)"/>
 <input type="button" name="" id="" value="c" onclick="num(this)"/>
 </div>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：Vue filter 過濾當前時間實現(xiàn)實時更新效果

欄目：JavaScript

下一篇：angularjs模態(tài)框的使用代碼實例

本文標題：JavaScript實現(xiàn)簡單計算器功能

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9454.html

更多JavaScript