简单--> js 计算器

来源：互联网发布：火狐淘宝无法登陆编辑：程序博客网时间：2024/06/08 03:29

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator(计算器)</title>
<style type="text/css">
body,div,ul,li{padding: 0;margin: 0;text-align: center;}
.calculaor{width: 300px;height: 340px;background: -webkit-linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.2));padding: 10px;margin: 100px auto;
border-radius: 10px;box-shadow: 2px 2px 10px #333;}
.calculaor input{outline: none;box-sizing: border-box;display: block;width: 250px;margin: 0 auto;height: 40px;background: #fff;line-height: 40px;text-align: left;text-indent: 5px;box-shadow: 2px 2px 5px #eee,-2px -2px 5px #eee,2px -2px 5px #eee,-2px 2px 5px #eee;border-radius: 4px;}
.ul_cal{list-style: none;overflow: hidden;height: 300px;}
.ul_cal li{float: left;background: -webkit-linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.2));height: 30px;line-height: 30px;margin-top: 20px;border-radius: 4px;box-shadow: 2px 2px 5px #666;cursor: pointer;}
.ul_cal .btn{width: 21.7%;margin-right: 3%;}
.ul_cal .big{width: 30%;}
.ul_cal .active{margin-right: 0;}
</style>
</head>
<body>
<div class="main">
<div class="calculaor">
<input type="text" id="input" value="" readonly>
<ul class="ul_cal">
<li id="start" class="btn big">归零</li>
<li id="close" class="btn big">关</li>
<li class="btn big active">C</li>
<li class="btn">9</li>
<li class="btn">8</li>
<li class="btn">7</li>
<li class="btn active">+</li>
<li class="btn">6</li>
<li class="btn">5</li>
<li class="btn">4</li>
<li class="btn active">-</li>
<li class="btn">3</li>
<li class="btn">2</li>
<li class="btn">1</li>
<li class="btn active">*</li>
<li class="btn">.</li>
<li class="btn">0</li>
<li class="btn">=</li>
<li class="btn active">/</li>
</ul>
</div>
</div>
<script type="text/javascript">
var oinput = document.getElementById('input');
var start = document.getElementById('start');
var close = document.getElementById('close');
var li = document.getElementsByTagName('li');
var num1 = '';
var oper = '';
var needClear = false;

function operation(num1,num2,oper){
var result = 0;
switch(oper){
case '+' :
result = parseFloat(num1) + parseFloat(num2);
break;

case '-' :
result = parseFloat(num1) - parseFloat(num2);
break;

case '*' :
result = parseFloat(num1) * parseFloat(num2);
break;

case '/' :
if(num2 != 0){
result = parseFloat(num1) / parseFloat(num2);
}else{
result = '被除数不能为0'
}
break;
}
return result;
}
function liBtn(ok){
for(var i=0;i<li.length;i++){
if(ok == 1){
li[i].onmousedown = doIput;
}else{
li[i].onmousedown = '';
}
}
}

function doIput(){
var inputCon = this.innerHTML.replace(' ','');
console.log(inputCon);
switch(inputCon){
case '=' :
oinput.value = operation(num1,oinput.value,oper);
num1 = '';
oper = '';
needClear = true;
break;
case '+' :
case '-' :
case '*' :
case '/' :
if(num1.length != 0){
oinput.value = operation(num1,oinput.value,oper);
}

oper = inputCon;
num1 = oinput.value;
needClear = true;
break;
case '.' :

if(oinput.value != 0){
var o_ = oinput.value.indexOf('.');
if(o_ == -1){
oinput.value +='.';
}
console.log(oinput.value);
}
break;
case 'C' :
var cValue = oinput.value;
oinput.value = cValue.substr(0,cValue.length-1);
break;
default:
if(needClear){
oinput.value=inputCon;
needClear=false;
}
else{
oinput.value=parseFloat(oinput.value+inputCon);
}
break;
}
}

start.onclick = function(){
oinput.value = '0';
oinput.focus();
liBtn(1);
}
close.onclick = function(){
oinput.value = '';
liBtn(2);
}
</script>
</body>
</html>

0 0