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中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 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 session_start()出错原因分析及解决方法
2013/10/28 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
php动态函数调用方法
2015/05/21 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
调试php程序的简单步骤
2019/10/04 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
仿微博字符限制效果实现代码
2012/04/20 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
基于Python绘制个人足迹地图
2020/06/01 Python
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
企业文化建设实施方案
2014/03/22 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
八月一日观后感
2015/06/10 职场文书
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android