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('/')">÷</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('*')">×</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 {
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;
98px;
height: 64px;
opacity: 0.5;
font-size: 18px;
}
.M div {
margin-left: 10px;
margin-top: 16px;
float: left;
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)
}
//未完成