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 相关文章推荐
Javascript 复制数组实现代码
Nov 26 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 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中的常用魔术方法总结
2013/08/02 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
Python中文竖排显示的方法
2015/07/28 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
高中毕业自我鉴定
2013/12/19 职场文书
公司管理建议书范文
2014/03/12 职场文书
健康教育评估方案
2014/05/25 职场文书
小学英语教学随笔
2015/08/14 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python