简单计算器（JavaScript实现）
功能比较简单，还需完善。
效果：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/calculator.css" />
<script type="text/javascript" src="js/calculator.js" ></script>
</head>
<body>
<div class="box">
<input type="text" value="0" id="show"/>
<div class="first">
<button class="bcolorr">1</button> <button class="bcolorr">2</button> <button class="bcolorr">3</button> <button>/</button>
</div>
<div class="first">
<button class="bcolorr">4</button> <button class="bcolorr">5</button> <button class="bcolorr">6</button> <button>x</button>
</div>
<div class="first">
<button class="bcolorr">7</button> <button class="bcolorr">8</button> <button class="bcolorr">9</button> <button>-</button>
</div>
<div class="first">
<button class="bcolorr">0</button> <button>C</button> <button>=</button> <button>+</button>
</div>
</div>
</body>
</html>
CSS部分：
.box{
border: 2px solid gray;
width: 450px;
height: 600px;
margin: auto auto;
border-radius: 10px;
}
input{
height: 200px;
width: 420px;
background-color: darkseagreen;
margin:auto auto;
margin-top: 10px;
position: relative;
top: 0px;
left: 15px;
font-size: 35px;
}
button{
background-color: orange;
padding: 20px 30px 20px 30px;
margin: 10px 30px 10px 0px;
font-size: 20px;
}
.first{
position: relative;
top: 0px;
left: 24px;
}
.bcolorr{
background-color: gray;
}
button:hover{
cursor: pointer;
box-shadow: 5px 5px 2px black;
}
button:active {
box-shadow: 0 0 5px 5px dodgerblue;
}
JavaScript部分：
window.onload=function(){
var btn=document.getElementsByTagName('button');
var needClear=false;
var oshow=document.getElementById("show");
var number1="";
var operator="";
Array.prototype.forEach.call(btn,function(el){
console.log(el);/*el表示每一次访问的元素是谁,遍历所有按钮*/
el.onclick=doinput;
});
function doinput(){
var html=this.innerHTML;/*获取点击按钮的内容*/
switch(html)
{
case "=":
oshow.value=calc(number1*1,oshow.value*1,operator);
needClear=false;
break;
case "C":oshow.value=0;
needClear=false;//todo//
break;
case "+"://todo//
case "-"://todo//
case "x"://todo//
case "/"://todo//
if(number1.length!=0)
{
oshow.value=calc(number1*1,oshow.value*1,operator);
}
operator=html;//保存运算符
number1=oshow.value;//保存第一个运算数字
needClear=false;
break;
default://todo needClear bool值为true时执行
if(needClear){
oshow.value+=html;//拼接
}
else{
oshow.value=html;//替换
needClear=true;//替换完成后又变为true，然后执行拼接
}
break;
}
}
function calc(number1,number2,operator){
var result=0;//结果
switch (operator)
{
case "+":result=number1+number2;
break;
case "-":result=number1-number2;
break;
case "x":result=number1*number2;
break;
case "/":result=number1/number2;
break;
default:result=number2;
break;
}
return result;
}
}
网友评论