使用div写一个计算机 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="css/JSQ_DIV_CSS.css">
 7         <script src="js/JSQ_DIC_JS.js" type="text/javascript" charset="UTF-8"></script>
 8     </head>
 9     <body onkeyup="key(event)">
10         <div class="box01">
11             <div class="a01">
12                 <div class="a001">Calculator</div>
13                 <div class="a002" id="screen"></div>
14                 <div class="M">
15                     <div id="MC">MC</div>
16                     <div>MR</div>
17                     <div>M+</div>
18                     <div>M-</div>
19                     <div>MC</div>
20                     <div>MC</div>
21                 </div>
22             </div>
23             <div class="b01">
24                 <div>%</div>
25                 <div>√</div>
26                 <div onclick="Sqr()">x²</div>
27                 <div>1/X</div>
28                 <div onclick="ClearAll()">CE</div>
29                 <div onclick="ClearAll()">C</div>
30                 <div onclick="DELLast()">DEL</div>
31                 <div class="JJCC" onclick="Clac('/')">&divide;</div>
32                 <div class="sz01" onclick="ClickNum('7')">7</div>
33                 <div class="sz01" onclick="ClickNum('8')">8</div>
34                 <div class="sz01" onclick="ClickNum('9')">9</div>
35                 <div class="JJCC" onclick="Clac('*')">&times;</div>
36                 <div class="sz01" onclick="ClickNum('4')">4</div>
37                 <div class="sz01" onclick="ClickNum('5')">5</div>
38                 <div class="sz01" onclick="ClickNum('6')">6</div>
39                 <div class="JJCC" onclick="Clac('-')">-</div>
40                 <div class="sz01" onclick="ClickNum('1')">1</div>
41                 <div class="sz01" onclick="ClickNum('2')">2</div>
42                 <div class="sz01" onclick="ClickNum('3')">3</div>
43                 <div class="JJCC" onclick="Clac('+')">+</div>
44                 <div onclick="Clac('+/-')">±</div>
45                 <div class="sz01" onclick="ClickNum('0')">0</div>
46                 <div onclick="Clac('.')">.</div>
47                 <div class="JJCC" onclick="result()">=</div>
48             </div>
49         </div>
50         
51     </body>
52 </html>
body {
	background-image: url(../img/5.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

*{
	user-select: none;
}

.box01 {
	width: 400px;
	height: 562px;
	background-color: #DCDCDC;
	opacity: 0.9;
	margin: 0 auto;
	border: 2px solid #DCDCDC;
	box-shadow: 4px 4px 30px #A9A9A9;
}

.b01 {
	cursor: pointer;
	
}

.b01 .sz01 {
	font-weight: bolder;
	font-size: 24px;
	background-color: white;
	opacity:2.0;

}

.b01 .JJCC {
	/* font-weight: bolder; */
	font-size: 28px;
}

.b01 .JJCC:hover {
	background-color: #00BFFF;
	opacity: 2.0;
}

.b01 .JJCC:active {
	background-color: #1E90FF;
	opacity: 2.0;

}

.a01 {
	height: 160px;
}

.b01 div {
	float: left;
	margin-top: 2px;
	margin-left: 2px;
	line-height: 64px;
	text-align: center;
	background-color: #f5f5f5;
	color: #000000;
	width: 98px;
	height: 64px;
	opacity: 0.5;
	font-size: 18px;
}

.M div {
	margin-left: 10px;
	margin-top: 16px;
	float: left;
	width: 14%;
	text-align: center;
	font-size: 10px;
}

.b01 div:hover {
	background-color: #D3D3D3;
	opacity: 0.5;
}

.b01 div:active {
	background-color: #A9A9A9;
}

.a001 {
	padding: 5px 0 0 20px;
}

.a002 {
	height: 63px;
	font-size: 40px;
	padding: 48px 18px 0;
	text-align: right;
}

　　

//document.getElementById("screen").textContent = "0";
var ClacAll;
var isInputSymbol = false;

function ClickNum(number) {
	if (ClacAll != null) {
		ClacAll="";
	} else {
		var result = document.getElementById("screen").innerHTML;
		if (result.length < 16) {
			document.getElementById("screen").innerHTML += number;
			isInputSymbol = false;
		} else {
			alert("请输入20以内是文字");
		}
	}
}

function ClearAll() {
	document.getElementById("screen").innerHTML = "";
}

function DELLast() {
	var result = document.getElementById("screen").innerHTML;
	var newStr = result.substring(0, result.length - 1);
	document.getElementById("screen").innerHTML = newStr;
}

function result() {
	var result = document.getElementById("screen").innerHTML;
	var ResultALL = eval(ClacAll.concat(result));
	document.getElementById("screen").innerHTML = ResultALL;

	// else{
	// 	alert("您输入的表达式有误！");
	// }
}

function Sqr() {
	var result = document.getElementById("screen").innerHTML;
	ClearAll();
	document.getElementById("screen").innerHTML = Math.pow(parseInt(result), 2);
}
// function key(e){
// 	if(e.keyCode>=48 && e.keyCode<=57){
// 		ClickNum();
// 	}
// }
function Clac(c) {
	var num1 = document.getElementById("screen").innerHTML;
	ClearAll();
	ClacAll = num1 + c;
	//alert(ClacAll)
}

//未完成

　　

posted @ 2019-12-27 11:05  Nobility  阅读(175)  评论(0)    收藏  举报