suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie einen Taschenrechner mit JavaScript

So implementieren Sie einen Taschenrechner mit JavaScript

亚连
亚连Original
2018-06-15 23:17:341666Durchsuche

In diesem Artikel wird hauptsächlich die in JavaScript implementierte ultraeinfache Taschenrechnerfunktion vorgestellt, die die grundlegenden vier Rechenoperationen realisieren kann und über Überprüfungsfunktionen verfügt. Der Code ist zum leichteren Verständnis mit detaillierteren Kommentaren ausgestattet

Das Beispiel in diesem Artikel beschreibt die ultraeinfache Taschenrechnerfunktion, die in JavaScript implementiert ist. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code: 

<!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>

Das Obige ist der Text, den ich zusammengestellt habe, ich hoffe, er wird für alle hilfreich sein

Verwandte Artikel:

So generieren Sie ein zufällig verschlüsseltes Array in JS

In Gemeinsame Komponenten und Framework-Strukturen in Vue (ausführliches Tutorial)

So implementieren Sie animierte Kontrollkästchen in anime.js

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Taschenrechner mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So generieren Sie ein zufällig verschlüsseltes Array in JSNächster Artikel：So generieren Sie ein zufällig verschlüsseltes Array in JS

In Verbindung stehende Artikel

Mehr sehen