js制作加减乘除计算器代码

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

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

以下是 js制作加减乘除计算器代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js制作加减乘除计算器代码</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
<div class="calBox">	
    <div class="calu">
    	<input type="text" id="text">    	
        <ul class="one clearfix">
            <li class="orange on">开机</li>
            <li class="orange off">关机</li>
            <li class="orange clea">清屏</li>
            <li class="black zheng">+/-</li>
            <li class="black rec">1/x</li>
            <li class="num">7</li>
            <li class="num">8</li>
            <li class="num">9</li>
            <li class="gray oper">/</li>
            <li class="black oper">%</li>
            <li class="num">4</li>
            <li class="num">5</li>
            <li class="num">6</li>
            <li class="gray oper">*</li>
            <li class="black sq">√</li>           
            <!--  -->           
        </ul>
        <div class="clearfix">
            <div class="twoBox fl">
            	<ul class="one fl two">
                    <li class="num">1</li>
                    <li class="num">2</li>
                    <li class="num">3</li>
                    <li class="gray oper">-</li>
                    <li class="zero num">0</li>
                    <li class="num">.</li>
                    <li class="gray oper">+</li>
                </ul>
            </div>
            <ul class="one three clearfix fl">
                <li class="black deng fl">=</li>
            </ul>        
        </div>
    </div>
</div>
<input type="text" id="per" style="display:none">
<input type="text" id="text1" style="display:none">
</body>
</html>

JS代码(zzsc.js):

function findArr(a,c){
	for(var b=0;
	b<a.length;
	b++){
	if(a[b]==c){
	return true}
}
return false}
function getClass(d,f){
	if(document.getElementsByClassName){
	return d.getElementsByClassName(f)}
else{
	var a=[];
	var e=document.getElementsByTagName("*");
	for(var c=0;
	c<e.length;
	c++){
	var b=e[c].className.split(" ");
	if(findArr(b,f)){
	a.push(e[c])}
}
return a}
}
;
	window.onload=function(){
	var aNum=getClass(document,'num');
	var oText=document.getElementById('text');
	var aPer=getClass(document,'oper');
	var oPer=document.getElementById('per');
	var oText1=document.getElementById('text1');
	var oDeng=getClass(document,'deng')[0];
	var oSq=getClass(document,'sq')[0];
	var oRec=getClass(document,'rec')[0];
	var oZheng=getClass(document,'zheng')[0];
	var oOn=getClass(document,'on')[0];
	var oOff=getClass(document,'off')[0];
	var oClea=getClass(document,'clea')[0];
	var bOnOrOffClick=false;
	function fnNum(a){
	var bClear=false;
	oText.value='0'for(var i=0;
	i<aNum.length;
	i++){
	aNum[i].onclick=function(){
	if(!bOnOrOffClick)return;
	if(bClear){
	bClear=false;
}
if(oText.value.indexOf('.')!=-1){
	if(this.innerHTML=='.'){
	return;
}
}
if(oPer.value&&oText.value&&oText1.value==''){
	oText1.value=oText.value;
	oText.value='';
}
var re=/^0\.{
	1}
\d+$/;
	var re1=/^([0]\d+)$/;
	oText.value+=this.innerHTML;
	if(re.test(oText.value)){
	return;
}
if(re1.test(oText.value)){
	oText.value=this.innerHTML;
}
}
//���Ų��ֵ����for(var j=0;
	j<aPer.length;
	j++){
	aPer[j].onclick=function(){
	if(oText.value&&oPer.value&&oText1.value){
	var n=eval(oText1.value+oPer.value+oText.value);
	oText.value=n;
	oText1.value='';
}
oPer.value=this.innerHTML;
}
}
//����Ⱥŵ�ʱ��oDeng.onclick=function(){
	//+-*/
%�����if(oText1.value==''&&oPer.value==''&&oText.value==''){
	return;
}
var n=eval(oText1.value+oPer.value+oText.value);
	oText.value=n;
	oText1.value='';
	oPer.value='';
	bClear=true;
}
//��������ŵ�ʱ��oSq.onclick=function(){
	var m=Math.sqrt(oText.value);
	oText.value=m;
}
//���������ʱ��oRec.onclick=function(){
	var a=1/oText.value;
	if(oText.value=='0'){
	a='������'}
oText.value=a;
}
//�����ŵ�ʱ��oZheng.onclick=function(){
	if(oText.value>0){
	oText.value=-oText.value;
}
else{
	oText.value=-oText.value;
}
}
//������ʱ��oClea.onclick=function(){
	oText.value='0';
	oText1.value='';
	oPer.value='';
}
}
}
//onʱoOn.onclick=function(){
	bOnOrOffClick=true;
	fnNum(bOnOrOffClick);
}
//offʱoOff.onclick=function(){
	bOnOrOffClick=false;
	fnNum(bOnOrOffClick);
	oText.value='';
}
}

CSS代码(zzsc.css):

body,ul{margin:0px;padding:0px;}
body{background:#AF6332}
li{list-style:none;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{content:"";display:block;clear:both}
.clearfix{zoom:1;}
/*����inset���Խ��ⲿ��Ӱ�ĳ��ڲ���Ӱ;��Ҫʵ��������Ӱͬʱ���ڣ����䲢��һ���ö��Ÿ��*/
.calBox{width:460px;padding-bottom:10px;background:#FDFDFD;border-radius:5px;position:absolute;left:50%;top:50%;margin-left:-230px;margin-top:-225px;box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset;background:#F9F9F9;overflow:hidden}
input{width:406px;height:82px;margin:10px 7px 0px;border-radius:5px;border:1px solid #64655F;box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset;-webkit-box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset;outline:none;background:#FCFDEB;text-align:right;font-family:"΢���ź�";font-size:40px;padding:0px 10px;}
ul{}
li{list-style:none;width:74px;height:34px;line-height:34px;text-align:center;font-family:"΢���ź�";border:1px solid #8B8B8B;border-radius:5px;background:url(img/calBg) repeat-x;float:left;margin:12px 6px 0px;}
.one li{height:44px;background:url(calBg1.jpg) repeat-x;line-height:44px;cursor:pointer;}
.one .orange{background:url(calBg2.jpg) repeat-x;border:1px solid #875733;}
.one .black{background:url(calBg3.jpg) repeat-x;border:1px solid #363636;color:#fff;}
.one .gray{background:url(calBg4.jpg) repeat-x;border:1px solid #5F6366;}
.zero{width:160px;}
.one .deng{background:url(calBg5.jpg);height:100px;}
.twoBox{width:353px;overflow:hidden;}
.two{width:358px;}
.calBox .three{margin:0px}
.calu{padding:0px 10px;width:470px;}

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