<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding: 0;list-style:none;}
div{
height: 514px;
400px;
border-radius: 20px;
margin:0 auto;
margin-top: 100px;
background-color: rgb(255,123,17);
}
input{
height: 80px;
340px;
float: left;
font-size: 20px;
border-radius: 20px;
margin-bottom: 15px;
text-align: right;
line-height: 80px;
margin-left:30px;
margin-top: 15px;
background-color: rgb(109,189,240);
}
ul li{
float: left;
text-align: center;
line-height: 70px;
font-size: 40px;
margin-top:8px;
margin-left: 24px;
color: rgb(255,255,255);
cursor: pointer;
height: 70px;
70px;
border-radius: 20px;
background-color: rgb(215,25,2);
}
ul li:nth-last-child(2){ 164px; position: relative;bottom: 80px;}
ul li:nth-last-child(1){ position: relative;bottom: 80px;}
ul li:nth-last-child(3){height: 150px; line-height: 150px;}
ul li:nth-child(3){line-height: 90px;}
</style>
</head>
<body>
<div>
<input type="text" value="">
<ul>
<li>C</li>
<li>/</li>
<li>*</li>
<li>←</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>-</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>+</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>=</li>
<li>0</li>
<li>.</li>
</ul>
</div>
<script>
window.onload=function(){
var all_li=document.querySelectorAll('ul li');
var put=document.querySelector('input');
var fu=['+','-','*','/','.'];
for(var i=0;i<all_li.length;i++){
all_li[i].onclick=function(){
switch (this.innerHTML) {
case 'C':
put.value=''
break;
case '←':
put.value=put.value.slice(0,-1);
break;
case '=':
put.value=eval(put.value);
break;
case '.':
var pu=put.value.split(/[+-*/]/g);
if(put.value.substr(-1)==''){
console.log(111)
return;
}else if(pu[pu.length-1].indexOf('.')>-1){
return;
}else{
put.value+=this.innerHTML;
}
break;
case '*':
case '/':
if(put.value.substr(-1)==''||fu.indexOf(put.value.substr(-1))>-1){
return;
}else {
put.value+=this.innerHTML;
}
break;
case '+':
case '-':
if(fu.indexOf(put.value.substr(-1))>-1){
console.log(222);
return;
}else {
put.value+=this.innerHTML;
}
break;
default:
put.value+=this.innerHTML;
break;
}
};
};
};
</script>
</body>
</html>
计算器优化
你好！如果你有什么更好的建议或意见，请在评论区留言。感谢你的阅读！