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 相关文章推荐
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
微信小程序实现锚点跳转
Nov 23 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中读取和写入WORD文档的代码
2008/04/09 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php简单实现MVC
2015/02/05 PHP
Yii使用技巧大汇总
2015/12/29 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
用Python实现协同过滤的教程
2015/04/08 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
如何用python整理附件
2018/05/13 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
实习单位鉴定意见
2015/06/04 职场文书
四群教育工作总结
2015/08/10 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang