js实现计算器，附思考过程。

最新推荐文章于 2024-04-25 09:54:19 发布

returnadsss

最新推荐文章于 2024-04-25 09:54:19 发布

阅读量1.3k

点赞数 3

分类专栏： js+css+html 文章标签： javascript css3 css js

本文链接：https://blog.csdn.net/returnadsss/article/details/122515447

版权

js+css+html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天的目的是做一个功能最全的计算器，按计划进行！
界面用之前构思好的代码直接复用。
先理清思路：
1、数字（包括00）11个，（严格来说应该如果在一个运算结果出来后输入数据，则忽略运算结果，重新开始计算，这可以定义一个flag变量，但这里略去）。
2、运算符（包括%）5个，如果第一个输入的是运算符，则除了-号其它全部忽略，如果运算符前面别的合法表达式，则直接将
其计算出来，如果运算符前面是别的运算符，则用该运算符覆盖前面的运算符。
3、操作符（包括退格，等号，清零，小数点）4个，如果在等号前是一个运算符，则自动忽略该运算符
过程略过，看注释即可，代码非常简单。
为了易于理解，css和js直接附在一个页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        .wrapper{   
    background-color: lightgray;
    width: 300px;
    height: 340px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -150px;
    box-shadow: 0 0 1px 1px white inset;
}
.name,.welcome{
    float: left;
}
.version,.reply{
    float: right;
}
html{
    background-color: #778899;
}
.logo,.foot{
    margin: 10px;
}
.logo::after,.foot::after{
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
.cal{
    margin: 10px;
    width: 272px;
}
#input{
    height: 20px;
    width: 100%;
}
.keys{
    position: relative;
    width: 278px;
    height: 210px;
    margin: 10px;
    border: 1px solid white;
}
.button{
    width: 40px;
    height: 20px;
    margin: 5px;
    text-align: center;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid #868686;
    border-bottom: 1px solid #868686;
}
.button:active{
    border-right:1px solid white; 
    border-bottom: 1px solid white;
    border-top: 1px solid #868686;
    border-left: 1px solid #868686;
}
table{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
}
    </style>

</head>
<body>
    <div class="wrapper">
        <div class="logo">
            <span class="name">计算器</span>
            <span class="version">@linzhan v1.0</span>
        </div> 
        <div class="cal">
            <input type="text" id="input" style="text-align: right;ime-mode:disabled"/>
        </div>
        <div class="keys">
        <table>
        <tr>
            <td><input type="button" class="button seven" value="7" onclick="figure(7)"/></td>
            <td><input type="button" class="button eight" value="8" onclick="figure(8)"/></td>
            <td><input type="button" class="button nine" value="9" onclick="figure(9)"/></td>
            <td><input type="button" class="button back" value="Back"/></td>
            <td><input type="button" class="button clear" value="C"/></td>
        </tr>
        <tr>
            <td><input type="button" class="button four" value="4" onclick="figure(4)"/></td>
            <td><input type="button" class="button five" value="5" onclick="figure(5)"/></td>
            <td><input type="button" class="button six" value="6" onclick="figure(6)"/></td>
            <td><input type="button" class="button multiply" value="X"/></td>
            <td><input type="button" class="button divide" value="/"/></td>
        </tr>
        <tr>
            <td><input type="button" class="button one" value="1" onclick="figure(1)"/></td>
            <td><input type="button" class="button two" value="2" onclick="figure(2)"/></td>
            <td><input type="button" class="button three" value="3" onclick="figure(3)"/></td>
            <td><input type="button" class="button add" value="+"/></td>
            <td><input type="button" class="button subtract" value="-"/></td>
        </tr>
        <tr>
            <td><input type="button" class="button zero" value="0" onclick="figure(0)"/></td>
            <td><input type="button" class="button hundred" value="00"/></td>
            <td><input type="button" class="button point" value="."/></td>
            <td><input type="button" class="button remainder" value="%"/></td>
            <td><input type="button" class="button equal" value="="/></td>
        </tr>
        </table> 
        </div>
        <div class="foot">
            <span class="welcome">Javascript计算器</span>
            <span class="reply"><a href="#">反馈</a></span>
        </div>     
    </div>
    <script>
        //let和const是es6推荐使用的。
        let text=document.getElementById("input");
        let equalBtn=document.getElementsByClassName("equal")[0];
        let backBtn=document.getElementsByClassName("back")[0];
        let clearBtn=document.getElementsByClassName("clear")[0];
        let pointBtn=document.getElementsByClassName("point")[0];
        let hundredBtn=document.getElementsByClassName("hundred")[0];
        let addBtn=document.getElementsByClassName("add")[0];
        let subtractBtn=document.getElementsByClassName("subtract")[0];
        let multiplyBtn=document.getElementsByClassName("multiply")[0];
        let divideBtn=document.getElementsByClassName("divide")[0];
        let remainderBtn=document.getElementsByClassName("remainder")[0];
        //只运行一次，所以不使用事件监听器addEventListener        
        /*backBtn.addEventListener("click",back,false);*/
        backBtn.onclick=back;
        equalBtn.onclick=equal;
        pointBtn.onclick=point;
        addBtn.onclick=add;
        subtractBtn.onclick=subtract;
        multiplyBtn.onclick=multiply;
        divideBtn.onclick=divide;
        remainderBtn.onclick=remainder;
        hundredBtn.onclick=function(){
            text.value+="00";
        }
        //禁止键盘输入，引发逻辑错误。
        text.onkeydown=function(event){
                return false;
        }
        function figure(num){
            text.value=(text.value+""+num);
        }
        clearBtn.onclick=function(){
            text.value=null;
            text.focus();            
        }
        function add(){
            try{
                text.value=eval(text.value);
                text.value+="+";
            }catch(err){
                back();
                text.value+="+";
            }
        }
        function subtract(){
            try{
                text.value=eval(text.value);
                text.value+="-";
            }catch(err){
                back();
                text.value+="-";
            }
        }
        function multiply(){
            try{
                text.value=eval(text.value);
                text.value+="*";
            }catch(err){
                back();
                text.value+="*";
            }
        }
        function divide(){
            try{
                text.value=eval(text.value);
                text.value+="/";
            }catch(err){
                back();
                text.value+="/";
            }
        }
        function remainder(){
            try{
                text.value=eval(text.value);
                text.value+="%";
            }catch(err){
                back();
                text.value+="%";
            }
        }
        function equal(){
            try{
                text.value=eval(text.value);
            }catch(err){
                back();
                text.value=eval(text.value);
            }
        }
        function back(){
            text.value=text.value.substring(0,text.value.length-1);
        }
        function point(){
            text.value+=".";
        }
    </script>
</body>
</html>

不足之处是时间所限，没有对切换到中文输入法的输入进行屏蔽，防君子不防小人。提供一个思路：可以通过判断输入的ascii码进行屏蔽中文输入。

returnadsss

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现计算器，附思考过程。

今天的目的是做一个功能最全的计算器，按计划进行！界面用之前构思好的代码直接复用。先理清思路：1、数字（包括00）11个，（严格来说应该如果在一个运算结果出来后输入数据，则忽略运算结果，重新开始计算，这可以定义一个flag变量，但这里略去）。2、运算符（包括%）5个，如果第一个输入的是运算符，则除了-号其它全部忽略，如果运算符前面别的合法表达式，则直接将其计算出来，如果运算符前面是别的运算符，则用该运算符覆盖前面的运算符。3、操作符（包括退格，等号，清零，小数点）4个，如果在等号前是一个运算符，则
复制链接

扫一扫