<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<style>
.fa{
cursor: pointer;
display: flex;
width: 400px;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-around;
}
.fa li{
width: 25%;
list-style: none;
font-size: 20px;
text-align: center;
padding-top:20px;
}
.fa li:nth-child(1){
width: 100%;
}
.fa li input{
width:83%;
}
</style>
</head>
<body>
<ul class="fa">
<li><input type="text" disabled="disabled" id="sc"></li>
<li onclick="cl()">AC</li>
<li onclick="shan()">←</li>
<li onclick="ad('%')">%</li>
<li onclick="ad('/')">÷</li>
<li onclick="ad(7)">7</li>
<li onclick="ad(8)">8</li>
<li onclick="ad(9)">9</li>
<li onclick="ad('*')">x</li>
<li onclick="ad(4)">4</li>
<li onclick="ad(5)">5</li>
<li onclick="ad(6)">6</li>
<li onclick="ad('-')">-</li>
<li onclick="ad(1)">1</li>
<li onclick="ad(2)">2</li>
<li onclick="ad(3)">3</li>
<li onclick="ad('+')">+</li>
<li>¤</li>
<li onclick="ad(0)">0</li>
<li onclick="ad('.')">.</li>
<li onclick="deng()">=</li>
</ul>
<script>
function ad(a){
var b = document.getElementById("sc");
b.value = b.value+a;
}
function shan(){
var a = document.getElementById("sc");
b = a.value.substr(0,a.value.length-1);
a.value = b;
}
function cl(){
var a = document.getElementById("sc");
a.value = "";
}
function deng(){
var a = document.getElementById("sc");
var b = eval(a.value);
a.value = b;
}
</script>
</body>
</html>
