JavaScript簡單計算器程式碼分析

antzone發表於2018-07-02
JavaScript

也許網頁中需要一個簡單的計算器功能，這個時候就要掌握如何編寫，起碼應該會修改。

下面分享一個簡單計算器效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>簡單計算器程式碼例項-螞蟻部落</title>
<style type="text/css">
body{
  font-size:12px;
  color:#333;
}
ul input{
  border:#ccc 1px solid;
  border-right:#e2e2e2 1px solid;
  border-bottom:#e2e2e2 1px solid;
  height:15px;
  line-height:15px;
  padding:3px;
}
</style>
<script type="text/javascript"> 
function calculate(type,result,first,second){
  var num=0; 
  firstValue=Number(first.value);
  secondValue=Number(second.value); 
  if(firstValue==""||secondValue==""){
    return false;
  }
  switch(type){
    case 0:num=firstValue+secondValue;break;
    case 1:num=firstValue-secondValue;break;
    case 2:num=firstValue*secondValue;break; 
    case 3:num=firstValue/secondValue;break; 
    case 4:num=firstValue%secondValue;break; 
  } 
  result.value=num;
} 
window.onload=function(){
  var result=document.getElementById("result");
   
  var reduce=document.getElementById("reduce");
  var multiplication=document.getElementById("multiplication");
  var division=document.getElementById("division");
  var mod=document.getElementById("mod");
   
  var first=document.getElementById("first");
  var second=document.getElementById("second");
   
  result.onfocus=function(){this.select()}
  result.onclick=function(){calculate(0,result,first,second)}
  reduce.onclick=function(){calculate(1,result,first,second)}
  multiplication.onclick=function(){calculate(2,result,first,second)}
  division.onclick=function(){calculate(3,result,first,second)}
  mod.onclick=function(){calculate(4,result,first,second)}
}
</script>
</head>
<body>
<ul>
  <li>第一個數：<input type="text" size="10" id="first"/></li>
  <li>第二個數：<input type="text" size="10" id="second"/></li>
  <li>計算結果：<input type="text" size="10" id="result" value="+" /></li>
</ul>
<input type="button" class="btn" value="–" id="reduce"/>
<input type="button" class="btn" value="×" id="multiplication"/>
<input type="button" class="btn" value="÷" id="division"/>
<input type="button" class="btn" value="%" id="mod"/>
</body>
</html>

以上程式碼實現了簡單的計算器功能，能夠實現簡單的算術運算。

一.實現原理：

原理超級簡單，就是為按鈕註冊一個onclick事件處理函式，並且傳遞相應的引數，就可以按照按鈕value屬性所標註的運算方式進行相應的算術運算，就這麼簡單，這裡就不多介紹了，可以參考相關閱讀即可。

二.相關閱讀：

（1）.Number()參閱JavaScript Number()一章節。

（2）.switch語句參閱JavaScript switch 語句一章節。

（3）.focus事件參閱JavaScript focus事件一章節。

相關文章