JavaScript 实现简易的计算器
哈罗，我是梦辛工作室的灵，最近没事干的时候写了个简易的计算器，用html 和 js来实现的，分享给大家，总体来说很简单，核心的话就是 界面的实现和计算结果如何实现，先来看下实现就得界面吧
怎么样，界面看上去效果还是不错的吧，界面 我是比着自己手机的界面 写的，先看下界面的代码，我分成了2部分，上面一部分占用高度的20%，用于显示计算公式和计算结果，下面一部分占用80%，用于显示按键的分布，下面按键的内容我就放在了js里面，不是偷懒哦，这样比较快=-=，可把需要的css写在了html中
<!doctype html>
<html>
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html,charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<style type="text/css">
.circle_grey_btn,.circle_grey_btn:active{
border-radius: 50%;
margin-top: 2%;
width: 15vw;
height: 15vw;
max-width: 97.5px;
max-height: 97.5px;
display: flex;
justify-content: center;
align-items: center;
border: none;
outline: none;
}
.circle_grey_btn{
background: #313131;
}
.circle_grey_btn:active{
background: #202020;
}
.circle_grey_big_btn,.circle_grey_big_btn:active{
border-radius: 25px;
margin-top: 2%;
width: 40vw;
height: 15vw;
max-width: 260px;
max-height:97.5px;
display: flex;
justify-content: center;
align-items: center;
border: none;
outline: none;
}
.circle_grey_big_btn{
background: #313131;
}
.circle_grey_big_btn:active{
background: #202020;
}
.color_white{
color: #fff;
font-size: 120%;
}
.color_orange{
color: #CD6913;
font-size: 120%;
}
.margin_small{
margin-left: 10%;
}
.circle_orange_btn,.circle_orange_btn:active{
border-radius: 50%;
width: 15vw;
height: 15vw;
max-width: 97.5px;
max-height: 97.5px;
margin-top: 2%;
display: flex;
justify-content: center;
align-items: center;
border: none;
outline: none;
}
.circle_orange_btn{
background: #CD6913;
}
.circle_orange_btn:active{
background: rgb(160, 78, 7);
}
.inner-container::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div id="Contents" style="width:100vw;height:100vh;text-align: center;display: flex;flex-direction: column;align-items: center;">
<div style="width:100%;height:100%;max-width: 650px;max-height: 912px;background: #161616;">
<div style="width: 100%;height: 25%;flex-direction: column;display: flex;justify-content: flex-end;align-items: flex-end;">
<p id="control_value" class="inner-container" style="margin-bottom:3%;color: #fff;font-size: 200%;font-weight: bold;margin-right: 5%;"></p>
</div>
<div style="width: 100%;height: 75%;padding: 0 5%;display: flex;flex-direction: row;flex-wrap: wrap;" id="keycontent">
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
然后就是js的代码，其主要的核心就是将输入的每个字符拼接成公式，然后在点击等于的时候将这个公式交由原生的eval函数去解析，然后显示结果就可以了，需要注意的是 乘号和除号 代码计算时仅认 / 、* 所以在计算前还需要做一个替换，很简单吧，实现如下：
var resultShow = "";
var isNeedClear = false;
window.onload = (argument) => {
var keyContents = document.getElementById("keycontent");
for (var x in keys){
var item = document.createElement("button");
item.innerHTML = keys[x].value;
item.className = keys[x].coustomclass;
item.onclick = pressHander;
keyContents.append(item);
}
}
function pressHander(){
var value = this.innerHTML;
if(value === "←" ){
if(resultShow.length == 0){
return;
}
resultShow = resultShow.substring(0,resultShow.length - 1);
} else if ("=" === value){
//计算结果
try {
var requestData = resultShow;
requestData = requestData.replace(/÷/g,"/");
requestData = requestData.replace(/×/g,"*");
resultShow = eval(requestData) + "";
var pointIndex = resultShow.indexOf(".");
if(pointIndex > 0){
resultShow = resultShow.substring(0,pointIndex + 12);
}
isNeedClear = true;
} catch(exception) {
alert("错误的表达式");
}
} else if("C" === value){
//清空 数据
resultShow = "";
} else if("()" === value){
//括号
var leftIndex = resultShow.lastIndexOf("(");
var rightIndex = resultShow.lastIndexOf(")");
if(rightIndex >= leftIndex){
resultShow += "(";
} else {
resultShow += ")";
}
} else {
if(isNeedClear){
resultShow = "";
isNeedClear = false;
}
//插入其他值
resultShow += value;
}
document.getElementById("control_value").innerHTML = resultShow;
}
var keys = [
{
value:"C",
coustomclass:"circle_grey_btn color_orange",
},
{
value:"()",
coustomclass:"margin_small circle_grey_btn color_orange",
},
{
value:"←",
coustomclass:"margin_small circle_grey_btn color_orange",
},
{
value:"÷",
coustomclass:"margin_small circle_grey_btn color_orange",
},
{
value:"7",
coustomclass:" circle_grey_btn color_white",
},
{
value:"8",
coustomclass:"margin_small circle_grey_btn color_white",
},
{
value:"9",
coustomclass:"margin_small circle_grey_btn color_white",
},
{
value:"×",
coustomclass:"margin_small circle_grey_btn color_orange",
},
{
value:"4",
coustomclass:"circle_grey_btn color_white",
},
{
value:"5",
coustomclass:"margin_small circle_grey_btn color_white",
},
{
value:"6",
coustomclass:"margin_small circle_grey_btn color_white",
},
{
value:"-",
coustomclass:"margin_small circle_grey_btn color_orange",
},
{
value:"1",
coustomclass:"circle_grey_btn color_white",
},
{
value:"2",
coustomclass:"margin_small circle_grey_btn color_white",
},
{
value:"3",
coustomclass:"margin_small circle_grey_btn color_white",
},
{
value:"+",
coustomclass:"margin_small circle_grey_btn color_orange",
},
{
value:"0",
coustomclass:"circle_grey_big_btn color_white",
},
{
value:".",
coustomclass:"margin_small circle_grey_btn color_white",
},
{
value:"=",
coustomclass:"margin_small circle_orange_btn color_white",
}
]
