小清新jquery数学计算器

TAG：计算器　时间：2020-07-05　浏览：
一款风格小清新的网页版数学计算器，运用jquery和一个JS封装插件来实现，只是实现基础的数学运算，因此本代码仅是演示jquery的使用，以及数学计算算法和界面的布局等，需要网页计算器的可关注本代码哦。

<!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>
<title>jQuery计算器插件</title>
<style>
@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;}
</style>
<script type="text/javascript">
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; //重置输入数字
	}
	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; //空格字符
	}
	else
	{
		input.value+=num;
	}
}
function operator(type)
{
	switch (type)
	{
		case "clear":
				input.value="0";
				_string.length=0;
				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')}
}
}
</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">×2</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>

小清新jquery数学计算器

相关特效代码

网页特效下载区