效果图:
下面奉上代码:
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
button {
float:left;
margin:7.5px;
height:90px;
width:90px;
background-color:springgreen;
font-size:30pt;
}
body {
background-color:skyblue;
margin:0px;
overflow-y:hidden;
}
p {
display:none;
font-size:12pt;
height:40px;
width:200px;
margin:0px;
border-bottom:1px solid black;
background-color:gray;
padding-top:20px;
}
select {
font-size:20pt;
}
input[type = "color"] {
float:right;
margin-right:5px;
}
#mian {
border:24px solid black;
margin:0 auto;
margin-top:40px;
width:630.5px;
height:648.5px;
background-color:silver;
}
#boX {
text-align:right;
vertical-align:middle;
background-color:silver;
width:625px;
height:100px;
font-size:65pt;
}
.caidan {
display:block;
height:45px;
width:200px;
font-size:25pt;
text-align:center;
margin:0px;
border-bottom:1px solid black;
background-color:silver;
padding-top:10px;
}
#shezhi {
background-color:silver;
float:left;
width:200px;
position: absolute;
top:0px;
bottom:0px;
border-right:1px solid black;
}
</style>
<script>
//储存数据
var One = 0;
var Two = 0;
//计算类型一
var Three = 0;
//计算类型二
var Four = 0;
//计算后输入新数据将覆盖旧数据
var Five = true;
//储存M
var Six = 0;
//数字函数
function num(item) {
var a = document.getElementById("boX").value;
var z = a.length;
if(z==24) {
document.getElementById("boX").value = a;
}
else {
if(a=="0" || Five==false) {
document.getElementById("boX").value = item;
Five = true;
}
else {
var b = item;
var c = a + b;
document.getElementById("boX").value = c;
}
}
Border();
shanshuo();
}
//小数点函数
function shudian() {
var a = document.getElementById("boX").value;
var b = a.indexOf(".");
if(Five==false) {
document.getElementById("boX").value = "0."
}
else {
if(a=="" || b > 0) {
alert("请输入正确数据!");
}
else {
var c = ".";
var d = a + c;
document.getElementById("boX").value = d;
}
}
Border();
}
//删除函数
function shanchu() {
var a = document.getElementById("boX").value;
if(a=="Infinity" || Five==false) {
document.getElementById("boX").value = 0;
}
else {
var b = a.length;
if(b=="1") {
document.getElementById("boX").value = "0";
}
else {
var c = a.length;
var d = a.slice(0,b-1);
document.getElementById("boX").value = d;
}
Border();
}
}
//清零函数
function qinlin() {
document.getElementById("boX").value = "0";
One = 0;
Two = 0;
Three = 0;
Four = 0;
Five = true;
Border();
}
//运算函数
function jia() {
var a = document.getElementById("boX").value;
if(Three!="jia" && One!="0" && a==One) {
Three = "jia";
}
else {
if(One==0) {
One = document.getElementById("boX").value;
Three = "jia";
Five = false;
}
else {
Two = document.getElementById("boX").value;
Four = "jia";
Five = false;
yunsuan();
}
}
Border()