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 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
javascript常用的设计模式
Feb 09 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 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/10/03 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
js获取内联样式的方法
2015/01/27 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
团结演讲稿范文
2014/05/23 职场文书
承诺书样本
2014/08/30 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
八一建军节主持词
2015/07/01 职场文书