html css js实现最简单的计算器

最新推荐文章于 2024-11-12 21:16:14 发布

动感超人emmm

最新推荐文章于 2024-11-12 21:16:14 发布

阅读量441

点赞数 1

文章标签：排序算法算法 html

本文链接：https://blog.csdn.net/m0_60265664/article/details/121571457

版权

先写完html 再给他添加一点样式重点是js

上代码

先是html部分

<div class="contioner">
        <form action="" name="biaodan">
            <input type="button" value="清除" class="qingchu" id="clear">
            <input type="text" id="display">
            <br>
            <input type="button" value="7" class="number" onclick="get(this.value)">
            <input type="button" value="8" class="number" onclick="get(this.value)">
            <input type="button" value="9" class="number" onclick="get(this.value)">
            <input type="button" value="+" class="fuhao" onclick="get(this.value)">
            <br>
            <input type="button" value="4" class="number" onclick="get(this.value)">
            <input type="button" value="5" class="number" onclick="get(this.value)">
            <input type="button" value="6" class="number" onclick="get(this.value)">
            <input type="button" value="-" class="fuhao" onclick="get(this.value)">
            <br>
            <input type="button" value="1" class="number" onclick="get(this.value)">
            <input type="button" value="2" class="number" onclick="get(this.value)">
            <input type="button" value="3" class="number" onclick="get(this.value)">
            <input type="button" value="*" class="fuhao" onclick="get(this.value)">
            ] <br>
            <input type="button" value="0" class="number" onclick="get(this.value)">
            <input type="button" value="." class="fuhao" onclick="get(this.value)">
            <input type="button" value="=" class="fuhao" onclick="jisuan();">
            <input type="button" value="/" class="fuhao" onclick="get(this.value)">

        </form>
    </div>

css部分

<style>
        html,body {
            padding: 0px;
            border: 0px;
        }
        .contioner {
            width: 80%;
            margin: 0 auto;
            background-color: #888888;
            border-radius: 5px;
        }
        form {
            background-color: rgb(129, 90, 90);
            margin: 40px auto;
            padding: 40px 0 30px 40px;
            width: 280px;
        }
        #display,
        form {
            border-radius: 5px;
        }
        #display {
            outline: none;
            background-color: rgb(202, 175, 175);
            color: honeydew;
            font-size: 20px;
            height: 40px;
            text-align: left;
            width: 140px;
            padding-right: 10px;
            padding-left: 10px;
        }
        .number {
            width: 50px;
            height: 40px;
            background-color: lightslategrey;
            color: lightyellow;
        }
        .fuhao {
            width: 50px;
            height: 40px;
            background-color: rgb(170, 109, 109);
            color: linen;
        }
        .qingchu {
            background-color: rgb(124, 93, 93);
            color: mintcream;
        }
    </style>

js部分

<script>

        // 点击清除键清除   使用addEventListener()方法 添加点击事件 将display的value变为空
        document.getElementById("clear").addEventListener("click", function () {
            document.getElementById("display").value = "";
        });

        // 获取按下的value 并将其传给显示
        function get(value) {
            document.getElementById("display").value += value;
        }

        //计算  将display中的value给算式  在使用eval方法计算出结果
        // eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
        function jisuan() {
            var suanshi = document.getElementById("display").value;

            document.getElementById("display").value = eval(suanshi);
        };

用到的方法可查询菜鸟教程