界面白色简洁，代码实现计算器功能，基本的加减乘除及平方、开根号等算法功 能。
效果图
1️⃣：HTML部分源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>白色简洁样式计算器JS代码 </title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="calcuator">
<input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />
<div id="btn-list">
<div onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">C</div>
<div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue">+/-</div>
<div onclick="operator('percent')" class=" btn-30 btn-radius color-blue">%</div>
<div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">←</div>
<div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">7</div>
<div onclick="typetoinput('8')" class=" btn-30 btn-radius">8</div>
<div onclick="typetoinput('9')" class=" btn-30 btn-radius">9</div>
<div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14">+</div>
<div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14">-</div>
<div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">4</div>
<div onclick="typetoinput('5')" class=" btn-30 btn-radius">5</div>
<div onclick="typetoinput('6')" class=" btn-30 btn-radius">6</div>
<div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">×</div>
<div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12">÷</div>
<div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">1</div>
<div onclick="typetoinput('2')" class=" btn-30 btn-radius">2</div>
<div onclick="typetoinput('3')" class=" btn-30 btn-radius">3</div>
<div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">ײ</div>
<div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">√</div>
<div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">0</div>
<div onclick="typetoinput('.')" class=" btn-30 btn-radius">.</div>
<div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14">=</div>
</div>
</div>
</body>
</html>
2️⃣CSS部分源码：
@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div{text-align:left}
a img{border:0}
body{color:#333;text-align:center;font:12px "微软雅黑";}
ul, ol, li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
.clear{height:0;overflow:hidden;clear:both}
/* calcuator */
#calcuator{width:200px;height:245px;padding:10px;border:1px solid #e5e5e5;background:#f8f8f8;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow:0px 0px 10px #f2f2f2;-moz-box-shadow:0px 0px 10px #f2f2f2;-webkit-box-shadow:0px 0px 10px #f2f2f2;margin:40px auto 0 auto;}
#calcuator #input-box{margin:0;width:187px;padding:9px 5px;height:14px;border:1px solid #e5e5e5;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;background:#FFF;text-align:right;line-height:14px;font-size:12px;font-family:Verdana, Geneva, sans-serif;color:#666;outline:none; text-transform:uppercase;}
#calcuator #btn-list{width:200px;overflow:hidden;}
#calcuator #btn-list .btn-radius{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;border:1px solid #e5e5e5;background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb));background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1);line-height:29px;text-align:center;text-shadow:0px 1px 1px #FFF;font-weight:bold;font-family:Verdana, Geneva, sans-serif;color:#666;float:left;margin-left:11px;margin-top:11px;font-size:12px;cursor:pointer;}
#calcuator #btn-list .btn-radius:active{background:#ffffff;}
#calcuator #btn-list .clear-marginleft{margin-left:0;}
#calcuator #btn-list .font-14{font-size:14px;}
#calcuator #btn-list .color-red{color:#ff5050}
#calcuator #btn-list .color-blue{color:#00b4ff}
#calcuator #btn-list .btn-30{width:29px;height:29px;}
#calcuator #btn-list .btn-70{width:70px;height:29px;}
3️⃣JS部分源码：
// JavaScript Document
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
var _string=new Array();
var _type;
function typetoinput(num)
{
input=document.getElementById("input-box");
if(input.name=="type")
{
input.value=" ";
input.name=" ";
}
if(num!="."&&input.value[0]==0&&input.value[1]!=".")
{
input.value=num; //Reset input num
}
else if(num=="."&&input.value.indexOf(".")>-1)
{
input.value=input.value; //Only one point allow input
}
else if(input.value=="Infinity"||input.value=="NaN")
{
input.value="";
input.value+=num; //Splicing string
}
else
{
input.value+=num;
}
}
function operator(type)
{
switch (type)
{
case "clear":
input.value="0";
_string.length=0;
/*document.getElementById("ccc").innerHTML="";
for(i=0;i<_string.length;i++)
{
document.getElementById("ccc").innerHTML+=_string[i]+" "
}*/
break;
case "backspace":
if(checknum(input.value)!=0)
{
input.value=input.value.replace(/.$/,'');
if(input.value=="")
{
input.value="0";
}
}
break;
case "opposite":
if(checknum(input.value)!=0)
{
input.value=-input.value;
}
break;
case "percent":
if(checknum(input.value)!=0)
{
input.value=input.value/100;
}
break;
case "pow":
if(checknum(input.value)!=0)
{
input.value=Math.pow(input.value,2);
}
break;
case "sqrt":
if(checknum(input.value)!=0)
{
input.value=Math.sqrt(input.value);
}
break;
case "plus":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="plus"
input.value="+";
input.name="type";
}
break;
case "minus":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="minus"
input.value="-";
input.name="type";
}
break;
case "multiply":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="multiply"
input.value="×";
input.name="type";
}
break;
case "divide":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="divide"
input.value="÷";
input.name="type";
}
break;
case "result":
if(checknum(input.value)!=0)
{
_string.push(input.value);
if(parseInt(_string.length)%2!=0)
{
_string.push(_string[_string.length-2])
}
if(_type=="plus")
{
input.value=parseFloat(result(_string)[0])+parseFloat(result(_string)[1]);
input.name="type"
}
else if(_type=="minus")
{
input.value=parseFloat(result(_string)[0])-parseFloat(result(_string)[1]);
input.name="type"
}
else if(_type=="multiply")
{
input.value=parseFloat(result(_string)[0])*parseFloat(result(_string)[1]);
input.name="type"
}
else if(_type=="divide")
{
input.value=parseFloat(result(_string)[0])/parseFloat(result(_string)[1]);
input.name="type"
}
break;
}
}
}
function result(value)
{
var result=new Array;
if(value.length%2==0)
{
result.push((value[value.length-2]));
result.push((value[value.length-1]));
return (result);
}
else
{
result.push((value[value.length-1]))
result.push((value[value.length-2]))
return (result);
}
}
function checknum(inputvalue)
{
if(inputvalue=="+"||inputvalue=="-"||inputvalue=="×"||inputvalue=="÷"||input.value=="0")
{
return 0;
}
}
window.document.onkeydown = disableRefresh;
function disableRefresh(evt){
evt = (evt) ? evt : window.event
if (evt.keyCode)
{
if(evt.keyCode == 13){operator('result')}
else if(evt.keyCode == 8){input.focus();window.event.returnValue = false;operator('backspace')}
else if(evt.keyCode == 27){operator('clear')}
else if(evt.keyCode == 48){typetoinput('0')}
else if(evt.keyCode == 49){typetoinput('1')}
else if(evt.keyCode == 50){typetoinput('2')}
else if(evt.keyCode == 51){typetoinput('3')}
else if(evt.keyCode == 52){typetoinput('4')}
else if(evt.keyCode == 53){typetoinput('5')}
else if(evt.keyCode == 54){typetoinput('6')}
else if(evt.keyCode == 55){typetoinput('7')}
else if(evt.keyCode == 56){typetoinput('8')}
else if(evt.keyCode == 57){typetoinput('9')}
else if(evt.keyCode == 96){typetoinput('0')}
else if(evt.keyCode == 97){typetoinput('1')}
else if(evt.keyCode == 98){typetoinput('2')}
else if(evt.keyCode == 99){typetoinput('3')}
else if(evt.keyCode == 100){typetoinput('4')}
else if(evt.keyCode == 101){typetoinput('5')}
else if(evt.keyCode == 102){typetoinput('6')}
else if(evt.keyCode == 103){typetoinput('7')}
else if(evt.keyCode == 104){typetoinput('8')}
else if(evt.keyCode == 105){typetoinput('9')}
else if(evt.keyCode == 110){typetoinput('.')}
else if(evt.keyCode == 106){operator('multiply')}
else if(evt.keyCode == 107){operator('plus')}
else if(evt.keyCode == 111){operator('divide')}
else if(evt.keyCode == 109){operator('minus')}
}
}
以上代码直接COPY就可以使用
文件存放
CSS.CSS
css.css
script.js
script.js
好了以上就完成了···如果对你有帮助的同学们 可以点赞关注我谢谢
注意：本文归作者所有，未经作者允许，不得转载
