<small id='F2qZK'></small><noframes id='F2qZK'>

    <tfoot id='F2qZK'></tfoot>

    • <bdo id='F2qZK'></bdo><ul id='F2qZK'></ul>
  1. <i id='F2qZK'><tr id='F2qZK'><dt id='F2qZK'><q id='F2qZK'><span id='F2qZK'><b id='F2qZK'><form id='F2qZK'><ins id='F2qZK'></ins><ul id='F2qZK'></ul><sub id='F2qZK'></sub></form><legend id='F2qZK'></legend><bdo id='F2qZK'><pre id='F2qZK'><center id='F2qZK'></center></pre></bdo></b><th id='F2qZK'></th></span></q></dt></tr></i><div id='F2qZK'><tfoot id='F2qZK'></tfoot><dl id='F2qZK'><fieldset id='F2qZK'></fieldset></dl></div>
  2. <legend id='F2qZK'><style id='F2qZK'><dir id='F2qZK'><q id='F2qZK'></q></dir></style></legend>

      基于html+css+js实现简易计算器代码实例

      时间:2023-12-14
        <tbody id='ZK9Rs'></tbody>
      • <legend id='ZK9Rs'><style id='ZK9Rs'><dir id='ZK9Rs'><q id='ZK9Rs'></q></dir></style></legend>

      • <i id='ZK9Rs'><tr id='ZK9Rs'><dt id='ZK9Rs'><q id='ZK9Rs'><span id='ZK9Rs'><b id='ZK9Rs'><form id='ZK9Rs'><ins id='ZK9Rs'></ins><ul id='ZK9Rs'></ul><sub id='ZK9Rs'></sub></form><legend id='ZK9Rs'></legend><bdo id='ZK9Rs'><pre id='ZK9Rs'><center id='ZK9Rs'></center></pre></bdo></b><th id='ZK9Rs'></th></span></q></dt></tr></i><div id='ZK9Rs'><tfoot id='ZK9Rs'></tfoot><dl id='ZK9Rs'><fieldset id='ZK9Rs'></fieldset></dl></div>
          <bdo id='ZK9Rs'></bdo><ul id='ZK9Rs'></ul>

              <small id='ZK9Rs'></small><noframes id='ZK9Rs'>

              • <tfoot id='ZK9Rs'></tfoot>

                下面我将详细讲解如何基于html+css+js实现简易计算器代码实例。

                HTML部分

                首先,我们需要创建一个HTML页面,代码如下:

                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8">
                    <title>简易计算器</title>
                    <link rel="stylesheet" href="style.css">
                </head>
                <body>
                    <div class="container">
                        <div class="screen">
                            <p id="result"></p>
                        </div>
                        <div class="row">
                            <button onclick="buttonClick('7')">7</button>
                            <button onclick="buttonClick('8')">8</button>
                            <button onclick="buttonClick('9')">9</button>
                            <button onclick="buttonClick('/')">÷</button>
                        </div>
                        <div class="row">
                            <button onclick="buttonClick('4')">4</button>
                            <button onclick="buttonClick('5')">5</button>
                            <button onclick="buttonClick('6')">6</button>
                            <button onclick="buttonClick('*')">×</button>
                        </div>
                        <div class="row">
                            <button onclick="buttonClick('1')">1</button>
                            <button onclick="buttonClick('2')">2</button>
                            <button onclick="buttonClick('3')">3</button>
                            <button onclick="buttonClick('-')">-</button>
                        </div>
                        <div class="row">
                            <button onclick="buttonClick('0')">0</button>
                            <button onclick="buttonClick('.')">.</button>
                            <button onclick="calculate()">=</button>
                            <button onclick="buttonClick('+')">+</button>
                        </div>
                        <div class="row">
                            <button onclick="clearScreen()">清屏</button>
                        </div>
                    </div>
                    <script src="script.js"></script>
                </body>
                </html>
                

                其中,我们创建了一个class为container的外层容器,里面包含一个id为result的p标签,用于显示计算器的计算结果。之后是四个class为row的行,每行包含了4个数字和运算符按钮,以及一个清除按钮。

                CSS部分

                接下来,我们需要为计算器样式添加CSS,代码如下:

                .container {
                    margin: 100px auto;
                    width: 300px;
                    height: 400px;
                    background: #F5F5F5;
                    padding: 20px;
                    border-radius: 10px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                    display: flex;
                    flex-direction: column;
                }
                
                .screen {
                    height: 80px;
                    background: white;
                    border-radius: 5px;
                    margin-bottom: 20px;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    padding-right: 20px;
                    font-size: 32px;
                    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
                }
                
                button {
                    width: 70px;
                    height: 70px;
                    margin-right: 10px;
                    border: none;
                    border-radius: 5px;
                    background: white;
                    color: #333;
                    font-size: 24px;
                    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
                    cursor: pointer;
                }
                
                button:hover {
                    background: #F5F5F5;
                }
                
                .row:last-child button {
                    background: #F5F5F5;
                    color: #333;
                }
                
                .row:last-child button:hover {
                    background: #efefef;
                }
                

                CSS部分主要是为计算器组件添加样式,包括容器的大小与外观(居中,背景色、圆角、阴影等),屏幕部分的样式(显示结果,背景,圆角、阴影等),按钮样式,以及按钮的颜色状态等。

                JS部分

                最后,我们需要添加JavaScript代码,来实现计算器的功能。代码如下:

                let result = document.getElementById('result');
                
                function buttonClick(buttonValue) {
                    result.innerText += buttonValue;
                }
                
                function clearScreen() {
                    result.innerText = '';
                }
                
                function calculate() {
                    try {
                        result.innerText = eval(result.innerText);
                    } catch (error) {
                        alert(error);
                        clearScreen();
                    }
                }
                

                JS部分主要包括三个函数buttonClick、clearScreen、calculate,分别用于处理按钮被点击时的逻辑、清空屏幕内容、计算结果的逻辑处理(通过eval函数来计算屏幕内容的结果),并且处理了计算报错的异常情况。

                示例1:输入1+2,得到结果为3

                示例2:输入10/5,得到结果为2

                这就是基于html+css+js实现简易计算器的完整攻略,包括HTML部分、CSS部分和JS部分。

                上一篇:HTML+CSS实现单选框、复选框美观的样式 下一篇:HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)

                相关文章

                <tfoot id='L3SyM'></tfoot>

                1. <i id='L3SyM'><tr id='L3SyM'><dt id='L3SyM'><q id='L3SyM'><span id='L3SyM'><b id='L3SyM'><form id='L3SyM'><ins id='L3SyM'></ins><ul id='L3SyM'></ul><sub id='L3SyM'></sub></form><legend id='L3SyM'></legend><bdo id='L3SyM'><pre id='L3SyM'><center id='L3SyM'></center></pre></bdo></b><th id='L3SyM'></th></span></q></dt></tr></i><div id='L3SyM'><tfoot id='L3SyM'></tfoot><dl id='L3SyM'><fieldset id='L3SyM'></fieldset></dl></div>

                      <bdo id='L3SyM'></bdo><ul id='L3SyM'></ul>

                    <small id='L3SyM'></small><noframes id='L3SyM'>

                    <legend id='L3SyM'><style id='L3SyM'><dir id='L3SyM'><q id='L3SyM'></q></dir></style></legend>