ES6网页计算器

最新推荐文章于 2024-08-19 10:25:09 发布

槿花荣

最新推荐文章于 2024-08-19 10:25:09 发布

阅读量190

点赞数 2

分类专栏：作业文章标签： es6 javascript 前端 html css

本文链接：https://blog.csdn.net/m0_63359528/article/details/132547320

版权

作业专栏收录该内容

6 篇文章 1 订阅

订阅专栏

此处是index.html页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>calculator</title>
  <link rel="stylesheet" href="index.css" />
  <script type="text/javascript" src="index.js"></script>
</head>
<body>
  <div class="calculator">
  	<input id="inputNum" value="0"  disabled="disabled" class="output"/></input>
  <div class="numbers">
  	<input type="button" value="7" onclick="numberClick(value)"/>
  	<input type="button" value="8" onclick="numberClick(value)"/>
  	<input type="button" value="9" onclick="numberClick(value)"/>
  	<input type="button" value="4" onclick="numberClick(value)"/>
  	<input type="button" value="5" onclick="numberClick(value)"/>
  	<input type="button" value="6" onclick="numberClick(value)"/>
  	<input type="button" value="1" onclick="numberClick(value)"/>
  	<input type="button" value="2" onclick="numberClick(value)"/>
  	<input type="button" value="3" onclick="numberClick(value)"/>
  	<input type="button" value="0" onclick="numberClick(value)"/>
  	<input type="button" value="AC" onclick="cleanClick(value)"/>
  	<input type="button" value="=" onclick="equalClick(value)"/>
  </div>
  <div class="operators">
  	<input type="button" value="*" onclick="operatorsClick(value)"/>
  	<input type="button" value="-" onclick="operatorsClick(value)"/>
  	<input type="button" value="+" onclick="operatorsClick(value)"/>
  	<input type="button" value="/" onclick="operatorsClick(value)"/>
  </div>
  </div>
</body>
</html>

此处是index.css样式

*{
	padding: 0;
	margin: 0;
}
.calculator{
	width: 405px;
	border: solid 1px;
	background-color: lightskyblue;
	margin: 50px;
	padding: 20px;
}
.output{
	width: 359px;
	padding: 20px;
	height: 50px;
	font-size: 20px;
	text-align: right;
	background: white;
}
.numbers{
	width: 300px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
input[type=button]{
	border: solid 1px white;
	background: none;
	width: 100px;
	height: 80px;
	background: gray;
	cursor: pointer;
	color: white;
	font-size: 30px;
}
.operators{
	width: 100px;
	position: relative;
	left: -3px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

此处是JavaScript

// 获取输入框的值
const get = () => {
  return document.getElementById("inputNum").value;
};

const set = (value) => {
  document.getElementById("inputNum").value = value;
};

// 输入数字
function numberClick(value) {
  let val = get();
  if (value == "0" && val == "0") {
    return;
  }
  if (val == "0") {
    set(value);
  } else {
    set(val + value);
  }
}

//输入字符
function operatorsClick(value) {
  let val = get();
  // 不可连续输入运算字符
  if (val[val.length - 1] == "") {
    return;
  }
  //在显示框显示对应字符
  set(val + " " + value + " ");
}

// 清空数据
function cleanClick() {
  set("0");
}

// 运算判定是否为空
function equalClick() {
  if (get() == "") {
    return;
  } else {
    let cal = new calculator();
    cal.number = get().split(" ");
    cal.compute();
    set(Number.parseInt(cal.back()));
  }
}

class calculator {
  constructor(value = null) {
    // 分割算术数组
    this.number = value;
    this.result = 0;
  }

  compute() {
    // 计算乘除
    this.result = Array.from(this.number);
    for (let index = 0; index < this.result.length; index++) {
      if (this.result[index] == "*" || this.result[index] == "/") {
        // 若是最后输入的字符为运算字符,默认在数组下标index再添加1
        if (this.result[index + 1] == "") {
          this.result[index + 1] = 1;
        }
        if (this.result[index] == "*") {
          // 删除数组内已计算的数字,并添加计算后面的数字
          this.result.splice(+index - 1, 3,+this.result[index - 1] * +this.result[+index + 1]);
        } else if (this.result[index] == "/") {
          this.result.splice(+index - 1, 3, +this.result[index - 1] / +this.result[+index + 1]);
        }
        index--;
      }
    }
    // 计算加减
    for(let index = 0; index <this.result.length; index++){
    	if(this.result[index] == "+" || this.result[index] == "-"){
    		if(this.result[index] == "+"){
    			//删除数组内已计算的数字，并添加计算后的数字
    			this.result.splice(+index - 1, 3,+this.result[index - 1]+ +this.result[+index + 1]);
    		}else if(this.result[index] == "-"){
    			//删除数组内已计算的数字，并添加计算后的数字
    			this.result.splice(+index - 1, 3,+this.result[index - 1]- +this.result[+index + 1]);
    		}
    		index--;
    	}
    }
    // 添加方法:编写数据返回方法
    Object.assign(calculator.prototype, {
      back() {
        return this.result;
      }
    });
  }
}