白色简洁样式计算器JS代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是白色简洁样式计算器JS代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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/js.js"></script>
</head>
<body>
<br><br><br><br>
<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>

JS代码(js.js):

// JavaScript Documentdocument.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.eventif (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')}
}
}

CSS代码(css.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{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:0px 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;}

附件:下载该文件资源,减少时间成本(增值服务)