o宋宋o 2021-11-15 15:34 采纳率: 50%
浏览 61
已结题

关于#javascript#的问题，如何解决？

img


怎么用JavaScript做出来呀大佬们。

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-11-15 15:35
    关注

    代码如下

    img

    <style>
    /*Basic reset*/
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font: 14px Arial,sans-serif;
    }
    html {
        height: 100%;
    }
    #calculator {
        margin: 15px auto;
        width: 325px;
        height: 400px;
        border: 1px solid lightgray;
        background-color: #fff;
        padding: 15px;
    }
    /*LOGO*/
    .LOGO {
        height: 20px;
    }
    .LOGO .name {
        float: left;
        line-height: 30px;
    }
    .LOGO .verson {
        float: right;
        line-height: 30px;
    }
    /*screen*/
    #shuRu {
    }
    .screen {
        margin-top: 5px;
        width: 295px;
        height: 50px;
        padding-right: 10px;
        font-size: 20px;
    }
    #keys {
        height: 223px;
        margin-top: 15px;
    }
    #keys .last {
        margin-right: 0px;
    }
    .footer {
        margin-top: 20px;
        height: 20px;
    }
    .footer .link {
        float: right;
    }
    #keys .buttons {
        float: left;
        width: 62px;
        height: 36px;
        text-align: center;
        margin: 0 15px 15px 0;
    border:solid 1px #333;
    border-radius:2px
    }
</style>
<body>
    <div id="calculator">
        <div id="shuRu">
            <!--screen输入栏-->
            <div class="screen">
                <input type="text" id="screenName" name="screenName" class="screen">
            </div>
        </div>
        <div id="keys">
            <!-- j -->
            <!--第一排-->
            <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">
            <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">
            <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">
            <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons" style="margin-right:0px">
            <!--第二排-->
            <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">
            <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">
            <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">
            <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">
            <!--第三排-->
            <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">
            <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">
            <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">
            <input type="button" id="*" onclick="jsq(this.id)" value="*" class="buttons" style="margin-right:0px">
            <!--第四排-->
            <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons" style="width:100px">
            <input type="button" id="Back" onclick="tuiGe()" value="←" class="buttons" style="width:101px">
            <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">
            <!--第五排-->
            <input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="width:100%">
            <input type="button" id="C" onclick="clearNum()" value="CE" class="buttons" style="width:100%">
        </div>
    </div>
    <script>
        var num = 0;  // 定义第一个输入的数据
        function jsq(num) {
            //获取当前输入
            if (num == "%") {
                document.getElementById('screenName').value = Math.round(document.getElementById('screenName').value) / 100;
            } else {
                document.getElementById('screenName').value += document.getElementById(num).value;
            }
        }
        function eva() {
            //计算输入结果
            document.getElementById("screenName").value = document.getElementById("screenName").value+'='+ eval(document.getElementById("screenName").value);
        }
        function clearNum() {
            //清0
            document.getElementById("screenName").value = null;
            document.getElementById("screenName").focus();
        }
        function tuiGe() {
            //退格
            var arr = document.getElementById("screenName");
            arr.value = arr.value.substring(0, arr.value.length - 1);
        }
    </script>
</body>

    有帮助麻烦点下【采纳该答案】
    部分代码来源：

    js实现计算器 | 菜鸟工具 [HTMLCODE] <body> <div id="calculator"> <div class="LOGO"> <span class="name">简单的计算器</span&.. https://c.runoob.com/codedemo/3654/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 11月23日
  • 已采纳回答 11月15日
  • 创建了问题 11月15日