计算器

来源：互联网发布：软件可靠性方法编辑：程序博客网时间：2024/05/10 19:26
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            margin:0px;            padding:0px;        }        body{            text-align: center;            margin-top: 50px;        }        .zt{            border: 1px rgba(128, 128, 128, 0.23) solid;            background-color: #d9e4f1;            width: 200px;            height: 300px;            margin: 0px auto;        }        #js{            border:1px lightgray solid;            width:190px;            height:65px;            margin: 5px auto;        }        #sz{            width:185px;            height:30px;            margin: 0px auto;            text-align: right;        }        #result{            text-align: right;            width:185px;            height:30px;            margin: 0px auto;        }        #key #clear{            width:80px;            height:35px;            margin:7px 10px 5px 5px;        }        #key #del{            width:80px;            height:35px;        }        #key button{            width:40px;            height:35px;            margin:3px 4px 5px 5px;            background-color: #eff4f9;            border:1px lightgray solid;        }        #key button:hover{            background-color: lightyellow;        }    </style>    <script type="text/javascript">        window.onload=function () {            initJQ();        }        var  resultObj;        var szObj;        var flag1=false;        var o='';        var qianRs;        function initJQ() {            resultObj=document.querySelector("#result");            szObj=document.querySelector("#sz");            var btns=document.querySelectorAll("button");            for (i=0;i<btns.length;i++){                var btn=btns.item(i);                switch (btn.innerHTML){                    case 'c':                        btn.onclick=function () {                            resultObj.innerHTML="0";                        }                        break;                    case 'x':                        btn.onclick=function () {                            resultObj.innerHTML=resultObj.innerHTML.substr(0,resultObj.innerHTML.length-1);                            if(resultObj.innerHTML.length==0){                                resultObj.innerHTML=0;                            }                        }                        break;                    case '.':                        btn.onclick=function () {                            if(resultObj.innerHTML.indexOf('.')==-1){                                resultObj.innerHTML+=this.innerHTML;                            }                        };                        break;                    case '=':                        btn.onclick=function () {                            szObj.innerHTML="";                            jisuan();                            qianRs=0;                            o="";                        }                        break;                    case '+':                    case '-':                    case '/':                    case '*':                        btn.onclick=function () {                            if(!flag1){                                szObj.innerHTML+=resultObj.innerHTML+this.innerHTML;                                jisuan();                                qianRs=resultObj.innerHTML;                                o=this.innerHTML;                                flag1=true;                            }                        };                        break;                    default:                        btn.onclick=function () {                            //resultObj.innerHTML+=this.innerHTML;                            if(flag1){                                resultObj.innerHTML=0;                                flag1=false;                            }                            resultObj.innerHTML=parseFloat(resultObj.innerHTML+this.innerHTML);                        }                }            }        }        function jisuan() {            if(qianRs&&o.length>0){                switch (o){                    case '+':                        qianRs = parseFloat(qianRs)+parseFloat(resultObj.innerHTML);                        break;                    case '-':                        qianRs = parseFloat(qianRs)-parseFloat(resultObj.innerHTML);                        break;                    case '*':                        qianRs = parseFloat(qianRs)*parseFloat(resultObj.innerHTML);                        break;                    case '/':                        qianRs = parseFloat(qianRs)/parseFloat(resultObj.innerHTML);                        break;                }                resultObj.innerHTML=qianRs;            }        }    </script></head><body><div class="zt">    <div id="js">        <div id="sz"></div>        <div id="result">0</div>    </div>    <div id="key">        <p><button >c</button><button>x</button></p>        <p><button >7</button><button >8</button><button>9</button><button>/</button></p>        <p><button >4</button><button >5</button><button >6</button><button>*</button></p>        <p><button >1</button><button >2</button><button >3</button><button>-</button></p>        <p><button>.</button><button >0</button><button>=</button><button>+</button></p>    </div></div></body></html>
阅读全文
0 0