<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复杂计算器</title>
<style type="text/css">
body{
margin: 0;
}
ul{
padding: 0;
margin: 4px 2px;
list-style-type: none;
}
form{
margin: 100px auto;
}
#calcu-screen{
width: 200px;
height: 100px;
border: 1px red solid;
box-sizing: border-box;
margin: 100px auto 0;
}
#calcu-btn{
width: 200px;
height: 250px;
border: 1px black solid;
box-sizing: border-box;
margin: 0 auto;
}
ul li{
width: 48px;
height: 48px;
text-align: center;
margin: 0px;
float: left;
background-color: black;
border:1px white solid;
box-sizing: border-box;
color: white;
font-size: 20px;
line-height: 48px;
}
#screen{
width: 200px;
height: 100px;
box-sizing: border-box;
}
</style>
</head>
<body>
<form action="" name="calculator">
<div id="calcu-screen">
<input type="text" name="numScreen" id="screen" οnfοcus="this.blur();"
placeholder="0">
</div>
<div id="calcu-btn">
<ul id="list">
<li id="re">C</li>
<li>+/-</li>
<li>%</li>
<li class="aa">/</li>
<li value="7" class="num">7</li>
<li value="8" class="num">8</li>
<li value="9" class="num">9</li>
<li class="aa" value="e">*</li>
<li value="4" class="num">4</li>
<li value="5" class="num">5</li>
<li value="6" class="num">6</li>
<li class="aa">-</li>
<li value="1" class="num">1</li>
<li value="2" class="num">2</li>
<li value="3" class="num">3</li>
<li class="aa">+</li>
<li value="0" class="num" style="width:96px;">0</li>
<li οnclick="dot()">.</li>
<li id="req">=</li>
</ul>
</div>
</form>
</body>
var nums = document.getElementsByClassName('num');
var screen = document.querySelector("#screen");
var re = document.querySelector("#re");
var aas = document.getElementsByClassName('aa');
var req = document.querySelector("#req");
console.log(nums);
console.log(aas);
var operate=0;
var index = 0;
var resu1,resu2,sign;
//清0
re.onclick = function(){
screen.value = "";
}
//输入第一个值
for (var i = 0; i < nums.length; i++) {
nums[i].onclick = function(){
for (var i = 0; i < nums.length; i++) {
nums[i].style.backgroundColor="";
}
this.style.backgroundColor = "red";
screen.value+= this.value;
}
}
//运算符 效果：点击运算符的时候 将第一次输入的数值用resu1这个变量存储起来，sign把当前的那个运算符存储起来，并且要清屏
for (var i = 0; i < aas.length; i++) {
aas[i].onclick = function(){
for (var i = 0; i < aas.length; i++) {
this.style.backgroundColor="red";
}
resu1 = screen.value;
sign = this.innerHTML;
screen.value="";
console.log(resu1);
console.log(sign);
}
}
//输入第二个
for (var i = 0; i < nums.length; i++) {
nums[i].onclick = function(){
// nums[i].index = i;
for (var i = 0; i < nums.length; i++) {
nums[i].style.backgroundColor="";
}
this.style.backgroundColor = "red";
screen.value+= this.value;
}
}
//输出 效果:点击"="的时候调用函数 将第二次输入的数值用resu2存储起来 并且进入switch判断 找到相符合的运算符进行计算 然后在屏幕上输出结果
req.onclick = function(){
resu2=screen.value;
console.log(resu2);
req.style.backgroundColor="red";
switch(sign){
case "*":
screen.value=resu1*resu2;
// req.value=Number(resu1)+Number(resu2);
break;
case "/":
screen.value=resu1/resu2;
// req.value=Number(resu1)+Number(resu2);
break;
case "-":
screen.value=resu1-resu2;
// req.value=Number(resu1)+Number(resu2);
break;
case "+":
screen.value=Number(resu1)+Number(resu2);
// req.value=Number(resu1)+Number(resu2);
break;
}
}
//小数点判断
function dot(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0; i<=str.length;i++){ //判断是否已经有一个点号
if(str.substr(i,1)==".") return false; //如果有则不再插入
}
str=str + ".";
document.calculator.numScreen.value=str;
operate=0;
}
</script>
<html>
<head>
<meta charset="utf-8">
<title>复杂计算器</title>
<style type="text/css">
body{
margin: 0;
}
ul{
padding: 0;
margin: 4px 2px;
list-style-type: none;
}
form{
margin: 100px auto;
}
#calcu-screen{
width: 200px;
height: 100px;
border: 1px red solid;
box-sizing: border-box;
margin: 100px auto 0;
}
#calcu-btn{
width: 200px;
height: 250px;
border: 1px black solid;
box-sizing: border-box;
margin: 0 auto;
}
ul li{
width: 48px;
height: 48px;
text-align: center;
margin: 0px;
float: left;
background-color: black;
border:1px white solid;
box-sizing: border-box;
color: white;
font-size: 20px;
line-height: 48px;
}
#screen{
width: 200px;
height: 100px;
box-sizing: border-box;
}
</style>
</head>
<body>
<form action="" name="calculator">
<div id="calcu-screen">
<input type="text" name="numScreen" id="screen" οnfοcus="this.blur();"
placeholder="0">
</div>
<div id="calcu-btn">
<ul id="list">
<li id="re">C</li>
<li>+/-</li>
<li>%</li>
<li class="aa">/</li>
<li value="7" class="num">7</li>
<li value="8" class="num">8</li>
<li value="9" class="num">9</li>
<li class="aa" value="e">*</li>
<li value="4" class="num">4</li>
<li value="5" class="num">5</li>
<li value="6" class="num">6</li>
<li class="aa">-</li>
<li value="1" class="num">1</li>
<li value="2" class="num">2</li>
<li value="3" class="num">3</li>
<li class="aa">+</li>
<li value="0" class="num" style="width:96px;">0</li>
<li οnclick="dot()">.</li>
<li id="req">=</li>
</ul>
</div>
</form>
</body>
<script type="text/javascript">
//依次获取元素
var list = document.querySelector("#list");var nums = document.getElementsByClassName('num');
var screen = document.querySelector("#screen");
var re = document.querySelector("#re");
var aas = document.getElementsByClassName('aa');
var req = document.querySelector("#req");
console.log(nums);
console.log(aas);
var operate=0;
var index = 0;
var resu1,resu2,sign;
//清0
re.onclick = function(){
screen.value = "";
}
//输入第一个值
for (var i = 0; i < nums.length; i++) {
nums[i].onclick = function(){
for (var i = 0; i < nums.length; i++) {
nums[i].style.backgroundColor="";
}
this.style.backgroundColor = "red";
screen.value+= this.value;
}
}
//运算符 效果：点击运算符的时候 将第一次输入的数值用resu1这个变量存储起来，sign把当前的那个运算符存储起来，并且要清屏
for (var i = 0; i < aas.length; i++) {
aas[i].onclick = function(){
for (var i = 0; i < aas.length; i++) {
this.style.backgroundColor="red";
}
resu1 = screen.value;
sign = this.innerHTML;
screen.value="";
console.log(resu1);
console.log(sign);
}
}
//输入第二个
for (var i = 0; i < nums.length; i++) {
nums[i].onclick = function(){
// nums[i].index = i;
for (var i = 0; i < nums.length; i++) {
nums[i].style.backgroundColor="";
}
this.style.backgroundColor = "red";
screen.value+= this.value;
}
}
//输出 效果:点击"="的时候调用函数 将第二次输入的数值用resu2存储起来 并且进入switch判断 找到相符合的运算符进行计算 然后在屏幕上输出结果
req.onclick = function(){
resu2=screen.value;
console.log(resu2);
req.style.backgroundColor="red";
switch(sign){
case "*":
screen.value=resu1*resu2;
// req.value=Number(resu1)+Number(resu2);
break;
case "/":
screen.value=resu1/resu2;
// req.value=Number(resu1)+Number(resu2);
break;
case "-":
screen.value=resu1-resu2;
// req.value=Number(resu1)+Number(resu2);
break;
case "+":
screen.value=Number(resu1)+Number(resu2);
// req.value=Number(resu1)+Number(resu2);
break;
}
}
//小数点判断
function dot(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0; i<=str.length;i++){ //判断是否已经有一个点号
if(str.substr(i,1)==".") return false; //如果有则不再插入
}
str=str + ".";
document.calculator.numScreen.value=str;
operate=0;
}
</script>
</html>
取余还有模运算没有写，，，大家学会方法就好啦
1556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
