使用div写一个计算机
Posted Nobility
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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(‘/‘)">÷</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 {
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)
}
//未完成
以上是关于使用div写一个计算机的主要内容，如果未能解决你的问题，请参考以下文章
js或是jquery代码怎么写让图片在一个div里实现由远到近的渐变效果，即图片慢慢放大，超出div的部分不显示
[Codeforces Round #522 (Div. 2, based on Technocup 2019 Elimination Round 3)][C. Playing Piano](代码片段