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面向对象入门基础详细介绍
Sep 05 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
实例详解Node.js 函数
Jun 10 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
JS实现炫酷轮播图
Nov 15 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实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php防止sql注入简单分析
2015/03/18 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
vue实现购物车列表
2020/06/30 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python3实现windows下同名进程监控
2018/06/21 Python
python三大神器之fabric使用教程
2019/06/10 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
小学综治宣传月活动总结
2014/07/02 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
汽车转让协议书
2015/01/29 职场文书
2015年工会工作总结
2015/03/30 职场文书
车间安全生产管理制度
2015/08/06 职场文书
新入职员工工作总结
2015/10/15 职场文书
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS