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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
js编写的treeview使用方法
Nov 11 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
jquery validate demo 基础
2015/10/29 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python调用c++传递数组的实例
2019/02/13 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
通过自学python能找到工作吗
2020/06/21 Python
python3访问字典里的值实例方法
2020/11/18 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
保密承诺书范文
2014/03/27 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
python源码剖析之PyObject详解
2021/05/18 Python