html+css+js制作一个简易计算器
程序员文章站
2022-04-20 23:50:06
...
功能：
加、减、乘、除、取余、四舍五入、取倒数、清零、删除
界面：
代码：
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="shortcut icon" href="image/calculator.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/calculator.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function(){
//获取输入框元素
var res=$('.result');
//获取结果显示框
var sum=$('.sum');
var resval=0;
var sumval=0;
var operator=-1;
var jon=['+','_','×',''];
//求10的幂函数
function funm(n){
if(n==0){
return 1
}
return funm(n-1)*10
}
//AC清除按钮
$('.dump').on('click',function(){
res.val('0');
resval=0;
sum.val('');
sumber=0;
operator=-1;
});
//C清楚按钮
$('.clear').on('click',function(){
if(resval!='0'){
resval=resval.slice(0,resval.length-1);
res.val(resval);
}
})
//数字按钮
$(".number").on('click',function(){
//如果当前输入框数字为0或前一次输入为等号时
if(operator==0){
operator=-1;
res.val('0');
resval='';
}
if(resval=="0"){
res.val('0');
resval='';
}
resval=resval+$(this).html();
res.val(resval);
});
//小数点
$('.spot').on('click',function(){
//遍历输入框数字，检查是否有小数点
for(var i=0;i<resval.length;i++){
if(resval[i]=="."){
return false;
}
}
if(operator==0){
operator=1;
res.val('0')
resval=res.val();
}
resval=resval+$(this).html();
res.val(resval);
});
//运算符
$('.oper').on('click',function(){
if(operator != 0){
switch(operator){
case 0:
resval=Number(sumval)+Number(resval);
break;
case 1:
resval=Number(sumval)+Number(resval);
break;
case 2:
resval=Number(sumval)-Number(resval);
break;
case 3:
resval=Number(sumval)*Number(resval);
break;
case 4:
resval=Number(sumval)/Number(resval);
break;
case 5:
resval=Number(sumval)%Number(resval);
break;
}
}
operator=Number($(this).attr('operator'));
sumval=resval;
sum.val(resval+jon[operator-1]);
resval=0;
res.val('');
})
//等于
$('.equal').on('click',function(){
switch(operator){
case 0:
sum.val(sumval+'+'+resval);
resval=Number(sumval)+Number(resval);
res.val(resval);
operator=0;
break;
case 1:
sum.val(sumval+'+'+resval);
resval=Number(sumval)+Number(resval);
res.val(resval);
operator=0;
break;
case 2:
sum.val(sumval+'-'+resval);
resval=Number(sumval)-Number(resval);
res.val(resval);
operator=0;
break;
case 3:
sum.val(sumval+'×'+resval);
resval=Number(sumval)*Number(resval);
res.val(resval);
operator=0;
break;
case 4:
sum.val(sumval+'/'+resval);
resval=Number(sumval)/Number(resval);
res.val(resval);
operator=0;
break;
case 5:
sum.val(sumval+'%'+resval);
resval=Number(sumval)%Number(resval);
res.val(resval);
operator=0;
break;
case 10:
sum.val("sqrt"+sumval);
resval=Math.sqrt(Number(sumval));
res.val(resval);
operator=0;
break;
case 11:
sum.val(sumval+'^2');
resval=Number(sumval)*Number(sumval);
res.val(resval);
operator=0;
break;
case 12:
sum.val("round"+sumval);
resval=Math.round(Number(sumval));
res.val(resval);
operator=0;
break;
case 13:
sum.val("1/"+sumval);
resval=1/Number(sumval);
res.val(resval);
operator=0;
break;
}
});
});
</script>
</head>
<body>
<div class="calculator" id="calculator">
<div id="screen" class="reveal">
<input type="button" name="" class="sum" >
<input type="text" readonly="true" name="" value="0" class="result">
</div>
<div class="button">
<ul>
<li >
<button class="dump" >C</button>
<button class="clear">←</button>
<button class="oper" operator="5">%</button>
<button class="oper" operator="4">/</button>
</li>
<li>
<button class="oper" operator="11">^</button>
<button class="oper" operator="10">sqrt</button>
<button class="oper" operator="3">×</button>
<button class="oper" operator="2">-</button>
</li>
<li>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="oper" operator="1">+</button>
</li>
<li>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="oper" operator="12" style="font-size: 30px">round</button>
</li>
<li>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="oper" operator="13" style="font-size: 30px">1/x</button>
</li>
<li>
<button class="number" style="width:200px;">0</button>
<button class="spot">.</button>
<button class="equal" operator="0">=</button>
</li>
</ul>
</div>
</div>
</body>
</html>
css文件：
body{
background-image: url("../image/interlaced.png");
background-size: cover;
background-repeat: no-repeat;
}
.calculator{
border: 10px solid #111111;
width:500px;
height: 840px;
margin: 100px auto;
border-radius: 25px;
background-color: #111111;
}
.reveal{
margin-top: 50px;
width: 420px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color:grey;
}
.reveal>input{
height:50px;
line-height: 50px;
font-size:50px;
color:#ffffff;
background-color:grey;
text-align: right;
border: none;
width: 420px;
margin-bottom: 0px;
}
.button>ul>li>button{
height:93px;
width:93px;
border:none;
border-radius:43px;
margin:5px ;
color:#ffffff;
background-color:#585252;
font-size:35px;
outline: none;
}
.button>ul li:first-child>button {
margin-top: 50px;
background:#D6D0CE;
color:black;
}
.button>ul li button:last-child{
background:#F09C10;
color:#ffffff;
}
.button>ul>li>button:hover{
background-color: gray;
}
.button>ul li button:last-child:hover{
background:#fcd000;
}
其他功能可在此基础添加。