JavaScrip实现计算器

最新推荐文章于 2021-07-19 17:03:56 发布
最新推荐文章于 2021-07-19 17:03:56 发布
阅读量277 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sudons/article/details/74998949
版权 
<!DOCTYPE html>
<html>
<head>
    <title>计算器</title>
    <script type="text/javascript">
        function count(){

            //获取第一个输入框的值
            var txt1Value = parseInt(document.getElementById("txt1").value);
            //获取第二个输入框的值
            var txt2Value = parseInt(document.getElementById("txt2").value);
            //获取选择框的值
            var selectValue = document.getElementById("select").value;
            var result;
            //获取通过下拉框来选择的值来改变加减乘除的运算法则
            switch(selectValue){
                case '+':
                    result = txt1Value+txt2Value;
                    break;
                case '-':
                    result = txt1Value-txt2Value;
                    break;
                case '*':
                    result = txt1Value*txt2Value;
                    break;
                case '/':
                    result = txt1Value/txt2Value;
                    break;

            }

            //设置结果输入框的值
            document.getElementById("fruit").value = result;
        }
    </script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
    <option value='+'>+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果-->
<input type='text' id='fruit' />
</body>
</html>
幻凌风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript初学——计算器的实现
weixin_40615146的博客
01-08 1632
在学习JavaScript之前，知道如果需要做一个加减法运算需要调用到后端的数据处理，前端在没有js运算的情况下无法实现，但是在制作完简易版本的“输入数字型计算器”后，便想着，如果计算器的实现能够和我们日常使用的计算器一样，那么就可以免去了自己选或者打错字符的烦恼，因此打算制作一个JavaScript计算器。 首先，在制作计算器之前，先要完成它的具体外观，具体代码如下： ...
简单的JavaScript计算器
Yonggie的博客
04-29 353
带有enter键出结果， 可以直接复制粘贴。 <html> <head> </head> <title> calculator</title> <script src="jquery-3.3.1.min.js"> </script> <style> #container{ ...
用Javascript写简单计算器
amyhyn的博客
06-03 1516
用JavaScript写简单计算器<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> table { border-collapse: collapse; } td {
JavaScript简易计算器
weixin_49756833的博客
05-29 3035
我要分享的是一个对初级者比较重要的计算器，看一下我的成品图： 先说思路：把叁数一通过运算符叁数二计算出结果； 页面布局我就不说了，等下看代码就行了。 叁数一二下面的框用的是input标签来完成的，里面的type属性要设置为number类型的，把它们限制在数字类型中： 运算符我用的是一个select下拉框来完成的： 那个结果我也是给了一个加了ID的input标签： 因为我们整个计算器是要通过计算这个按钮来得出最后结果，所以我要给这个按钮写一个方法，通过运行这个方法...
javascript实现计算器
anan的博客
01-05 9341
       首先说明一下为什么发这篇文章，因为今天早晨看到一篇类似的文章，我看了他的源码，发现实在太啰嗦了，于是便准备把这篇文章发出来！        其实使用javascript的函数来实现计算器可以说是练习javascript的一个好方法，虽然我的代码可...
javascript实现计算器功能
10-15
主要为大家详细介绍了javascript实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
结合 HTML、CSS，基于原生 JavaScript 实现计算器
01-06
结合 HTML、CSS，基于原生 JavaScript 实现计算器 要求界面、按键设计合理、 美观，除基本计算功能外，需实现进制转换、结果存储、取存计算的功能。实现长度转换。实现时间计算
纯JavaScript实现计算器
11-15
用JavaScript实现一个运算式的计算 a. 支持加，减，乘，除（+, -, *, /) b. 支持输入合法的数字，包括小数，不考虑非法输入和数字越界（0-9, .） sample : "3+8.3*1" 结果是11.3 ”3.2 + 0 -8.7“ 结果是-5.5 ...
用HTML CSS JavaScript实现计算器的设计.pdf
最新发布
01-03
总的来说，这个HTML+CSS+JavaScript实现的计算器是一个典型的前端开发实例，它结合了网页的结构、样式和动态功能，展示了Web开发中的基础知识和技术。通过这种方式，用户可以在浏览器中直接使用一个功能完备的计算器...
用计算机计算四年级思维导图,四年级下册第一单元思维导图数学
weixin_30543595的博客
07-02 8459
250212002102410这个大数的认识吧……是四年级上册第一单元，主要讲了亿以内、亿以上、计算器、算盘等.......还可以用思维导图来画，更清楚，有什么问题随时来问我人民教育出版社四年级上册语文第一单元思维导图怎么画 按照阅读和写作两大块来制作。 比如在阅读方面思维导图如下，供你参考，谢谢四年级下册第一单元思维导图数学 https://m.gkzyl.com/news/21892.html...
思维导图分享
weixin_33895475的博客
12-22 549
我使用思维导图已经有一段时间了，也有了一些自己的经验，甚至，在工作和生活中，思维导图已经是我必不可少的一项工具。当智哥问我能不能用一句话解释清楚思维导图的时候，我迟疑了一下，还是没法说清楚（看来要将《金字塔原理》列入读书计划了：）。这些天我读了两本有关思维导图的书：《大脑使用说明书》和《开启大脑》，都是思维导图的创始人东尼.博赞的作品。我还读了一些相关的博客，尽量让自己对思维导图能有全面的认识。以...
【超详细】计算机组成原理总结及思维导图
热门推荐
圣三一
06-20 9万+
计算机组成 第一章 计算机系统概论 冯诺依曼型计算机特点 1.计算机由运算器，控制器，存储器，输入和输出设备5部分组成 2.采用存储程序的方式，程序和数据放在同一个存储器中，并以二进制表示。 3.指令由操作码和地址码组成 4.指令在存储器中按执行顺序存放，由指令计数器(即程序计数器PC)指明要执行的指令所在的储存单元地址，一般按顺序递增，但可按运算结果或外界条件而改变 5.机器以运...
e站host地址_电脑网络：ip地址详解，小学生都看的懂
weixin_39543835的博客
11-20 3809
一、简介在生活中我们使用具有上网功能的电子设备都有IP地址，就跟每个人都有自己的名字一样。IP地址分为IPV4 IPV6，我们所说的的IP地址指的是IPV4的地址。只要记住你的名字 不管你在世界的哪个地方 我一定会，去见你。——新海诚《你的名字》IPV4( Internet Protocol Version 4 )互联协议版本4，有版本V4之前就有IPV1 IPV2 IPV3，同样有IPV5 IP...
使用JS写一个计算器
weixin_30646315的博客
11-08 5676
先上效果图： 简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。 根据预期效果，可以确定页面中的布局要用到table tr td。 所以先放上页面布局,table的边框宽度border，colspan来设置某一行的宽度为4倍一列宽度，显示结果的地方要显示输入的所有值，先用id来区分，给value一个空，来获取其他按钮键入的value值，...
面向对象思想设计_计算器小程序(设计模式入门篇_01)
刘德利CSDN博客
12-14 7871
名称：简单计算器程序面向对象思想的由来：面向对象编程思想的由来是从面向过程演变而来，所以我们用一个简单的计算器程序用面向过程的方式去实现以下是面向过程方式实现计算器程序：public class Main { public static void main(String[] args) { Scanner scanner = new Scanner(System.in);
[计算机领域的思维导图系列整理][java]think in java
titer1的专栏
12-25 2639
思维导图 think in java
原生JavaScript实现的简易计算器
尐轩web前端网络日志
11-29 3万+
最近一直没有写博客 因为一直忙着预习考试内容 什么偏微分啊、数值分析啊、计算机图形学啊、信息论… 在未来一个月可能会很忙 整理前端的频率可能就没那么高了还是说正题 昨天晚上用JavaScript实现了一个简易的计算器 今天分享给大家没有考虑什么兼容，浏览器为chrome 代码我放在了我的github上 大家可以前往下载 传送门 或者复制我下面展示的代码这个计算器长成这个样子（43
JavaScript实现计算器
肆律
08-26 3万+
核心是使用eval(str);//传入的字符串会被当成JavaScript代码执行; 大致是这样的界面： 当我们点击数字时在屏幕上会显示点击的数字，当我们点击“ + 、- 、* 、/ ”时只会出现运算符，之前的结果将被清空。 当我们点击“ ...
制作计算器（JavaScript）
weixin_48112113的博客
07-19 5107
1. 任务要求 1）掌握数据的类型转换 2）学会获取文本框控件的数据以及给相应控件赋值 3）掌握有参函数的定义 4）学会使用数值判断函数 5）学会使用eval()方法编译字符串算式 2. 实现思路 1）在TNumber函数里实现对输入的数据进行累加，以便后面计算结果。 2）同时可以定义一个sum，将点击的每个按钮值进行累加，以便最后可以输出式子。 3）在Clear...
JavaScript实现计算器运算网页
05-30
可以使用HTML、CSS和JavaScript来创建一个计算器运算网页。以下是一个简单的实现： HTML代码： ``` <div class="calculator"> <input type="text" id="input" disabled> <div class="buttons"> <button onclick="clearInput()">C</button> <button onclick="backspace()">←</button> <button onclick="insert('+')">+</button> <button onclick="insert('-')">-</button> <button onclick="insert('*')">*</button> <button onclick="insert('/')">/</button> <button onclick="calculate()">=</button> <button onclick="insert('7')">7</button> <button onclick="insert('8')">8</button> <button onclick="insert('9')">9</button> <button onclick="insert('4')">4</button> <button onclick="insert('5')">5</button> <button onclick="insert('6')">6</button> <button onclick="insert('1')">1</button> <button onclick="insert('2')">2</button> <button onclick="insert('3')">3</button> <button onclick="insert('0')">0</button> <button onclick="insert('.')">.</button> </div> </div> ``` CSS代码： ``` .calculator { width: 200px; margin: 0 auto; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5px; } button { background-color: #4CAF50; color: white; border: none; border-radius: 5px; padding: 10px; font-size: 20px; cursor: pointer; } button:hover { background-color: #3e8e41; } ``` JavaScript代码： ``` var input = document.getElementById('input'); function insert(value) { input.value += value; } function backspace() { input.value = input.value.slice(0, -1); } function clearInput() { input.value = ''; } function calculate() { try { input.value = eval(input.value); } catch (e) { if (e instanceof SyntaxError) { input.value = 'Error'; } } } ``` 这个计算器运算网页支持加、减、乘、除、小数点和清空操作，并且使用了eval()函数来进行计算。需要注意的是，eval()函数可能存在安全隐患，不建议在生产环境中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值