JavaScript实现简单的计算器
计算器有加减乘除、退格、清空的基本功能
新手来找虐哈哈哈.
用到了事件委托，还有字符串的操作方法
JavaScript代码
//获得输入的键值
var show = document.querySelector(".screen input");
var keys = document.querySelector(".keys");
//console.log(show.value)
//给每个按钮添加事件
keys.addEventListener("click",function(e){
e=e||window.event;
var target = e.target||e.srcElement;
e.preventDefault();
if(target.value=='C'){
target.onclick=clearBoth();
}else if(target.value=='←'){
target.onclick=delString();
}else if(target.value=='='){
target.onclick=getResult(target);
}else if(target.nodeName.toUpperCase()=='DIV'){ //取消了点击非按钮部分显示undefined
return -1;
}else{
target.onclick=connectStr(target);
}
},false);
//运算
function getResult(target){
var isAdd = show.value.indexOf('+');
var isSub = show.value.indexOf('-');
var isMul = show.value.indexOf('×');
var isDivi = show.value.indexOf('÷');
if(isAdd>=0){
var result=Number(show.value.split('+')[0])+Number(show.value.split('+')[1]);
show.value=result;
}else if(isSub>=0){
var result=Number(show.value.split('-')[0])-Number(show.value.split('-')[1]);
show.value=result;
}else if(isMul>=0){
var result=Number(show.value.split('×')[0])*Number(show.value.split('×')[1]);
show.value=result;
}else if(isDivi>=0){
var result=Number(show.value.split('÷')[0])/Number(show.value.split('÷')[1]);
show.value=result;
}else{
return;
}
}
//清空
function clearBoth(){
show.value="0";
}
//退格
function delString(){
var str= String(show.value);
if(str.length==0){
return -1;
}else if(str.length==1){
show.value='0';
}
else{
show.value = str.substr(0,str.length-1);
console.log(str.length);
}
return str;
}
function connectStr(target){
if(show.value=='0'){
show.value="";
show.value=show.value+target.value;
}else{
show.value=show.value+target.value;
}
}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<link rel="stylesheet" type="text/css" href="css/calculator.css">
</head>
<body>
<div class="container">
<div class="screen">
<input type="text" value="0" autocomplete="none">
</div>
<div class="keys">
<!--第一排-->
<input type="button" value="7" class="button">
<input type="button" value="8" class="button">
<input type="button" value="9" class="button">
<input type="button" value="←" class="button">
<input type="button" value="C" class="button">
<!--第二排-->
<input type="button" value="4" class="button">
<input type="button" value="5" class="button">
<input type="button" value="6" class="button">
<input type="button" value="×" class="button">
<input type="button" value="÷" class="button">
<!--第三排-->
<input type="button" value="1" class="button">
<input type="button" value="2" class="button">
<input type="button" value="3" class="button">
<input type="button" value="+" class="button">
<input type="button" value="-" class="button">
<!--第四排-->
<input type="button" value="0" class="button zero">
<input type="button" value="." class="button zero">
<input type="button" value="=" class="button result">
</div>
</div>
<script src="js/calculator.js" type="text/javascript"></script>
</body>
</html>css代码
*{ margin: 0; padding:0; }
body{ background-color:rgba(97,144,193,1); }
.container{ width: 500px; height: 500px; background-color: rgba(125,189,10,1); margin: 50px auto; border-radius: 5px; box-shadow: 2px 4px 8px rgba(0,0,0,.5); position: relative; }
.container>.screen{ width: 460px; height: 60px; margin: 0 auto; padding-top: 30px; }
.container>.screen input{ width: 440px; height: 50px; padding:0 10px; border: none; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.8) inset; text-align: right; font-size: 21px; color: #000; }
.container>.keys{ width: 460px; height:410px; margin: 0 auto; }
.container>.keys input{ width: 80px; height: 50px; float: left; margin-top: 40px; margin-left: 10px; border:none; background-color: rgba(255,255,255,1); border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.5); cursor: pointer; font-size: 20px; line-height: 20px; }
.container>.keys>.result{ width: 260px; }希望有大神们看看提点建议哈哈哈~ 思路是不是对的？还可以进行怎样的优化？最后想请教大家怎么实现多个符号的运算？