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 MD4
Dec 20 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
浅析Ajax语法
Dec 05 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
es6中比较有用的7个技巧小结
Jul 12 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下MYSQL limit的优化
2008/01/10 PHP
劣质的PHP代码简化
2010/02/08 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
php网站地图生成类示例
2014/01/13 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
javascript静态的url如何传递
2007/05/03 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
Python 26进制计算实现方法
2015/05/28 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
深入了解Python enumerate和zip
2020/07/16 Python
python speech模块的使用方法
2020/09/09 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
给酒店员工的表扬信
2014/01/11 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Python制作春联的示例代码
2022/01/22 Python
Python 全局空间和局部空间
2022/04/06 Python