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 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
$.extend 的一个小问题
Jun 18 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
Vue 实现拨打电话操作
Nov 16 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
学习2014年全国两会心得体会
2014/03/12 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
4s店活动策划方案
2014/08/25 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
Java中的Kotlin 内部类原理
2022/06/16 Java/Android