以下是自治计算机简易版，有一些细节还未处理，但基本功能都已经实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.calculator{
width: 200px;
border: 1px solid #000;
}
.result{
height: 50px;
background-color: #bfe;
line-height: 50px;
font-size: 24px;
text-align: right;
}
/* .btns{
} */
button{
height: 35px;
width: 50px;
float: left;
}
</style>
<script>
window.οnlοad=function(){
var result=document.querySelector("result");
var numbers=document.querySelectorAll('.number');
var operators=document.querySelectorAll('.operators');
var result=document.querySelector('.result');
var ce=document.getElementById("ce");
var c=document.getElementById("c");
var back=document.getElementById("back");
var daoshu=document.getElementById("daoshu");
var pingfang=document.getElementById("pingfang");
var squareroot=document.getElementById("squareroot");
var xiangfanshu=document.getElementById("xiangfanshu");
var dot=document.getElementById("dot");
var equel=document.getElementById("equel");
var displays="";
var flag=1;
var i;
for(i=0;i<numbers.length;i++){
var number=numbers[i];
number.οnclick=function(){
displays+=this.innerHTML;
result.innerHTML=displays;
};
}
for(i=1;i<operators.length;i++){
var operator=operators[i];
operator.οnclick=function(){
displays+=this.innerHTML;
result.innerHTML=displays;
flag=1;
// 使用加减号时打开.的使用
};
}
ce.οnclick=function(){
result.innerHTML=0;
displays="";
};
c.οnclick=function(){
result.innerHTML=0;
displays="";
};
back.οnclick=function(){
displays=result.innerHTML;
displays=displays.substring(0,displays.length-1);
result.innerHTML=displays;
};
daoshu.οnclick=function(){
displays="1/"+displays;
displays=eval(displays);//等于
result.innerHTML=displays;
};
pingfang.οnclick=function(){
displays=displays+"*"+displays;
displays=eval(displays);//等于
result.innerHTML=displays;
};
squareroot.οnclick=function(){
displays=Math.sqrt(displays);
result.innerHTML=displays;
};
xiangfanshu.οnclick=function(){
displays="-1*"+displays;
displays=eval(displays);//等于
result.innerHTML=displays;
};
dot.οnclick=function(){
if(displays==""){
displays+='0.'
result.innerHTML=displays;
}
if(flag){
displays+='.';
result.innerHTML=displays;
}
flag=0;
};
equel.οnclick=function(){
displays=eval(displays);//等于
result.innerHTML=displays;
};
}
</script>
<body>
<div class="calculator">
<div class="result">0</div>
<!-- 计算器 -->
<div class="btns">
<button class="operators">%</button>
<button id="ce">CE</button>
<button id="c">C</button>
<button id="back">BACK</button>
</div>
<div class="btns">
<button id="daoshu">1/X</button>
<button id="pingfang">X^2</button>
<button id="squareroot">√</button>
<button class="operators">/</button>
</div>
<div class="btns">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operators">*</button>
</div>
<div class="btns">
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operators">-</button>
</div>
<div class="btns">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operators">+</button>
</div>
<div class="btns">
<button id="xiangfanshu">+/-</button>
<button class="number">0</button>
<button id="dot">.</button>
<button id="equel">=</button>
</div>
</div>
</body>
</html>
7145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
