JS实现一个简单的计算器
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。效果如上:
第一步: 创建构建运算函数count()。
第二步: 获取两个输入框中的值和获取选择框的值。
提示:document.getElementById( id名 ).value 获取或设置 id名的值。
第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则。
提示:使用switch判断运算法则。
第四步: 通过 = 按钮来调用创建的函数,得到结果。
注意: 使用parseInt()函数可解析一个字符串,并返回一个整数。
代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 事件</title> 5 <script type="text/javascript"> 6 function count(){ 7 var a = document.getElementById("txt1").value; 8 var b = document.getElementById("txt2").value; 9 //获取第一个输入框的值10 //获取第二个输入框的值11 //获取选择框的值12 var c = document.getElementById("select").value;13 a = parseFloat(a);14 b = parseFloat(b);15 //获取通过下拉框来选择的值来改变加减乘除的运算法则16 //设置结果输入框的值 17 switch(c){18 case "+":19 document.getElementById("fruit").value=parseInt(a)+parseInt(b);20 break;21 case "-":22 document.getElementById("fruit").value=parseInt(a)-parseInt(b);23 break;24 case "*":25 ocument.getElementById("fruit").value=parseInt(a)*parseInt(b);26 break;27 case "/":28 document.getElementById("fruit").value=parseInt(a)/parseInt(b);29 break;30 }31 }32 </script> 33 </head> 34 <body>35 <input type='text' id='txt1' /> 36 <select id='select'>37 <option value="+">+</option>38 <option value="-">-</option>39 <option value="*">*</option>40 <option value="/">/</option>41 </select>42 <input type='text' id='txt2' /> 43 <input type='button' value=' = ' onclick = "count()"/>44 <input type='text' id='fruit' /> 45 </body>46 </html>
转载于:https://blog.51cto.com/hzz333/1918846
JS实现一个简单的计算器相关推荐
- 今天我教大家用js制作一个简单的计算器
首先我们先打好框架 代码如图: 下面我们来看一下页面显示效果: 然后我们开始写js效果: 这样,我们一个简单的计算器就做好了,效果如图:
- python123程序设计题说句心里话_用c++写一个简单的计算器程序
// 050305.cpp : 定义控制台应用程序的入口点. // // 050304.cpp : 定义控制台应用程序的入口点. // //四则运算 #include "stdafx.h&q ...
- android实现计算器功能吗,利用Android实现一个简单的计算器功能
利用Android实现一个简单的计算器功能 发布时间:2020-11-20 16:25:01 来源:亿速云 阅读:90 作者:Leah 今天就跟大家聊聊有关利用Android实现一个简单的计算器功能, ...
- linux qt小型计算器,Qt实现一个简单的计算器
Qt实现一个简单的计算器 作者:hackett 微信公众号:加班猿 一.UI界面版 运行效果:输入num1和num2选择+-*/点击计算即可 UI界面设计: 3个lineEdit(lineEditNu ...
- vue设置一个简单的计算器
vue设置一个简单的计算器 <div id="app"><input type="text" v-model="n1"&g ...
- Windows10 手机应用程序开发 - 3. 做一个简单的计算器界面
2019独角兽企业重金招聘Python工程师标准>>> 目标:完成一个简单的计算器的界面,暂时不做点击处理,主要联系UI布局. 步骤: 1.创建一个空的windows phone 项 ...
- 正则表达式应用:实现一个简单的计算器
实现一个简单的计算器,代码如下: 下面的函数用来检验数学表达式的合规性,当然此处只实现两个检验:(1)括号应该闭合 (2)不能出现字母 def check_expression(str):check_ ...
- python计算器教程,用Python程序制作一个简单的计算器
用Python程序制作一个简单的计算器 在此示例中,您将学习创建一个简单的计算器,该计算器可以根据用户的输入进行加,减,乘或除. 要理解此示例,您应该了解以下Python编程主题: 通过函数创建简单计 ...
- 如何用 Node.js 实现一个简单的 Websocket 服务?
最近正在研究 Websocket 相关的知识,想着如何能自己实现 Websocket 协议.到网上搜罗了一番资料后用 Node.js 实现该协议,倒也没有想象中那么复杂,除去注释语句和 console ...
最新文章
- java中ajax概念_Java之AJAX概念和实现方式
- 情人节到了!这枝18星「黑玫瑰」只送给你
- 使用 Node.js 开发简单的脚手架工具
- toolkit,phonetextbox中实现用户按回车键会换行
- centos so查看_等保测评主机安全:CentOS密码修改周期与登录失败处理
- java mongodb 聚合函数_MongoDB的聚合函数 Aggregate
- 电脑硬件知识大扫盲:CPU技术参数集锦
- [python]凯撒密码简单方法
- 详细船舶信息爬虫教程:船讯网根据MMSI爬取对应船舶属性信息|附python爬虫代码
- qt 富文本 html,Qt富文本编辑器QTextDocument
- 读书笔记:《心若菩提》 曹德旺
- iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。
- obs 推流编码在哪设置_直播软件OBS推流的设置方法
- 中国人不骗中国人,我的猜拳平平无奇。。
- VC通过ADO操作Access2007数据库
- 手把手教你实现小程序中的自定义组件
- ubt搭建rabbitMQ消息队列
- CUDA入门:基础概念解析
- BIM Revit 模型导出 2
- CF-B. Morning Jogging
热门文章
- @Controller @RestController
- 动画效果-基础动画设置(改变大小,改变透明度,翻转,旋转,复原)
- asp.net DataGridTree表格树控件 下拉树 DropTree c# .net
- 诗与远方:无题(八十二)- 遇到你真好
- Python使用pdfkit、wkhtmltopdf将html转换为pdf错误记录文档
- spring中@Value的使用(读取配置文件信息)
- Redis缓存安装Version5.0.7
- idea卸载删除旧版重新安装新版后,新版本idea程序打不开闪退的解决方案
- C++ pair的基本用法总结
- using filesort和using temporary