拿走请三连，并注明出处
新手上路，看到的大佬请多指教！
代码介绍：能实现简单的加减乘除运算和清除退格功能，界面友好，类似手机上的计算器界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style type="text/css">
*{
margin: auto;
padding: 0px;
text-align: center;
font-family: "微软雅黑";
}
.content{
border-radius: 10%;
width: 400px;
height: 550px;
background-color: rgb(133, 180, 252); /*背景设置*/
}
.clear{
border-radius: 50%;
width: 20%;
height: 72px;
background-color: #ece0f5;
}
.back{
border-radius: 50%;
width: 20%;
height: 72px;
background-color: #f3e7f7;
}
#result{
margin-top: 24px;
font-size: 16px;
width: 40%;
height: 72px;
text-align: left;
border-radius: 20px;
background-color: #FFE4C4;
}
.symbol{
margin-top: 36px;
font-size: xx-large;
border-radius: 50%;
width: 20%;
height: 72px;
background-color:rgb(170, 225, 247);
}
.number{
margin-top: 36px;
font-size: xx-large;
border-radius: 50%;
width: 20%;
height: 72px;
background-color:rgb(162, 238, 252);
}
.calculate{
margin-top: 36px;
font-size: xx-large;
border-radius: 50%;
width: 20%;
height: 72px;
background-color: #ffe09d;
}
.content input:hover{
box-shadow: 5px 5px 5px #888888;
}
.content input:active{
background-color: #fde783;
}
</style>
<script type="text/javascript">
function clearValue(){
document.getElementById("result").value="";
}
function get(value){
document.getElementById("result").value+=value;
}
function calculate(){
var result=0;
result=document.getElementById("result").value;
document.getElementById("result").value="";
document.getElementById("result").value=eval(result);
};
var flag=true;
function func(str){
var result=document.getElementById("result");
if(flag){
//清除没有输入时的0
result.value="";
}
//改变状态，不再清空内容
flag=false;
//将之前的内容和输入的内容相加，重新显示
result.value=result.value+str;
}
//回退一个数，相当于撤销
function backspace(){
var result=document.getElementById("result");
result.value=result.value.substr(0,result.value.length-1);
}
</script>
</head>
<body>
<div class="banner">
<h2>
简 易 计 算 器
</h2>
</div>
<br />
<div class="content">
<input type="text" id="result" readonly="readonly" placeholder="运 算 结 果 显 示"/>
<input type="button" value="清 除" class="clear" οnclick="clearValue()"/>
<input type="button" value="退 格" class="back" οnclick="backspace()"/>
<br />
<input type="button" value="1" class="number" οnclick="get(this.value)"/>
<input type="button" value="2" class="number" οnclick="get(this.value)"/>
<input type="button" value="3" class="number" οnclick="get(this.value)"/>
<input type="button" value="+" class="symbol" οnclick="get(this.value)"/>
<br />
<input type="button" value="4" class="number" οnclick="get(this.value)"/>
<input type="button" value="5" class="number" οnclick="get(this.value)"/>
<input type="button" value="6" class="number" οnclick="get(this.value)"/>
<input type="button" value="-" class="symbol" οnclick="get(this.value)"/>
<br />
<input type="button" value="7" class="number" οnclick="get(this.value)"/>
<input type="button" value="8" class="number" οnclick="get(this.value)"/>
<input type="button" value="9" class="number" οnclick="get(this.value)"/>
<input type="button" value="*" class="symbol" οnclick="get(this.value)"/>
<br />
<input type="button" value="0" class="number" οnclick="get(this.value)"/>
<input type="button" value="." class="symbol" οnclick="get(this.value)"/>
<input type="button" value="/" class="symbol" οnclick="get(this.value)"/>
<input type="button" value="=" class="calculate" οnclick="calculate()"/>
</div>
<br />
</body>
</html>
