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基础资料整理3 正则
Dec 06 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
jquery密码强度校验
Dec 02 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
vue打包时去掉所有的console.log
Apr 10 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
取选中的radio的值
2010/01/11 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python实现将xml导入至excel
2015/11/20 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
python文件读取失败怎么处理
2020/06/23 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
高一英语教学反思
2014/01/22 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
优秀员工事迹材料
2014/12/20 职场文书
给老师的一封感谢信
2015/01/20 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
Nginx如何配置根据路径转发详解
2022/07/23 Servers