Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 小计算器
Blogger Information
Blog 9
fans 0
comment 0
visits 8794
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
小计算器
廖磊的博客
Original
845 people have browsed it
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算机</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1{
            width: 222px;
            height:270px;
            background: #F8F8F8;
            margin: 100px auto;
            border: 1px solid #9acfea;
        }
        .div2{
            width:200px;
            height:35px;
            background: #ffffff;
            margin:10px;
            text-align: right;
            line-height:35px;
            padding-right:5px;
            font-size: 18px;
        }
        table{
            margin: 10px;
        }
        td {
            box-sizing: border-box;
            border: solid 3px rgba(0,0,0,0);
            background: #F0F0F0;
        }
        td:visited{
            background:#2aabd2;
        }
        button{
            width: 100%;
            height: 100%;
        }
        #result{
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"><input type="text" id="result" style="border: solid 0px white"></div>
        <div >
            <table border="0" width="200px" height="200px">
                <tr><td colspan="2"><button onclick="rem()">C</button></td><td ><button onclick="del()">←</button></td><td ><button  onclick="b(this)" value="+">+</button></td></tr>
                <tr><td><button id="a7" onclick="b(this)" value="7">7</button></td><td><button id="a8" onclick="b(this)" value="8">8</button></td><td><button id="a9" onclick="b(this)" value="9">9</button></td><td ><button onclick="b(this)" value="-">-</button></td></tr>
                <tr><td><button id="a4" onclick="b(this)" value="4">4</button></td><td><button id="a5" onclick="b(this)" value="5">5</button></td><td><button id="a6" onclick="b(this)" value="6">6</button></td><td ><button onclick="b(this)" value="*">×</button></td></tr>
                <tr><td><button id="a1" onclick="b(this)" value="1">1</button></td><td><button id="a2" onclick="b(this)" value="2">2</button></td><td><button id="a3" onclick="b(this)" value="3">3</button></td><td ><button onclick="b(this)" value="/">÷</button></td></tr>
                <tr><td><button id="a0" onclick="b(this)" value="0">0</button></td><td><button onclick="b(this)" value=".">.</button></td><td colspan="2"><button  id="bt" onclick="op()">=</button></td></tr>
            </table>
        </div>
    </div>
<script>

    var str;
    function b(elelm) {
       str=document.getElementById("result");
       str.value=str.value+elelm.value;
    }
    function op() {
        var pat1=/[-]?[0-9]*\.?[0-9]+/;
        var pat2=/\d[\+\-\*/][-]?[0-9]*\.?[0-9]+/;
        var pat3=/[+/-][0-9]*\.?[0-9]+/;
        var pat6=/[*/\/][0-9]*\.?[0-9]+/;
        var pat4=/\d[\+\-\*/]/;
        var pat5=/[\+\-\*/]/;
        var pat7=/[\+\-\*/][\+\*/]/;
        var pat8=/[\+\-\*/][\-]/;
       var pat9=/[\+\-\*/][\-][0-9]*[\.]?[0-9]+/;

        var p1=pat5.exec(pat4.exec(str.value));//运算符
 var p2=pat7.exec(str.value);
        var nos2=str.value.search(pat7);
        var nos3=str.value.search(pat8);
        if (nos2!==-1){
            alert("输入有误请重新输入！");
            str.value = "";
            return;
        }else {

            //第二个数为负数的情况
 if (nos3!==-1){
                if (p1[0]==="+" || p1[0]==="-"){
                    var a1=pat1.exec(str.value);//第一个数字
 var a2=pat9.exec(str.value);//第一个数字的最后一位、运算符和第二个数字
 var a3=pat3.exec(a2);//第二个数字

 str.value=((10*parseFloat(a1))+10*parseFloat(a3))/10;
                }else {
                    if (p1[0]==="*" || p1[0]==="/"){
                        var a1=pat1.exec(str.value);//第一个数字
 var a2=pat9.exec(str.value);//第一个数字的最后一位、运算符和第二个数字
 var a3=pat1.exec(a2);//第二个数字
 if (p1[0]==="*"){
                            str.value=(1000*parseFloat(a1)*(1000*parseFloat(a3)))/1000000;
                        }else{
                            str.value=(1000*parseFloat(a1)/(1000*parseFloat(a3)));
                        }

                    }
                }
            }else{

                 if (p1[0]==="+" || p1[0]==="-"){
                    var a1=pat1.exec(str.value);//第一个数字
 var a2=pat2.exec(str.value);//第一个数字的最后一位、运算符和第二个数字
 var a3=pat3.exec(a2);//第二个数字
 str.value=((1000*parseFloat(a1))+1000*parseFloat(a3))/1000;
        }else {
                     if (p1[0]==="*" || p1[0]==="/"){
                        var a1=pat1.exec(str.value);//第一个数字
 var a2=pat6.exec(str.value);//第一个数字的最后一位、运算符和第二个数字
 var a3=pat1.exec(a2);//第二个数字
 if (p1[0]==="*"){
                                    str.value=(1000*parseFloat(a1)*(1000*parseFloat(a3)))/1000000;
                                }else{
                                 if (a3==0){
                                     str.value="除数不能为0";
                                     return;
                                 }
                             str.value=(1000*parseFloat(a1)/(1000*parseFloat(a3)));
                             }
                     }
                 }
            }
        }
    }
    function del() {
        str.value = str.value.replace(/.$/,'');
    }
    function rem() {
        str.value = "";
    }
</script>
</body>
</html>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post