<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
/*外框*/
#outC{
border: 2px black solid;
width: 408px;
height: 655px;
float: left;
margin-left: 35%;
border-radius: 20px;
background-color:darkgray;
}
/*头部*/
#topC{
border: 0px black solid;
width: 100%;
height: 70px;
float: left;
}
.topC_1{
border: 0px black solid;
width: 40px;
height: 30px;
float: left;
margin-top: 12px;
margin-left: 25px;
color: white;
font-size: 30px;
font-family: "times new roman";
}
/*时间框*/
#showTimer{
border: 2px black solid;
width: 45%;
height: 40px;
float: right;
margin-right: 5%;
margin-top: 10px;
}
#showTimer input{
width: 98%;
height: 87%;
font-size: 25px;
font-family: "楷体";
color: red;
background-color: aqua;
text-align: center;
}
/*显示框*/
#showC{
border: 2px black solid;
width: 90%;
height: 80px;
float: left;
margin-left: 5%;
}
#showC input{
width: 99%;
height: 93%;
font-size: 25px;
text-align: right;
background-color: white;
}
/*按钮*/
.divButton{
border: 0px red solid;
width: 100%;
height: 500px;
/*margin: auto;*/
margin-top: 160px;
}
.divButton input{
width: 86px;
height: 86px;
font-size: 25px;
margin-left: 10px;
margin-top: 10px;
border-radius: 20px;
font-family: 楷体;
color: blue;
background-color: powderblue;
}
.divButton input:hover{
background-color: yellow;
}
</style>
<script>
var pointFlag = true;
//按键事件
function clickNum(num){
var value = document.getElementById("result").value;
if(value == 0){
document.getElementById("result").value = num;
}else {
document.getElementById("result").value = document.getElementById("result").value + num;
}
clickFlag = true;
}
//运算符重复输入
function clickDouble(click){
var value = document.getElementById("result").value;
if(value.length > 0 && value.charCodeAt(value.length-1) >= 48 && value.charCodeAt(value.length-1) <= 57){
document.getElementById("result").value = document.getElementById("result").value + click;
pointFlag = true;
}
}
//小数点重复
function pointDouble(point){
var value = document.getElementById("result").value;
if(pointFlag && value.charCodeAt(value.length-1) >= 48 && value.charCodeAt(value.length-1) <= 57){
document.getElementById("result").value = document.getElementById("result").value + point;
pointFlag = false;
}
}
//计算方法
function calculate(){
var value = document.getElementById("result").value;
document.getElementById("result").value = eval(value);
}
//清除内容
function clearTxt(){
var value = document.getElementById("result").value;
document.getElementById("result").value = 0;
}
//内容退格
function backupTxt(){
var value = document.getElementById("result").value;
document.getElementById("result").value = value.substring(0,value.length-1);
}
//+/-切换
function clickChange(){
var value = document.getElementById("result").value;
if(value.length > 0 && value != 0){
var code = value.charCodeAt(0);
if(code == 45){
document.getElementById("result").value = value.substring(1);
}else {
document.getElementById("result").value = '-' + value;
}
}
}
window.onload = function(){
var date = new Date();
document.getElementById("time").value = "星期" + date.getDay() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
</script>
</head>
<body>
<div id="outC">
<div id="topC">
<div class="topC_1">DeLi</div>
<div id="showTimer">
<input type="text" id="time" value="" />
</div>
</div>
<div id="showC">
<input type="text" id="result" value="0"/>
</div>
<div class="divButton">
<input type="button" id="" value="清空" onclick="clearTxt()" />
<input type="button" id="" value="+/-" onclick="clickChange()" />
<input type="button" id="" value="%" onclick="clickDouble('%')" />
<input type="button" id="" value="/" onclick="clickDouble('/')" /><br />
<input type="button" id="" value="7" onclick="clickNum(7)" />
<input type="button" id="" value="8" onclick="clickNum(8)" />
<input type="button" id="" value="9" onclick="clickNum(9)" />
<input type="button" id="" value="*" onclick="clickDouble('*')" /><br />
<input type="button" id="" value="4" onclick="clickNum(4)" />
<input type="button" id="" value="5" onclick="clickNum(5)" />
<input type="button" id="" value="6" onclick="clickNum(6)" />
<input type="button" id="" value="-" onclick="clickDouble('-')" /><br />
<input type="button" id="" value="1" onclick="clickNum(1)" />
<input type="button" id="" value="2" onclick="clickNum(2)" />
<input type="button" id="" value="3" onclick="clickNum(3)" />
<input type="button" id="" value="+" onclick="clickDouble('+')" /><br />
<input type="button" id="" value="0" onclick="clickNum(0)" />
<input type="button" id="" value="退格" onclick="backupTxt()" />
<input type="button" id="" value="." onclick="pointDouble('.')" />
<input type="button" id="" value="=" onclick="calculate()" />
</div>
</div>
</body>
</html>
