7.31js简单计算器

最新推荐文章于 2023-10-12 21:07:49 发布

前端小白QAQ

最新推荐文章于 2023-10-12 21:07:49 发布

阅读量195

点赞数 1

分类专栏： JavaScript专栏文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45932733/article/details/107710241

版权

JavaScript专栏专栏收录该内容

27 篇文章 2 订阅

订阅专栏

制作一个简单的计算器，带有加减乘除，AC和退格的基本功能在此次学习中我学到了四个方法

1.`indexOf（）`方法，若不为数字，需要加引号

indexOf（） （补充：indexOf从前往后查询，而lastIndexOF从后往前查询）

用于查找字符在数组的位置，（）里输入你想要查找的字符，若是有则会输出一个位置，若是没有则会输出一个-1

2.`join（）`方法，若不为数字，需要加引号

join（）   //若是给括号里加入内容，就会把数组的每一位后面加上”“里的内容

join（）方法是将数组的每一位拼接成一个字符串

3.`eval（需要计算的字符串）`方法，计算表达式的值，需要传入字符串

4.subter（参数一，参数二）方法

选择性截取字段，从参数一位置开始，从参数二位置结束。

最后附上我自己的代码

样式嘛，自己喜欢什么样的自己写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>网页计算器</title>
</head>
<body>
  <table>
    <tr>
      <td>
        <input class="txt" type="text" disabled/>
      </td>
    </tr>
    <tr>
      <td>
        <input class="btn_click" type="button" value="AC"/>
        <input class="btn_click" type="button" value="DEL"/>
      </td> 
    </tr>
    <tr>
      <td>
        <input class="btn" type="button" value="7"/>
        <input class="btn" type="button" value="8"/>
        <input class="btn" type="button" value="9"/>
        <input class="btn" type="button" value="*"/>
      </td>
    </tr>
    <tr>
      <td>
        <input class="btn" type="button" value="4"/>
        <input class="btn" type="button" value="5"/>
        <input class="btn" type="button" value="6"/>
        <input class="btn" type="button" value="/"/>
      </td>
    </tr>
    <tr>
      <td>
        <input class="btn" type="button" value="1"/>
        <input class="btn" type="button" value="2"/>
        <input class="btn" type="button" value="3"/>
        <input class="btn" type="button" value="-"/>
      </td>
    </tr>
    <tr>
      <td>
        <input class="btn" type="button" value="0"/>
        <input class="btn" type="button" value="."/>
        <input class="btn" type="button" value="+"/>
        <input class="btn" type="button" value="="/>
      </td>
    </tr>
  </table>
<script src="./practice.js"></script>  
</body>
</html>

js

var my_value = [];
var txt = document.getElementsByClassName("txt")[0];
var btn_click = document.getElementsByClassName("btn_click");
var btn = document.getElementsByClassName("btn");
for (var i=0; i<btn.length; i++) {
  btn[i].onclick = function() {
    if (!isNaN(this.value) || this.value == ".") {
      if (txt.value.indexOf(".") != -1) {
        if (this.value !== ".") {
          txt.value += this.value
        }
      }
      else {
        txt.value += this.value
        console.log(txt.value)
      }
    }
    else {
      if (this.value == "=") {
        my_value[my_value.length] = txt.value
        console.log(my_value)
        console.log(my_value.join(""))
        txt.value = eval(my_value.join(""))
        my_value = []
      }
      else {
        my_value[my_value.length] = txt.value
        console.log(my_value)
        my_value[my_value.length] = this.value
        console.log(txt.value)
        txt.value = ""
      }
    }
  }
}
for (var i=0; i<btn_click.length; i++) {
  btn_click[i].onclick = function () {
    if (this.value == "AC") {
      txt.value = ""
      my_value = []
    }
    else {
      txt.value = txt.value.substr(0,txt.value.length-1)
    }
  }
}

在此次的js代码中我还学到了`length`一用法

那就是如果你想给某个数组最后一项添加一个内容，就可以

var mar = [1, 2, 3]
mar[mar.length] = 4
console.log(mar)   //  输出[1, 2, 3, 4]

前端小白QAQ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

7.31js简单计算器

制作一个简单的计算器，带有加减乘除，AC和退格的基本功能在此次学习中我学到了四个方法

1.indexOf（）方法，若不为数字，需要加引号

2.join（）方法，若不为数字，需要加引号

3.eval（需要计算的字符串）方法，计算表达式的值，需要传入字符串

4.subter（参数一， 参数二）方法