一个网页计算器
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页计算器</title>
<style>
#big {
width: 800px;
height: 600px;
background-color: #66ccff;
border-radius: 25px;
position: relative;
left: 25%;
}
#input{
width: 790px;
height: 100px;
background-color: rgb(255, 255, 203);
border-radius: 25px;
position: relative;
top:10px;
left: 5px;
}
#out{
width: 700px;
height: 80px;
background-color: rgb(255, 255, 203);
border-radius: 25px;
position: relative;
top:5px;
left: 5px;
font-size: 30px;
text-align: right;
}
#but{
position: relative;
top:15px;
left: 85px;
}
button{
width: 150px;
height: 100px;
background-color: #66ffcc;
border-radius: 25px;
font-size: 30px;
text-align: center;
}
#C{
width: 60px;
height: 80px;
background-color: #66a8ff;
border-radius: 25px;
font-size: 30px;
text-align: center;
position: relative;
top:5px;
left: 5px;
}
</style>
</head>
<body>
<div id="big">
<div id="input">
<input type="text" id="out" value=""> <button id="C" onclick="C()">C</button>
</div>
<div id="but">
<button onclick="n1();">1</button> <button onclick="n2();">2</button> <button onclick="n3();">3</button> <button onclick="add();">+</button>
<br>
<br>
<button onclick="n4();">4</button> <button onclick="n5();">5</button> <button onclick="n6();">6</button> <button onclick="sub();">-</button>
<br>
<br>
<button onclick="n7();">7</button> <button onclick="n8();">8</button> <button onclick="n9();">9</button> <button onclick="ride();">*</button>
<br>
<br>
<button onclick="n0();">0</button> <button onclick="dian();">.</button> <button onclick="sum()">=</button> <button onclick="divi();">/</button>
</div>
</div>
<script>
function n0(){
setout(getout()+"0");
}
function n1(){
setout(getout()+"1");
}
function n2(){
setout(getout()+"2");
}
function n3(){
setout(getout()+"3");
}
function n4(){
setout(getout()+"4");
}
function n5(){
setout(getout()+"5");
}
function n6(){
setout(getout()+"6");
}
function n7(){
setout(getout()+"7");
}
function n8(){
setout(getout()+"8");
}
function n9(){
setout(getout()+"9");
}
function dian(){
setout(getout()+".");
}
function add(){
setout(getout()+"+");
}
function sub(){
setout(getout()+"-");
}
function ride(){
setout(getout()+"*");
}
function divi(){
setout(getout()+"/");
}
function sum(){
setout(eval(getout()));
}
function C(){
setout("0");
}
function getout(){
return document.getElementById("out").value;
}
function setout(str){
document.getElementById("out").value = str;
}
</script>
</body>
</html>
预览: