JavaScript计算器(包含累计与显示功能).doc

计算器的逻辑对于新手而言比较复杂！新手学习JavaScript，很多代码重用，有很强的改进空间，不过这很适合新手，注释比较全面(基本上每句代码后都有注释); 首先是js部分(3.js)var num=0,result=0,numshow=0; var operate=0; /判断输入状态的标志 var calcul=0; /判断计算状态的标志 var quit=0; /防止重复按键的标志 var zero_pd; /0判断防止重复按0var end_num = undefined; /保留最后一个出现的值var ljs_num; /累加数var fh_str; /最后的 符号/数字的输入function command(num) var str=String(document.calculator.numScreen.value); /获得当前显示数据 var str1=String(document.calculator.onshow.value); str=(str!=0) ? (operate=0) ? str : ) : ; /如果当前值不是0，且状态为0，则返回当前值，否则返回空值; str=str + String(num); /给当前值追加字符 document.calculator.numScreen.value=str; /刷新显示 operate=0; /重置输入状态 quit=0; /重置防止重复按键的标志 document.getElementById(textShow).value += num; /写入显示框textShow splitLastNum(document.calculator.onshow.value); /用于更新累加数(ljs_num) /双00的输入function dzero() var str1=String(document.calculator.onshow.value); /获取显示框的值 var str=String(document.calculator.numScreen.value); /获取当前(numshow)显示的值 str=(str!=0) ? (operate=0) ? str + 00 : 0) : 0; /如果当前值不是0，且状态为0，则返回当str+00，否则返回0; document.calculator.numScreen.value=str; /更新numshow的值 str=str+00; /刷新显示 operate=0; /重置操作 quit=0; /重置按键操作 if(str1 & typeof(str1)!=undefined & str1!=0) /判断显示栏是否有值 var array = str1.split(fh_str); /用最后保留的符号拆分成数组 if(array!=null & array.length 0) /取数组的最后一个子字符串 zero_pd= arrayarray.length-1; var str3=zero_pd.split(); /将子字符串拆分成字符 for(i=0;i 0) zero_pd= arrayarray.length-1; /获取最后一个子字符串 var str3=zero_pd.split(); /拆分子字符串 for(i=0;istr3.length;i+) /进行遍历 var type= -?d+$; /正则判断是不是数字 var re = new RegExp(type); if(str3i=.|str3i.match(re)!=null) /是数字和. document.getElementById(textShow).value += 0; /textshow+0 splitLastNum(document.calculator.onshow.value); break; /.输入function dot() var str=String(document.calculator.numScreen.value); str=(str!=0) ? (operate=0) ? str : 0) : 0; /如果当前值不是0，且状态为0，则返回当前值，否则返回0; for(i=0; i=str.length;i+) /判断是否已经有一个点号 if(str.substr(i,1)=.) return false; /如果有则不再插入 str=str + .; /更新数据 document.calculator.numScreen.value=str; operate=0; /重置操作 var str1=String(document.calculator.onshow.value); /获取显示框的值 if(str1 & typeof(str1)!=undefined & str1!=) /判断显示框是否有值 var str2=str1.split(); /将str1拆分为若干字符 var str3=str2str2.length-1; /获取最后一个字符 var type= -?d+$; /数字的正则表达式 var re = new RegExp(type); /匹配 if(str3.match(re)!=null) /匹配结果不为空 document.getElementById(textShow).value += .; /显示框输入. else document.getElementById(textShow).value += 0.; /显示框输入0. else if(str1=) /str1为空 document.getElementById(textShow).value += 0.; /显示框输入0. /退格符号function del() var str1=String(document.calculator.onshow.value); /获取显示框的值 var str2=str1.substr(str1.length-1,1); /取出显示框最后一个字符 / var type = /0-9*1-90-9*$/; /正整数的正则表达式 var type= -?d+$; /整数的正则表达式 var re = new RegExp(type); /匹配 if(str2.match(re)!=null) /匹配值不为空 var str=String(document.calculator.numScreen.value); /获取numshow的值 str=(str!=0) ? str : ; /三目运算， str=str.substr(0,str.length-1); /获取原字符串除最后一个字符的所有字符 str=(str!=) ? str : 0; /三目运算 str1=str1.substr(0,str1.length-1); /获取原字符串除最后一位的所有字符 document.calculator.numScreen.value=str; /更新显示 document.calculator.onshow.value=str1; else document.getElementById(note).innerHTML=该操作不能退格！; setTimeout(clearnote,4000) /提示 /清除数据(重置所有值与操作)function clearscreen() num=0; result=0; numshow=0; ljs_num=0; fh_str=; end_num=undefined; document.calculator.numScreen.value=0; document.calculator.onshow.value=; /加法运算function plus() if(yn() calculate(); /调用计算函数 operate=1; /更改输入状态 calcul=1; /更改计算状态为加 fh_str = +; /符号 document.getElementById(textShow).value += +; /显示框添加+ /减法运算function minus() if(yn() calculate(); /调用计算函数 fh_str = -; operate=1; calcul=2; document.getElementById(textShow).value += -;/乘法运算function times() /乘法 if(yn() calculate(); /调用计算函数 fh_str = *; operate=1; calcul=3; document.getElementById(textShow).value += *; /除法运算function divide() /除法 if(yn() calculate(); /调用计算函数 fh_str = /; operate=1; calcul=4; document.getElementById(textShow).value += /; /求余运算function persent() /求余 if(yn() calculate(); /调用计算函数 fh_str = %; operate=1; calcul=5; document.getElementById(textShow).value += %; /等号function equal() calculate(); /等于 operate=1; end_num=num; num=0; result=0; numshow=0; document.calculator.onshow.value=; /计算function calculate() numshow=Number(document.calculator.numScreen.value); if(num!=0 & quit!=1) /判断前一个运算数是否为零以及防重复按键的状态 switch(calcul) /判断要输入状态 case 1:result=num+numshow;break; /计算+ case 2:result=num-numshow;break; /计算- case 3:result=num*numshow;break; /计算* case 4:if(numshow!=0)result=num/numshow;elsedocument.getElementById(note).innerHTML=被除数不能为零！; setTimeout(clearnote,4000) break; case 5:result=num%numshow;break; /计算% quit=1; /避免重复按键 else if(end_num !=undefined) result=end_num; else result=numshow; if(ljs_num & typeof(ljs_num)!=undefined) / if(ljs_num & typeof(ljs_num)!=undefined & ljs_num!=0) switch(fh_str) /判断要输入状态 case +:result=Number(ljs_num)+end_num;break; /计算+ case -:result=end_num-Number(ljs_num);break; /计算- case *:result=Number(ljs_num)*end_num;break; case /:if(numshow!=0)result=end_num/Number(ljs_num);elsedocument.getElementById(note).innerHTML=被除数不能为零！; setTimeout(clearnote,4000) break; case %:document.getElementById(note).innerHTML=不能进行连续模运算！; setTimeout(clearnote,4000) break; numshow=String(result); document.calculator.numScreen.value=numshow; num=result; /存储当前值 /提示function clearnote() document.getElementById(note).innerHTML=; /判断符号输入function yn() var str1=String(document.calculator.onshow.value); /获取显示框的值 var str2=str1.substr(str1.length-1); /取最后一位字符 var type= -?d+$; /整数的正则表达式 var re = new RegExp(type); /匹配if(str2.match(re)!=null|str2=.) /匹配结果不为空或者为.var quit=0; /重置数据 numshow=0; ljs_num=0; fh_str=; end_num=undefined; if(str2=.) /若为. str1=str1.substr(0,str1.length-1); /退格 document.calculator.onshow.value=str1; /更新显示框的值 document.calculator.onshow.value=str1; /更新显示框的值 return true; else if(str2=) /若为空 end_num=(end_num=undefined)? 0:end_num; /三目运算给end_num赋值 document.calculator.onshow.value=end_num; /给显示框赋值 return false; else str1=str1.substr(0,str1.length-1); /取除最后一位的所有字符串 document.calculator.onshow.value=str1; /赋值 return false; /累加数的确定function splitLastNum(value)if(value & typeof(value)!=undefined & value!=0) /判断显示框是否有值var array = value.split(fh_str); /通过最后的符号拆分显示框字符串为数组 for(var i = 0; i 0) /若有数组 if(array.length1) ljs_num = arrayarray.length - 1; /取最后一个 else var str1=String(document.calculator.onshow.value); /赋值给显示框 var str2=str1.charAt(0); /去最后一位字符 var type= -?d+$; /整数的正则表达式 var re = new RegExp(type); if(str2.match(re)!=null) /若匹配值不为空ljs_num=0;elseljs_num=end_num; 其次是html部分(jsq.html)jsq.htmlbody font-size:24px;font-family:Arial, Georgia, Times New Roman, Times, serif;color:#555;text-align:center;background-color:#FAFAD2;h6margin:0;font-size:24px;#calculator width:480px;height:auto;overflow:hidden;margin:10px auto;border:#fff 2px solid;padding-bottom:20px;background-color:#ADD8E6;#calculator div clear:both;#calculator ulpadding:0;margin:10px 28px;border:#fff 1px solid;height:auto;overflow:hidden#calculator lilist-style:none;float:left;width:64px;height:64px;margin:10px;display:inline;line-height:64px;font-size:28px;background-color:#87CEFA;#calculator li.toolbackground-color:#87CEFA;#calculator li:hoverbackground-color:#f9f9f9;cursor:pointer;#calculator li:activebackground-color:#fc0;cursor:pointer;#calculator li.tool