如何用原生JS编写一个支持长尾词查询的智能计算器？

本文共计902个文字，预计阅读时间需要4分钟。

本文以家庭分享为例，介绍了JS实现简单计算器功能的具体代码。以下为代码示例，供大家参考。

使用HTML和CSS编写计算器的基本结构和样式，并用原生JS实现计算器的加减乘除运算功能。

简单计算器 .calculator { width: 200px; margin: 20px auto; border: 1px solid #ddd; padding: 10px; } .calculator button { width: 100%; padding: 5px; margin: 5px 0; }

以上代码实现了以下功能：

1. 使用HTML和CSS构建计算器的界面和样式。

2.使用原生JS实现计算器的加减乘除运算功能。

3.计算器可以输入数字和运算符，点击等号进行计算。

4.点击清除按钮可以清除所有输入和运算结果。

本文实例为大家分享了JS实现简单计算器功能的具体代码，供大家参考，具体内容如下

使用html和css写出计算器的基本结构和样式，用原生JS实现计算器的加减乘除运算功能，只能计算简单的两位数的运算，不支持三个数连加或者连乘等等。一次计算完成之后再进行下一次运算不需要clear，可以直接进行下次运算。具体实现如下：

html结构：

<div id="box">         <!-- 文本框要禁止用户输入，只能通过代码中的input.value来修改 -->         <input id="display" type="text" value="0" disabled>             <div class="btn">1</div>         <div class="btn">2</div>         <div class="btn">3</div>         <div class="btn">+</div>         <div class="btn">4</div>         <div class="btn">5</div>         <div class="btn">6</div>         <div class="btn">-</div>         <div class="btn">7</div>         <div class="btn">8</div>         <div class="btn">9</div>         <div class="btn">*</div>         <div class="btn">C</div>         <div class="btn">0</div>         <div class="btn">=</div>         <div class="btn">/</div> </div>

css样式：

#box {             width: 500px;             height: 600px;             border: 1px solid #000000;         }           #display {             width: 460px;             height: 60px;             margin: 15px;             text-align: right;             font-size: 60px;             line-height: 60px;             overflow: hidden;             /* overflow: hidden;  溢出隐藏 */             /* text-overflow: ellipsis;  文本溢出时显示省略号  */             /* word-wrap: none;   强制不换行 */             background: #ffffff;         }           .btn {             width: 100px;             height: 100px;             border: 1px solid #000000;             float: left;             margin: 10px 11px;             font-size: 40px;             line-height: 100px;             text-align: center;             user-select: none;  }

JS代码：

firstValue这个全局变量存储第一次输入的数，input的input.value属性也是一个变量，这个值既作为页面上显示的内容，也是输入的数值。让这两个值进行运算，结果再显示到输入框中即可。bool变量作用：当一次运算完成之后所有数值清零。

如果要实现用上一次的结果继续参与运算这个功能，可以再设置一个全局变量result来存储每次运算后的结果，当下次输入运算符号时，判断firstValue和result，再决定用哪个值计算。当点击C按钮时，所有值清空，返回初始状态。

var input = document.getElementById("display"); var btnCollection = document.getElementsByClassName("btn"); var type; var firstValue = 0; var bool = false;      for (var i = 0; i < btnCollection.length; i++) {    // 获取到每个按键并添加点击事件。点击后会触发function中代码执行。             btnCollection[i].onclick = function () {                 if(bool){                     input.value = "0";                     firstValue = 0;                     type = undefined;                     bool = false;                 }                   // input.value = this.innerHTML;      //显示点击的数字在文本框内                   if (!isNaN(Number(this.innerHTML))) {                     input.value = Number(input.value + this.innerHTML).toString();                 } else if (this.innerHTML !== "C" && this.innerHTML !== "=") {                     firstValue = Number(input.value);                     type = this.innerHTML;                     input.value = 0;                 } else if (this.innerHTML === "C") {                     firstValue = 0;                     type = undefined;                     input.value = "0";                 } else {                     switch (type) {                         case "+":                             input.value = (Number(input.value) + firstValue).toString();                             break;                         case "-":                             input.value = (firstValue - Number(input.value)).toString();                             break;                         case "*":                             input.value = (Number(input.value) * firstValue).toString();                             break;                         case "/":                             input.value = (firstValue / Number(input.value)).toString();                             break;                     }                     bool = true;                 }             }         }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。