用JS寫一個計算器

時間 2019-11-10
原文原文鏈接
<!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=gb2312" /><title>JS簡單計算器</title></head><style type="text/css">table{    text-align:center;}input#input{    text-align:right;    background:#fff;    border:1px solid #ccc;    width:150px;}input{    width:150px;    height:30px;}#textfield4{    width:300px;}</style><body><table width="80%" border="1" cellpadding="5" cellspacing="0" bordercolor="#ccc">  <tr>    <td colspan="4" align="right">直觀顯示計算效果：      <input name="textfield1" type="text" id="textfield1" value="0" size="25" maxlength="100" readonly="" />      <span id="fuhao"> </span>      <input name="textfield2" type="text" id="textfield2" size="25" maxlength="100" readonly="" />      <span id="eq"> = </span>      <input name="textfield3" type="text" id="textfield3" size="25" maxlength="100" readonly="" /></td></tr></table><br /><table width="80%" border="1" cellpadding="5" cellspacing="0" bordercolor="#ccc">  <tr>    <td colspan="4" align="right">    通常的計算器顯示效果：      <input id="textfield4" type="text" value="0" size="100" maxlength="100"  readonly=""/></td></tr></table><br /><table width="80%" border="1" cellpadding="5" cellspacing="0" bordercolor="#ccc" id="btn_div">    <tr>    <td width="25%" ><input type="button" name="Submit" value="0" id="zero" /></td>    <td width="25%" ><input type="button" name="Submit2" value="1" id="one"/></td>    <td width="25%" ><input type="button" name="Submit3" value="2" id="two" /></td>    <td width="25%" ><input type="button" name="Submit20" value="刪除" id="del" /></td>  </tr>  <tr>    <td ><input type="button" name="Submit4" value="3" id="three"/></td>    <td ><input type="button" name="Submit5" value="4" id="four"/></td>    <td ><input type="button" name="Submit6" value="5"id="five" /></td>    <td ><input type="button" name="Submit19" value="重置" id="reset"/></td>  </tr>  <tr>    <td ><input type="button" name="Submit7" value="6" id="six"/></td>    <td ><input type="button" name="Submit8" value="7" id="seven"/></td>    <td ><input type="button" name="Submit9" value="8" id="eight"/></td>    <td ><input type="button" name="Submit18" value="." id="dot" /></td>  </tr>    <tr>    <td ><input type="button" name="Submit10" value="9" id="nine"/></td>    <td ><input type="button" name="Submit11" value="+" id="add"/></td>    <td ><input type="button" name="Submit12" value="-" id="sub"/></td>    <td ><input type="button" name="Submit17" value="絕對值"id="abs" /></td>  </tr>  <tr>    <td ><input type="button" name="Submit13" value="%" id="mod"/></td>    <td ><input name="Submit14" type="button" value="×" id="cheng"/></td>    <td ><input type="button" name="Submit15" value="÷" id="chu"/></td>    <td ><input type="button" name="Submit16" value="=" id="deng"/></td>  </tr></table><p>  <script type="text/javascript">    var EventUtil = {//建新對象         addHandler:function(element,type,func){//添加事件            if(element.addEventListener){                element.addEventListener(type,func,false);            }else if(element.attachEvent){                element.attachEvent("on"+ type,func);            }else{                element["on"+ type] = func;            }              },         getEvent:function(event){//獲取Event對象             return event?event:window.event;                  },         getTarget:function(event){//得到事件目標             return event.target || event.srcElement;         },         preventDefault:function(event){//阻止事件的默認行爲            if(event.preventDefault){                return event.preventDefault();//非IE            }else{                event.returnValue = false;//IE            }         },         removeHandler:function(element,type,func){//取消事件            if(element.removeEventListener){                element.removeEventListener(type,func,false);            }else if(element.detachEvent){                element.detachEvent("on"+ type,func);            }else{                element["on"+ type] = null;            }         },         stopPropagation:function(event){//取消事件的冒泡             if(event.stopPropagation){                event.stopPropagation();//非IE            }else{                event.cancelBubble = true;//IE            }         }    };    var input4 = document.getElementById("textfield4"),        input1 = document.getElementById("textfield1"),        input2 = document.getElementById("textfield2"),        input3 = document.getElementById("textfield3"),        f_span = document.getElementById("fuhao"),        fuhao = "",//記錄算數符號        fuhao1 = "",        str1 = "",        str2 = "",        str3 = "",        str5 ="",        clk = 0,//計算次數        reg1 = /^-?[1-9]\d*\.?\d*$/,//除以0開頭的數字的格式        reg2 = /^-?0(?!\d)\.?\d*$/,//以0開頭的小數,0後面不能跟數字，(?!\d)表示0後面不跟數字，可是不佔位，用[^\d]就不行，它不管如何會匹配一個字符0..123也匹配。        reg3 = /^-?0{2,}/,//0出現2次或者更多        reg4 = /^-$/,//負號重複2次或者更多        str4 = false,//判斷計算符號是否被點擊        input4_str="";//input4.value;    var clickNum = function(){         var value = this.value;                if(!str4){//算數符號未點擊，此時輸入的數字賦值給str1            if(/[0-9]|\./.test(value)){//只容許輸入數字和小數點                if(clk == 2){                    str1 = "";//點擊=號後若是直接點擊數字按鈕則清空STR1，str2,從新開始一個新的計算                    str2 = "";                    clk = 0;                }                if(reg1.test(str1+value) || reg2.test(str1 + value)){//判斷輸入的數字格式                    if(!reg3.test(str1 + value )){//不能連續輸入多個0                        str1 += value;//賦值到數值1                        input4.value = str1;                        input1.value = str1;                    }                }            }        }else{//算數符號已點擊,此時賦值給str2            if(/[0-9]|\./.test(value)){                if(reg1.test(str2+value) || reg2.test(str2 + value)){//判斷輸入的數字格式                    if(!reg3.test(str2 + value )){//不能連續輸入多個0                        str2 += value;//賦值到數值1                        input4.value = str2;                        input2.value = str2;                    }                }            }        }        if(value == "絕對值"){            if(input4.value != ""){                str5 = input4.value;                str5 = str5 - 0;                str5 = Math.abs(str5);                input4.value = str5;                input3.value = str5;            }        }        if(/[%+×÷-]/.test(value) && str2 == ""){//判斷輸入的值爲算數符號加減乘除時要作的事            if(str1 != "" && str1 !="-"){//str1不爲空和不是隻有負號的時候                str4 = true;//算數符號已經點擊                //clk=1;                fuhao = value;                fuhao1 = fuhao;                f_span.innerHTML = fuhao1;            }else{                if(reg4.test(str1 + value)){//負號不能輸入屢次                    str1 = value;                    //alert(str1);                    input4.value = str1;//str1容許輸入負號一次                    input1.value = str1;                }            }                    }        if(/[%+×÷-]/.test(value) && str2 != ""){//當str2不爲空的時候，輸入符號就至關於作等號=操做；            if(clk == 0){                //alert(123);                //fuhao1 = value;                str1 = str1 - 0;//轉換爲數字                str2 = str2 - 0;                switch(fuhao1){//判斷輸入的符號執行相應的計算                        case "+":                            input4.value = str1+str2;                            input3.value = str1 + str2;                            break;                        case "-":                            input4.value = str1-str2;                            input3.value = str1-str2;                            break;                        case "×":                            input4.value = str1*str2;                            input3.value = str1*str2;                            break;                        case "÷":                            if(str2 == 0){                                 input4.value = "除數不能爲0";                                break;                            }else{                                input4.value = str1/str2;                                    input3.value = str1/str2;                                break;                            }                        case "%":                            input4.value = str1%str2;                            input3.value = str1%str2;                            break;                                    }                //str1 = input4.value;//把結果賦值給str1，方便繼續計算                //alert(str1);                //input1.value = str1;                str2 = "";//清空str2                input2.value = "";                str4 = false;//設置符號點擊初始化                clk = 1;        }        if(clk == 1 || clk == 2){            str1 = input4.value;//再次計算的時候，把結果賦值給str1            input1.value = str1;            str2 = "";            input2.value = str2;            fuhao1 = value;            f_span.innerHTML = fuhao1;            clk = 0;            str4 = true;        }    }        if(value == "="){ //點擊等號執行                        if(str1 != "" && str2 !=""){//str1與str2不爲空時才執行，不然不執行                str1 = str1 - 0;//轉換爲數字                str2 = str2 - 0;                switch(fuhao1){//判斷輸入的符號執行相應的計算                        case "+":                            input4.value = str1+str2;                            input3.value = str1 + str2;                            break;                        case "-":                            input4.value = str1-str2;                            input3.value = str1-str2;                            break;                        case "×":                            input4.value = str1*str2;                            input3.value = str1*str2;                            break;                        case "÷":                            if(str2 == 0){                                 input4.value = "除數不能爲0";                                break;                            }else{                                input4.value = str1/str2;                                input3.value = str1/str2;                                break;                            }                        case "%":                            input4.value = str1%str2;                            input3.value = str1%str2;                            break;                        }                }                //str1 = input4.value;//把結果賦值給str1，方便繼續計算                //input1.value = str1;                //alert(1);                //str2 = "";//清空str2                str4 = false;//設置符號點擊初始化                clk = 2;                //fuhao = "";        }        if(value == "重置"){            str1 = "";            str2 = "";            str4 = false;            fuhao = "";            input4.value = 0;            clk = 0;            input1.value = "";            input2.value = "";            f_span.innerHTML = "";            input3.value = "";        }        if(value == "刪除"){            if(str1 == ""){                str4 = false;            }            if(fuhao1 =="" && str1!=""){                //alert(12);                str1 += "";                str1 = str1.substring(0,str1.length-1);                input1.value = str1;                input4.value = str1;            }            if(str2 == "" && fuhao1 != ""){                fuhao1 = "";                f_span.innerHTML = fuhao1;                str4 = false;                //alert(str1);            }            if(input3.value == "" && str2 != ""){                //alert(1);                str2 +="";                str2 = str2.substring(0,str2.length-1);                //alert(str2);                input2.value = str2;                input4.value = str2;                str4 = true;            }            if(input3.value != ""){                input3.value = input3.value.substring(0,input3.value.length-1);                    input4.value = input3.value;                        }        }    }    var box = document.getElementById("btn_div");    var inputArr = box.getElementsByTagName("input");    for(i=0;i<inputArr.length;i++){        EventUtil.addHandler(inputArr[i],"click",clickNum);    }</script></p></body></html>  注：源自百度，僅供參考
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。