HTML制作计算器（四）

最新推荐文章于 2024-01-28 22:53:06 发布
最新推荐文章于 2024-01-28 22:53:06 发布
阅读量1.4k 收藏 9
点赞数 3
文章标签： javascript css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_27670713/article/details/108003413
版权

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

由此可见，在互联网领域，尤其是做前端，JavaScript是一门极为重要的语言。它被嵌入HTML页面后，可以用来规定网页的行为。

在HTML文件中使用script标签可以插入JavaScript代码例如：

<script>
/* JavaScript代码 */
</script>

也可引用外部的脚本文件而不是直接嵌入JavaScript来添加脚本，方法同样是利用script标签，但是要设置它的“src”属性，将它设为脚本文件的地址。如：

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

如果使用 “src” 属性，则 “script” 元素必须是空的。

在本项目中，我们需要使用JavaScript来实现：

  • 按键信息的获取
  • 数值的运算
  • 输入输出框内容的修改和显示

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style type="text/css">
        #outBord {
            border-style: solid;
            width: 292px;
            height: 374px;
            color: rgb(192, 192, 192);
            background-color: rgb(192, 192, 192);
        }
        
        .input1 {
            background-color: rgb(233, 233, 233);
            padding: 0px;
            width: 292px;
            height: 50px;
            border: none;
            margin: 0px 0px 2px;
            font-size: 20px;
            color: rgb(100, 100, 100);
        }
        
        .input2 {
            text-align: right;
            margin: 2px 0px 0px;
        }
        
        .button {
            background-color: rgb(233, 233, 233);
            width: 70px;
            height: 50px;
            border: none;
            margin: 2px 0px;
            font-size: 20px;
            color: rgb(100, 100, 100);
        }
        
        .button1:hover {
            background-color: rgb(192, 192, 192);
            color: white;
        }
        
        .button0 {
            width: 144px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="outBord">
        <div>
            <input class="input1" id="input">
        </div>
        <div style="height: 54px;">
            <input class="input1 input2" type="button" id="output">
        </div>
        <div>
            <div>
                <button id="button_AC" class="button button1" onclick="once_click_AC()">AC</button>
                <button id="button_C" class="button button1" onclick="once_click_C()">C</button>
                <button id="button_%" class="button button1" onclick="once_click_operater('%')">%</button>
                <button id="button_/ " class="button button1 " onclick="once_click_operater('/')">/</button>
            </div>
            <div>
                <button id="button_7 " class="button button1 " onclick="once_click_number('7')">7</button>
                <button id="button_8 " class="button button1 " onclick="once_click_number('8')">8</button>
                <button id="button_9 " class="button button1 " onclick="once_click_number('9')">9</button>
                <button id="button_* " class="button button1 " onclick="once_click_operater('*')">*</button>
            </div>
            <div>
                <button id="button_4 " class="button button1 " onclick="once_click_number('4')">4</button>
                <button id="button_5 " class="button button1 " onclick="once_click_number('5')">5</button>
                <button id="button_6 " class="button button1 " onclick="once_click_number('6')">6</button>
                <button id="button_- " class="button button1 " onclick="once_click_operater('-')">-</button>
            </div>
            <div>
                <button id="button_1 " class="button button1 " onclick="once_click_number('1')">1</button>
                <button id="button_2 " class="button button1 " onclick="once_click_number('2')">2</button>
                <button id="button_3 " class="button button1 " onclick="once_click_number('3')">3</button>
                <button id="button_+ " class="button button1 " onclick="once_click_operater('+')">+</button>
            </div>
            <div>
                <button id="button_0 " class="button button1 button0 " onclick="once_click_number('0')">0</button>
                <button id="button_. " class="button button1 " onclick="once_click_number('.')">.</button>
                <button id="button_=" class=" button button1 " onclick="once_click_operater('=')">=</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var para1 = "";
        var para2 = "";
        var resault = "";
        var operator = "";
        var flowControl = 0;

        function once_click_AC() {
            para1 = "";
            para2 = "";
            resault = "";
            operator = "";
            flowControl = 0;
            show_expression();
        }

        function once_click_C() {
            if (flowControl == 0) {
                para1 = "";
            } else if (flowControl == 1) {
                para2 = "";
            } else if (flowControl == 2) {
                resault = "";
            }
            show_expression();
        }

        function once_click_number(date) {
            if (flowControl == 0) //
            {
                para1 += date;
            } else if (flowControl == 1) {
                para2 += date;
            } else if (flowControl == 2) {
                flowControl = 0;
                para1 = "";
                para2 = "";
                resault = "";
                operator = "";
                para1 += date;
            }
            show_expression();
        }

        function canculate_resualt() {
            var paraInt1 = parseFloat(para1);
            var paraInt2 = parseFloat(para2);
            var resaultInt;
            if (!((operator == "") || (para2 == ""))) {
                if (operator == "+") {
                    resaultInt = paraInt1 + paraInt2;
                } else if (operator == "-") {
                    resaultInt = paraInt1 - paraInt2;
                } else if (operator == "*") {
                    resaultInt = paraInt1 * paraInt2;
                } else if (operator == "/") {
                    resaultInt = paraInt1 / paraInt2;
                } else if (operator == "%") {
                    resaultInt = paraInt1 % paraInt2;
                }
                resault = resaultInt.toString();
                return true;
            } else {
                return false;
            }

        }

        function show_expression() {
            var inputBox = para1 + operator + para2;
            document.getElementById("input").value = inputBox;
            document.getElementById("output").value = resault;
        }

        function once_click_operater(oper) {
            if (flowControl == 0) //
            {
                if (!(para1 == "")) {
                    operator = oper;
                    flowControl++;
                }
            } else if (flowControl == 1) {
                if (oper == "=") {
                    if (canculate_resualt() == true) {
                        flowControl = 2;
                    }
                } else {
                    if (canculate_resualt() == true) {
                        para1 = resault;
                        para2 = "";
                        resault = "";
                        operator = oper;
                    }
                }
            } else if (flowControl == 2) {
                if (!(oper == "=")) {
                    para1 = resault;
                    para2 = "";
                    resault = "";
                    operator = oper;
                    flowControl = 1;
                } else {
                    if (canculate_resualt() == true) {
                        flowControl = 2;
                    }
                }
            }
            show_expression();
        }
    </script>
</body>

</html>

函数once_click_AC()、once_click_C()、once_click_number()、once_click_operater()实现按键信息的采集和响应，canculate_resualt()计算结果，show_expression()显示输入输出框。

效果大致如下：
在这里插入图片描述

baidu_27670713
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html 计算器实现
12-05
基于HTML实现的简易计算器 实现加减乘除操作 与美化功能
php制作计算器源码
08-12
在PHP这个强大的服务器端脚本语言中，制作一个计算器源码可以帮助我们深入理解PHP的运算逻辑和函数使用。本文将详细解析如何利用PHP实现一个基本的计算器，涵盖加、减、乘、除四种基本运算。 首先，我们需要创建一...
HTML实现计算器
m0_62727420的博客
07-03 1万+
HTML实现计算器
用HTML实现简易版计算器
lkllkl123123的博客
08-13 1万+
计算器功能：实现了加减乘除、清零、回退、四则运算等等 HTML部分：用表格添加按键，用div块显示内容 CSS部分：将显示的内容定位到div块右下角 JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容，再调用eval方法将获取到的内容转换为js代码进行计算........................
html实现计算器
zmk0820的博客
03-24 4580
html实现计算器
快速使用HTML、CSS、JavaScript编写一个简单计算器
最新发布
bjjgff的博客
01-28 2674
首先在根目录下创建一个名为 css的目录， 在css目录下创建 main.css样式文件。在index.html 文件的 head标签中，我们要引入css样式，编写以下标签。我们在项目目录当中创建一个 名为 index.html的文件，在文件中编写以下内容。首先创建一个名为 js的目录，在js目录下创建calculartor.js文件。因为HTML结构是比较单一化的，我们需要使用CSS样式对它进行美化。在index.html文件中的 body标签下，编写以下内容。三、编写JavaScript逻辑代码。
HTML制作的计算器
07-09
一个简单到不能再简单的HTML计算器. *注:https://cbl200901.github.io/CBL计算器.html也是本人编写
基于React制作计算器实例
07-24
在本教程中，我们将深入探讨如何使用React框架创建一个基础的加减乘除计算器应用。React是Facebook开发的一款用于构建用户界面的JavaScript库，尤其适合构建可复用、组件化的应用。通过学习这个实例，你可以了解...
JavaScript，HTML制作简易图形化界面计算器
06-23
这个计算器将能够执行常见的四则运算（加法、减法、乘法、除法）以及处理正负数的运算。以下是每个技术在实现过程中所扮演的角色： 1. **HTML（超文本标记语言）**： HTML是网页内容的基础结构，负责定义页面上的...
bootstrap 插件 计算器_HTML自制计算器
weixin_39785081的博客
01-26 245
1 2 3 4 5 自制计算器6 7 8 9 10 $(function(){11 var$btn=$("#calc")12 //取消已绑定的事件:13 $btn.off(‘click‘);14 $btn.click(function() {15 varx=parseFloat($(‘#x‘).val()),16 op=$(‘#op‘).val...
html计算器
10-27
html网页版计算器calc，纯JavaScript编写，双击即可运行，不需其他环境。页面较为美观，模仿电脑自带calc，具有仿九宫格类似的样式。
html5计算器
11-19
谷歌浏览器做了html5页面做了兼容，ie9以上没问题但因为加了转换汇率的API跟书号isbn查询页面有点不好看，火狐呢，因为我调试浏览器就是火狐
HTMl编写计算器
weixin_33800463的博客
09-24 248
html ,css,javaScript完成的计算器程序： &lt;html&gt; &lt;title&gt; 多动能计算器 &lt;/title&gt; &lt;!--  计算器version 4.0  这一版本的计算器：         将所有的操作集合在同一个方法中      使用的方法为无参数的          样式表的使用  --&gt; &lt;head&gt;  &lt;tit...
用HTML编写一个计算器
一直豚桑的博客
04-22 1289
喜欢的就点个赞吧~~~ 网页示例图：
HTML编写计算器样式
蘇同学的安全屋的博客
01-18 1122
HTML编写计算器样式
html实现简单的计算器(+-*/)
weixin_43767629的博客
03-14 2009
使用递归和indexof来实现对加减乘除的计算 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content=&quo
利用JavaScript在html页面做一个计算器
qq_33655643的博客
03-31 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、html组成二、html和css,js基础知识***1.html******2.css****3.javascript*代码一些细节未解决的bug 前言 提示：这里可以添加本文要记录的大概内容： 提示：以下是本篇文章正文内容，下面案例可供参考 一、html组成 我们所要做的计算器可由两种方式构成 1.可以用table标签和tr，th，td标签构成，然后用css对他们的属性进行操作得到计算器. 2.可以用div容器实现，.
html实现科学计算器
qq_44758926的博客
06-20 3821
做计算器的时候是为了交作业，也参考了一些大佬的作品，交了作业很久才来整理博客，也不太记得具体参考了那一位大佬的，如有冒犯，请联系本人删除。
用HTML、CSS、JavaScript 实现一个简单的计算器
热门推荐
zilaiye1314的博客
09-15 2万+
用HTML CSS HTML实现的计算器WEB界面
html制作计算器
05-28
以下是一个简单的基于 HTML、CSS 和 JavaScript 的计算器示例： HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>计算器</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="calculator"> <div class="display"> <input type="text" class="input" id="result" readonly> </div> <div class="buttons"> <button onclick="clearResult()">C</button> <button onclick="backspace()">←</button> <button onclick="insertSymbol('/')">÷</button> <button onclick="insertSymbol('*')">×</button> <button onclick="insertSymbol('7')">7</button> <button onclick="insertSymbol('8')">8</button> <button onclick="insertSymbol('9')">9</button> <button onclick="insertSymbol('-')">-</button> <button onclick="insertSymbol('4')">4</button> <button onclick="insertSymbol('5')">5</button> <button onclick="insertSymbol('6')">6</button> <button onclick="insertSymbol('+')">+</button> <button onclick="insertSymbol('1')">1</button> <button onclick="insertSymbol('2')">2</button> <button onclick="insertSymbol('3')">3</button> <button onclick="calculate()">=</button> <button onclick="insertSymbol('0')">0</button> <button onclick="insertSymbol('.')">.</button> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码: ``` .calculator { width: 300px; margin: 100px auto; border: 1px solid #ccc; border-radius: 5px; box-shadow: 2px 2px 5px #ccc; padding: 10px; } .display { background-color: #f7f7f7; border-radius: 5px; padding: 5px; margin-bottom: 10px; } .input { width: 100%; font-size: 24px; text-align: right; border: none; outline: none; } .buttons button { width: 50px; height: 50px; border-radius: 5px; border: none; margin: 5px; font-size: 24px; background-color: #f7f7f7; cursor: pointer; } .buttons button:hover { background-color: #ccc; } ``` JavaScript 代码: ``` let result = document.getElementById("result"); function insertSymbol(symbol) { result.value += symbol; } function clearResult() { result.value = ""; } function backspace() { result.value = result.value.slice(0, -1); } function calculate() { result.value = eval(result.value); } ``` 这个计算器支持加、减、乘、除、小数点、回退、清除和计算等基本操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值