登录  /  注册
博主信息
博文 9
粉丝 0
评论 0
访问量 8588
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
小计算器
廖磊的博客
原创
826人浏览过
<!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>


本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学