JavaScript实现简单的四则运算计算器完整实例


Posted in Javascript onApril 28, 2017

本文实例讲述了JavaScript实现简单的四则运算计算器。分享给大家供大家参考,具体如下:

运行效果图如下:

JavaScript实现简单的四则运算计算器完整实例

完整实例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>computer</title>
  <script>
  function compute(){
    str1=Number(document.getElementById("txt1").value);
    str2=Number(document.getElementById("txt2").value);
    comp=document.getElementById("select").value;
    var result;
    switch(comp) {
      case "+":
        comp=str1+str2;
        break;
      case "-":
        comp=str1-str2;
        break;
      case "*":
        comp=str1*str2;
        break;
      case "/":
        if(str2==0){
          alert("除数不能为0!");
          comp='';
        }else{
          comp=str1/str2;
        }
        break;
    }
    document.getElementById("result").value=comp;
  }
  </script>
</head>
<body>
  <input type="text" id="txt1"/>
  <select name="method" id="select">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="text" id="txt2"/>
  <input type="button" id="b1" value="等于" onclick="compute()" />
  <input type="text" id="result"/>
</body>
</html>

PS:这里再为大家推荐几款计算工具供大家进一步参考借鉴:

在线一元函数(方程)求解计算工具:
http://tools.3water.com/jisuanqi/equ_jisuanqi

科学计算器在线使用_高级计算器在线计算:
http://tools.3water.com/jisuanqi/jsqkexue

在线计算器_标准计算器:
http://tools.3water.com/jisuanqi/jsq

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
JS实现放大镜效果
Sep 21 Javascript
vue实现动态数据绑定
Apr 28 #Javascript
Vue实现动态响应数据变化
Apr 28 #Javascript
解决浏览器会自动填充密码的问题
Apr 28 #Javascript
JS实现简单的天数计算器完整实例
Apr 28 #Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
js实现移动端编辑添加地址【模仿京东】
Apr 28 #Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 #Javascript
You might like
逐步提升php框架的性能
2008/01/10 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
原生JS轮播图插件
2017/02/09 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
Python爬虫模拟登录带验证码网站
2016/01/22 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python线程信号量semaphore使用解析
2019/11/30 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
解决python运行效率不高的问题
2020/07/20 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
优秀员工表扬信
2014/01/17 职场文书
党支部换届选举方案
2014/05/08 职场文书
工程承包协议书
2014/10/20 职场文书
保姆聘用合同
2015/09/21 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书