小计算器。

最新推荐文章于 2024-09-13 16:26:56 发布

白天的我最菜

最新推荐文章于 2024-09-13 16:26:56 发布

阅读量56

点赞数

分类专栏：收集收集实战文章标签： javascript 开发语言 ecmascript vue.js 前端 html

本文链接：https://blog.csdn.net/m0_72735063/article/details/132066670

版权

收集收集实战专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html>

<head></head>

<body>
    <div class="container">
        <div class="output" id="output">0</div>
        <button class="button" onclick="clearOutput()" id="clear">C</button>
        <button class="button" onclick="appendToOutput('%')">%</button>
        <button class="button" onclick="appendToOutput('/')">/</button>
        <button class="button" onclick="appendToOutput('*')">*</button>
        <button class="button" onclick="appendToOutput('7')">7</button>
        <button class="button" onclick="appendToOutput('8')">8</button>
        <button class="button" onclick="appendToOutput('9')">9</button>
        <button class="button" onclick="appendToOutput('-')">-</button>
        <button class="button" onclick="appendToOutput('4')">4</button>
        <button class="button" onclick="appendToOutput('5')">5</button>
        <button class="button" onclick="appendToOutput('6')">6</button>
        <button class="button" onclick="appendToOutput('+')">+</button>
        <button class="button" onclick="appendToOutput('1')">1</button>
        <button class="button" onclick="appendToOutput('2')">2</button>
        <button class="button" onclick="appendToOutput('3')">3</button>
        <button class="button equals" onclick="calculate()">=</button>
        <button class="button" onclick="appendToOutput('0')">0</button>
        <button class="button" onclick="appendToOutput('.')">.</button>
    </div>
    <style>
        body {
          background-color: #f2f2f2;
          font-family: Arial, sans-serif;
        }

        .container {
          margin: auto;
          margin-top: 100px;
          width: 300px;
          padding: 10px;
          border: 1px solid #ccc;
          background-color: #fff;
          box-shadow: 0px 0px 10px #ccc;
        }

        .output {
          font-size: 2em;
          text-align: right;
          padding: 10px;
        /*//输出黄*/
          background-color: #ffff00;
          border: 1px solid #ccc;
        }

        .button {
          font-size: 1.5em;
          margin: 5px;
          width: 50px;
          height: 50px;
          border: none;
        /*//按键橘色*/
          background-color: #ec971f;
          color: #fff;
          cursor: pointer;
        }

        .button:hover {
          background-color: #e11;
        }

        .clear {
          background-color:#ec971f;
        }

        .equals {
          background-color: #66cc66;
        }
    </style>

    <script>
        let output = document.getElementById("output");

        function appendToOutput(value) {
          if (output.innerHTML === "0") {
            output.innerHTML = value;
          } else {
            output.innerHTML += value;
          }
        }
                                        // 如果是零，那么掩盖。防止000的操作
        function clearOutput() {
          output.innerHTML = "0";
        }

        function calculate() {
          output.innerHTML = eval(output.innerHTML);
        }
    </script>
</body>

</html>

HTML
先html创建一个class=“output”窗口，
js
建一个output相当于集合收集计算的值
appendToOutput 函数如果是零，那么掩盖。防止000的操作

output.innerHTML = eval(output.innerHTML)执行功能

一、eval() 函数作用：执行里面的内容
eval()可以接受一个字符串str作为参数，并把这个参数作为脚本代码来
执行。
二、接受的参数：
（1）如果参数是一个表达式，eval() 函数将执行表达式；
（2）如果参数是Javascript语句，eval()将执行 Javascript 语句
注：（如果执行结果是一个值就返回，不是就返回undefined，如果参数不是一个字符串，则直接返回该参数）

四、实例：
eval(“var a=1”);//声明一个变量a并赋值1。
eval(“2+3”);//执行加运算，并返回运算值。
eval(“mytest()”);//执行mytest()函数。
eval("{b:2}");//声明一个对象。如果想返回此对象，则需要在对象外面再嵌套一层小括如下：eval("({b:2})");
注：使用eval来解析JSON格式字符串的时候，会将{}解析为代码块，而不是对象的字面量
//1.在JSON格式的字符串前面拼接上 “var o =”
//2.把JSON格式的字符串使用()括起来，就不会将{}解析为代码块，而是表达式

上面eval("({b:2})")演示过了

五、Function和eval有什么区别？
共同点：都可以将字符串转化为js代码
不同点：Function创建出来的函数并不会直接调用，只有当手动去调用创建出来的函数的时候才调用，eval把字符串转化为代码后，直接就执行了。

参考自：博客园:https://www.cnblogs.com/chenxiaomeng/