<!DOCTYPE html>
<html leng="zh-en">
<!--
报错：在ac()和inputText()中会出现undefined
-->
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box{
position: absolute;
top: 50px;
left: 50%;
margin-left: -100px;
}
#result{
height: 50px;
width:200px;
box-sizing: border-box;
}
#keys{
display: flex;
flex-wrap: wrap;
max-width: 200px;
}
#keys li{
display: inline-block;
list-style: none;
height: 50px;
width: 50px;
border: 1px #111 solid;
box-sizing: border-box;
text-align: center;
line-height: 50px;
}
#keys li:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<input id="result" type="text" value="0">
<ul id = "keys">
<li>1</li>
<li>2</li>
<li>3</li>
<li>+</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>-</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>*</li>
<li>0</li>
<li>/</li>
<li>AC</li>
<li>DEL</li>
<li style="width:100px">.</li>
<li style="width:100px">=</li>
</ul>
</div>
<script>
var input = document.getElementById("result");
var num1,num2,result;
for (var i = 0; i < 18; i ++) {
document.getElementsByTagName("li")[i].onclick = start;
}
function start(){
switch(this.innerHTML){
case "+":
case "-":
case "*":
case "/":jie(this.innerHTML);break;
case "=": reslutIs();break;
case "AC": ac();break;
case "DEL": del();break;
default : inputText(this.innerHTML);break;
}
input.value = result;
}
function ac(){
input.value = "";
}
function del(){
input.value = input.value.substring(0,input.value.length - 1);
}
/*
* 输入函数
* 报错：出现undefined
*
*/
function inputText(obj){
if (input.value == "0") {
input.value = "";
}
input.value += obj;
}
/*
* 等于函数
* 思路：对式子进行判断，并计算结果
* 因为式子最多一次运算，也就是最多进行计算一次，有两个数字进行计算
* 可以直接使用parseFloat(),提取第一个数字
* 将提取的第一个数字转为字符串保存在另一个变量里，检测字符串的长度，从而确定运算符的位置
* 最后提取第二个数字，转为数字类型
* 根据判断的运算符进行相应的运算即可
*/
function reslutIs(){
num1 = parseFloat(input.value);
var index;
index = "" + num1;
index = index.length;
if ( input.value.indexOf("+") == 0) {
index ++;
}
//提取运算符，判断是什么运算
operator = input.value[index];
//提取最后的数字
num2 = parseFloat(input.value.substring(index + 1, input.value.length));
switch(operator) {
case "+": result = num1 + num2;break;
case "-": result = num1 - num2;break;
case "*": result = num1 * num2;break;
case "/": result = num1 / num2;break;
}
}
/*
* 加减乘除函数
* 思路：首先判断目前的式子是否可以运算，可以的话先使用resultIs()进行运算，最后添加相应符号即可
*
*/
function jie(opr){
/* 此处粘贴resultIs()处的代码，判断取得的num2是不是NaN */
num1 = parseFloat(input.value);
var index;
index = "" + num1;
index = index.length;
if ( input.value.indexOf("+") == 0) {
index ++;
}
//提取运算符，判断是什么运算
operator = input.value[index];
//提取最后的数字
num2 = parseFloat(input.value.substring(index + 1, input.value.length));
if ( isNaN(num2) || input.value.length == index ) {
inputText();
}else{
reslutIs();
}
switch(opr) {
case "+": result = result + "+";break;
case "-": result = result + "-";break;
case "*": result = result + "*";break;
case "/": result = result + "/";break;
}
}
</script>
</body>
</html>
网友评论