使用javascript实现四则运算计算器

作者: 田小田txt | 来源:发表于2018-09-17 23:44 被阅读0次

使用javascript实现四则运算计算器
每周技术分享第三周（6-8)
JavaScript制作简单计算器
使用c#.net实现winform简单计算器
小朋友学C++（24）：实现简易计算器
2018-11-10
前端 JavaScript 实现一个简易计算器
算法（3）简单四则运算
JavaScript实现网页计算器
简易计算器

四则计算器效果图.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
      function validate(str){
  var reg = /^\d+$/;              
  if (!reg.test(str)){                  
    alert("请输入数字");
      }
   }
   function calculator(){
    var pre=document.getElementById("pre").value;
    var next=document.getElementById("next").value;
    var opra=document.getElementById("operator").value;

    var result=0;
    switch(opra) {
    case "+":
    result=parseInt(pre)+parseInt(next);
         break;
    case "-":
    result=parseInt(pre)-parseInt(next);
        break;
    case "*":
        result=parseInt(pre)*parseInt(next);
        break;
    case "/":
        if(parseInt(next)!=0){
            result=parseInt(pre)/parseInt(next);
        }
        else{
            alert("除数不能为0");
            return;
        }
        break;
    default:
        break;
}
  document.getElementById("result").value=result;
}

</script>
</head>
<body>
<input type="text" name="text" id="pre" onblur="validate(this.value);">
<select  id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="text" id="next" onblur="validate(this.value);">
<span>=</span>
<input type="text" id="result" readonly="true">
<input type="button" id="btn" value="提交" onclick="calculator();">
</body>
</html>