用Javascript写简单计算器

最新推荐文章于 2022-06-02 19:35:39 发布

amyhyn

最新推荐文章于 2022-06-02 19:35:39 发布

阅读量1.5k

点赞数 1

分类专栏： javascripts事件文章标签： javascript 计算器

javascripts事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用JavaScript写简单计算器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            width: 70px;
            height: 70px;
            border: 1px solid silver;
        }

        .btn, .btn_click {
            width: 100%;
            height: 100%;
            font-size: x-large;
        }

        .txt {
            width: 99%;
            height: 100%;
            font-size: xx-large;
            text-align: right;
            outline: none;
        }
    </style>
</head>
<body>
//样式
<table>
    <tr>
        <td colspan="4"><input class="txt" disabled type="text"/></td>
    </tr>
    <tr>
        <td colspan="2" style="height: 30px"><input class="btn_click" type="button" value="AC"/></td>
        <td colspan="2" style="height: 30px"><input class="btn_click" type="button" value="DEL"/></td>
    </tr>
    <tr>
        <td><input class="btn" type="button" value="7"/></td>
        <td><input class="btn" type="button" value="8"/></td>
        <td><input class="btn" type="button" value="9"/></td>
        <td><input class="btn" type="button" value="*"/></td>
    </tr>
    <tr>
        <td><input class="btn" type="button" value="4"/></td>
        <td><input class="btn" type="button" value="5"/></td>
        <td><input class="btn" type="button" value="6"/></td>
        <td><input class="btn" type="button" value="/"/></td>
    </tr>
    <tr>
        <td><input class="btn" type="button" value="1"/></td>
        <td><input class="btn" type="button" value="2"/></td>
        <td><input class="btn" type="button" value="3"/></td>
        <td><input class="btn" type="button" value="-"/></td>
    </tr>
    <tr>
        <td><input class="btn" type="button" value="0"/></td>
        <td><input class="btn" type="button" value="."/></td>
        <td><input class="btn" type="button" value="+"/></td>
        <td><input class="btn" type="button" value="="/></td>
    </tr>
</table>
<script>
    /*在网页加载时  给按钮添加点击事件*/
    window.onload = function () {
        //定义数组  来接收用户按的数字和计算符号
        var way_res = [];
        //获取按钮对象
        var btn_txt = document.getElementsByClassName("btn");
        //获取屏幕元素
        var txt = document.getElementsByClassName("txt")[0];
        //获取清空按钮和退格按钮
        var btn_way = document.getElementsByClassName("btn_click");
        for (var i = 0; i < btn_way.length; i++) {
            btn_way[i].onclick = function () {
                //判断按钮
                if (this.value == "AC") {
                    way_res = [];
                    txt.value = "";
                }
                else {
                    /* substr() 截断字符串 1.从那个位置开始   2.截取多少长度*/
                    txt.value = txt.value.substr(0, txt.value.length - 1);
                }
            }
        }
        //给btn_txt  数组对象添加事件
        for (var i = 0; i < btn_txt.length; i++) {
            btn_txt[i].onclick = function () {
                /* this 指代的是当前事件的执行对象*/
                /*按完键将值传给屏幕*/
                /*判断是否为数字*/
                if (txt.value == "" && this.value == "."||txt.value == "" && this.value == "0") {
                    txt.value = "0.";
                }
                else {
                    if (!isNaN(this.value) || this.value == ".") {
                        /*indexOf() 用来查找字符  如果有返回当前位置  如果没有返回-1*/
                        if (txt.value.indexOf(".") != -1) {
                            if (this.value != ".") {
                                txt.value += this.value;
                            }
                        }
                        else {
                            txt.value += this.value;
                        }
                    }
                    else {
                        /*符号  + - *／　＝*/
                        //先存值  在清屏
                        if (this.value != "=") {
                            way_res[way_res.length] = txt.value;
                            //存符号
                            way_res[way_res.length] = this.value;
                            /*清屏*/
                            txt.value = "";
                        }
                        else {
                            way_res[way_res.length] = txt.value;
                            /*eval()方法   专门用来计算表达式的*/
                            txt.value = eval(way_res.join("")).toFixed(2);
                            /*计算完成之后将数组清空*/
                            way_res = [];
                        }
                    }
                }
            }
        }
    }
</script>
</body>
</html>

效果：
可以进行正常的加减乘除运算
随后，我会再用jQuery写一遍。

amyhyn

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
用Javascript写简单计算器

用JavaScript写简单计算器<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> table { border-collapse: collapse; } td {
复制链接

扫一扫

专栏目录