首頁 > web前端 > js教程 > 主體

使用JavaScript如何實作計算器

亚连
發布: 2018-06-15 23:17:34
原創
1650 人瀏覽過

這篇文章主要介紹了JavaScript實現的超簡單計算器功能,可實現基本的四則運算並帶有驗證功能,代碼中備有較為詳盡的註釋便於理解,需要的朋友可以參考下

本文實例講述了JavaScript實作的超簡單計算器功能。分享給大家供大家參考,具體如下:

先來看看運行效果:

具體程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net JS计算器</title>
  <script type="text/javascript">
   // window.onload 获取元素getElementById
    window.onload = function(){
      var oTxt1 = document.getElementById(&#39;val01&#39;);
      var oTxt2 = document.getElementById(&#39;val02&#39;);
      var oFuhao = document.getElementById(&#39;fuhao&#39;);
      // 这三个要放在button函数里面,因为s1.value是获取input里面的输入,但是这个时候还没有输入了
      // var iNum1 = oTxt1.value;
      // var iNum2 = oTxt2.value;
      // var iNum3 = oFuhao.value;
      oBtn = document.getElementById(&#39;btn&#39;);
       // 计算按钮点击事件
      oBtn.onclick = function(){
        var iNum1 = oTxt1.value;
        var iNum2 = oTxt2.value;
        var iNum3 = oFuhao.value;
        var iResult;
          //如果两个输入有一个是空的话          //return是让if里面执行结束
        if (iNum1==&#39;&#39; || iNum2==&#39;&#39;) {
          alert(&#39;不能为空&#39;);
          return;
        }          //isNaN() 如果是true,说明是非数字,所以如果两个输入中有非数字,就提示alert
        if (isNaN(iNum1) || isNaN(iNum2)) {
          alert(&#39;不能有字母&#39;);
          return;
        }          //对+-*/四个操作对应的value进行判断          //如果直接iNum1+iNum2 输出的结果是字符串的拼接 12+24 1224 所以要转换成parseInt整数
        if (iNum3 == 0) {
          iResult = parseInt(iNum1) + parseInt(iNum2)
        }
        else if (iNum3 == 1) {
          iResult = parseInt(iNum1) - parseInt(iNum2)
        }
        else if (iNum3 == 2) {
          iResult = parseInt(iNum1) * parseInt(iNum2)
        }
        else if (iNum3 == 3) {
          iResult = parseInt(iNum1)/parseInt(iNum2)
        }
        alert(iResult);
      }
    }
  </script>
</head>
<body>
  <h3>计算器</h3>
  <input type="text" id="val01">
  <select id="fuhao">
    <option value="0">+</option>
    <option value="1">-</option>
    <option value="2">*</option>
    <option value="3">/</option>
  </select>
  <input type="text" id="val02">
  <input type="button" id="btn" value="计算">
</body>
</html>
登入後複製

以上就是我整理的文字,希望對大家有幫助

相關文章:

在JS中如何產生隨機打亂數組

##在vue中常用元件和框架結構(詳細教學)

在anime.js中如何實作動畫效果的複選框

以上是使用JavaScript如何實作計算器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!