JS大数计算插件

一款JS大数计算插件，在上下两个输入框里输入需要计算的大数字，选择中间的计算方法，再点击“开始计算”，即可在最下面显示出计算结果、长度、用时等内容。

分类：其它特效难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入计算插件，并设置好页面元素的样式，代码如下：

<script type="text/javascript" src="js/calculator.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0;}
html,body{ width: 100%; height: 100%; background-color: #F7F7F7; font-size: 16px; }
input{ border: none; outline: none; background: none;}
.tit{ width:80%; height: 30px; margin:30px auto 10px; color:#1BAEBD;}
input.text{ width:80%; height:30px; margin:20px auto; display:block; border:1px solid #ccc; background: rgba(255,255,255,0.5); border-radius:5px;}
.aq ,.eq{ width:80%; overflow:hidden; margin:20px auto;}
.aq>input,.eq>input{ width:40px; height:30px; text-align:center; line-height:30px; float:left; border-radius: 5px; font-weight: bold; color:#222; margin-right: 10px; cursor: pointer;}

.eq>input{ width:80px; color:#00FFFF; background: #2E568A;}

p{ width:80%; margin:0 auto; line-height:24px; font-size:14px;}
p.info2 span{font-weight:bold; color:#f00;}
p.info1{ margin:5px auto; color:#006; font-weight:bold;}
p.info0{ margin:5px auto; color:#f00; font-weight:bold;}
</style>

页面的body部分，需设置好计算所需个元素的容器和内容，代码如下：

<div class="tit">想知道你的 身份证号 和 她/他的身份证号 想乘 会出现 5201314 吗？ 来算算吧</div>
<input type="text" class="text" value="16543154315646846546541315646313154641315461321"/>
<div class="aq" id="aq">
	<input type="button" value="加"/>
	<input type="button" value="减"/>
	<input type="button" style="background:#3C6" value="乘"/>
	<input type="button" value="除"/>
	<input type="button" value="次方"/>
</div>
<input type="text" class="text" value="151345463153468745645132154651321543512354546465"/>
<div class="eq">
    <input type="button" id="eq" value="开始计算"/>
</div>
<input type="text" class="text" value=""/>
<p class="info2" id="info2">当前计算结果长度为<span>0</span>位 用时<span>0</span>秒</p>
<p class="info0">话说，9位数是上亿，咳咳！低于900位数的不要找我算！太小！</p>

页面的底部，实例化一个计算并设置好相关的参数，代码如下：

var c=new Calculator();
var aQ=document.getElementById('aq').getElementsByTagName('input');
var textarea=document.getElementsByClassName('text');
var cur=2;
for(var i=0;i<aQ.length;i++){
	aQ[i].index=i;
	aQ[i].onclick=function(){
		aQ[cur].style.background='';
		this.style.background='#3c6';
		cur=this.index;
	}
}
var oInfo2=document.getElementById('info2');
var bOk=false;
var oFix=document.getElementById('fix');
document.getElementById('eq').onclick=function(){
	if(bOk)return;
	bOk=true;
	var time1=new Date().getTime();
	textarea[2].value='正在计算中，请稍等……';
	var a=textarea[0].value;
	var b=textarea[1].value;
	var result;
	switch(cur){
		case 0:
		result=c.plus(a,b);
		break;
		case 1:
		result=c.minus(a,b);
		break;
		case 2:
		result=c.multiply(a,b);
		break;
		case 3:
		result=c.divide(a,b,oFix.value);
		break;
		case 4:
		result=c.power(a,b);
		break;
		case 5:
		textarea[1].value='';
		result=c.sqr(a,oFix.value);
		break;
	}
	textarea[2].value=result;
	var time2=new Date().getTime();
	dtime=((time2-time1)/1000).toFixed(2);
	oInfo2.innerHTML='当前计算结果长度为<span>'+textarea[2].value.length+'</span>位 用时<span>'+dtime+'</span>秒。';
	bOk=false;
}