JS实现简单的网页计算器

最新推荐文章于 2022-07-18 20:26:24 发布

垚爻*

最新推荐文章于 2022-07-18 20:26:24 发布

阅读量2.2k

点赞数 2

文章标签： js 计算器

本文链接：https://blog.csdn.net/weixin_44305208/article/details/100642141

版权

2015年推出ECMA Script2015(es6)
其中的一项应用方法为eval()，提供了较大的方便。
它使得js可以计算 JavaScript 字符串，并把它作为脚本代码来执行，这就大大节省了冗余的代码量

    <!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-alig

n: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>

<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>
</body>
</html>

垚爻*

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
JS实现简单的网页计算器

2015年推出ECMA Script2015(es6)其中的一项应用方法为eval()，提供了较大的方便。它使得js可以计算 JavaScript 字符串，并把它作为脚本代码来执行，这就大大节省了冗余的代码量 <!DOCTYPE html> <html lang="zh"> <head> <meta chars...
复制链接

扫一扫