资源描述
计算器的逻辑对于新手而言比较复杂！新手学习JavaScript，很多代码重用，有很强的改进空间，不过这很适合新手，注释比较全面(基本上每句代码后都有注释);
首先是js部分(3.js)
var num=0,result=0,numshow="0";
var operate=0; //判断输入状态的标志
var calcul=0; //判断计算状态的标志
var quit=0; //防止重复按键的标志
var zero_pd; //"0"判断防止重复按"0"
var 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= array[array.length-1];
var str3=zero_pd.split(""); //将子字符串拆分成字符
for(i=0;i<str3.length;i++){ //遍历字符
var type= "^-?\\d+$"; //定义类型type，值为判断是否为整数的正则表达式
var re = new RegExp(type); //匹配字符串
if(str3[i]=="."||str3[i].match(re)!=null){ //判断str3中是否存在数字或者"."
document.getElementById("textShow").value += "00"; //文本框(textshow)中加入"00"
splitLastNum(document.calculator.onshow.value); //将值加入累加数并刷新
break;
}
}
}
}
}
//"0"输入
function zero(){
var str1=String(document.calculator.onshow.value); //获取文本框字符串
var str=String(document.calculator.numScreen.value); //获取numshow的值
str=(str!="0") ? ((operate==0) ? str + "0" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
document.calculator.numScreen.value=str; //刷新值
str=str+"0";
operate=0; //重置操作
quit=0;
if(str1 && typeof(str1)!="undefined"){ //判断是否显示框有值
//if(str1 && typeof(str1)!="undefined" && str1!=0){
var array = str1.split(fh_str); //获取最后保留的符号
if(array!=null && array.length > 0){
zero_pd= array[array.length-1]; //获取最后一个子字符串
var str3=zero_pd.split(""); //拆分子字符串
for(i=0;i<str3.length;i++){ //进行遍历
var type= "^-?\\d+$"; //正则判断是不是数字
var re = new RegExp(type);
if(str3[i]=="."||str3[i].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=str2[str2.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-9][0-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;}else{document.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);}else{document.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 < array.length; i++) { //若没有数组
if(array[i].length == 0)
array.splice(i,1);
}
if(array!=null && array.length > 0){ //若有数组
if(array.length>1){
ljs_num = array[array.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;
}else{
ljs_num=end_num;
}
}
}
}
}
其次是html部分(jsq.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>jsq.html</title>
<style type="text/css">
body {
font-size:24px;
font-family:Arial, Georgia, "Times New Roman", Times, serif;
color:#555;
text-align:center;
background-color:#FAFAD2;
}
h6{
margin: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 ul{
padding:0;
margin:10px 28px;
border:#fff 1px solid;
height:auto;
overflow:hidden
}
#calculator li{
list-style:none;
float:left;
width:64px;
height:64px;
margin:10px;
display:inline;
line-height:64px;
font-size:28px;
background-color:#87CEFA;
}
#calculator li.tool{
background-color:#87CEFA;
}
#calculator li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
#calculator li:active{
background-color:#fc0;
cursor:pointer;
}
#calculator li.tool:active{
background-color:#d8e8ff;
cursor:pointer;
}
#calcu-head {
text-align:left;
padding:20px 30px 10px;
}
.screen{
width:400px;
height:24px;
line-height:24px;
padding:8px;
border:#e6e6e6 1px solid;
border-bottom:#f2f2f2 1px solid;
border-right:#f2f2f2 1px solid;
margin:-1px auto;
direction:ltr;
text-align:right;
font-size:32px;
color:#999;
}
.screen1{
width:400px;
height:24px;
line-height:24px;
padding:8px;
border:#e6e6e6 1px solid;
border-bottom:#f2f2f2 1px solid;
border-right:#f2f2f2 1px solid;
margin:2px auto;
direction:ltr;
text-align:right;
font-size:32px;
color:#999;
}
#calcu-foot{
text-align:left;
padding:20px 30px 10px;
height:auto;
overflow:hidden;
}
span#note{
float:left;
width:420px;
height:auto;
overflow:hidden;
color:red;
}
span.welc
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
