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;
}
希望有大神们看看提点建议哈哈哈~ 思路是不是对的?还可以进行怎样的优化?最后想请教大家怎么实现多个符号的运算?