JS实现简单的计算

用JS实现简单的网页版计算器

其中应用到了es6中的eval（）方法比较简便节省了大量的代码

eval()是计算字符串，把字符串当做js表达式来执行， eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行

css代码部分

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /* 主体 */
        .counter{
            width: 396px;
            height: 486px;
            background-color: #F2F2F2;
            border: 1px solid #C2C3C6;
            margin: 50px auto;

        }
        /* 显示框 */
        #screen {
            height: 70px;
            width: 336px;
            background-color: #323232;
            border: none;
            margin: 40px 25px 32px 25px;
            font: 700 40px/70px "微软雅黑";
            color: #ffffff;
            padding-right: 10px;
        }
        /* 功能区 */
        .funct {
            padding: 0 20px;
            position: relative;

        }
        /* 按钮样式 */
        .funct input {
            height: 40px;
            width: 60px;
            margin: 10px 10px;
            font: 400 20px/40px "微软雅黑";
        }
        /* 清除按钮样式 */
        .funct #res {
            width: 150px;
        }
        /* + - = . 按钮浮动 */
        #add, #reduce, #round, #sum {
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
        /* 减号位置 */
        #reduce {
            right: 30px;
            top: 60px;
        }

        /* 加号位置 */
        #add {
            right: 30px;
            top: 120px;
        }
        /* 等于号位置 */
        #sum {
            height: 100px;
            right: 30px;
            bottom: 0px;
        }
        /* 小数点位置 */
        #round {
            right: 120px;
            bottom: 0px;
        }
        /* 0 */
        #zero {
            width: 150px;
        }
        /* 数字区 */
        .numb {
            width: 280px;
        }
    </style>
</head>
<body>

<div class="counter">
    <input type="text" id="screen" style="text-align:right" readOnly="true" value="">
    <div class="funct">
        <input onclick="reset()" type="button" id="res" value="C">
        <input onclick="allBtn(this)" type="button" id="division" value="/">
        <input onclick="allBtn(this)" type="button" id="ride" value="*">

        <input onclick="allBtn(this)" type="button" id="add" value="+">
        <input onclick="allBtn(this)" type="button" id="reduce" value="-">
        <input onclick="allBtn(this)" type="button" id="round" value=".">
        <input onclick="result()"  type="button" id="sum" value="=">

        <div class="numb">
            <input onclick="allBtn(this)" type="button" id="one" value="1">
            <input onclick="allBtn(this)" type="button" id="two" value="2">
            <input onclick="allBtn(this)" type="button" id="three" value="3">
            <input onclick="allBtn(this)" type="button" id="four" value="4">
            <input onclick="allBtn(this)" type="button" id="five" value="5">
            <input onclick="allBtn(this)" type="button" id="six" value="6">
            <input onclick="allBtn(this)" type="button" id="seven" value="7">
            <input onclick="allBtn(this)" type="button" id="eight" value="8">
            <input onclick="allBtn(this)" type="button" id="nine" value="9">
            <input onclick="allBtn(this)" type="button" id="zero" value="0">
        </div>
    </div>
</div>
</body>
</html>

JS部分

<script >
   // let text = document.getElementById("screen");
   let text = document.querySelector("#screen");
    console.log(text);

    function allBtn(obj){

        text.value +=obj.value;
    }
    function reset(){
        text.value = "";
    }
    function result(){
      text.value = eval(text.value);

    }
</script>

实现效果