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分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
vue 导出文件,携带请求头token操作
Sep 10 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
星际中的相关伤害
2020/03/04 星际争霸
php header示例代码(推荐)
2010/09/08 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
运动会开幕式主持词
2014/03/28 职场文书
专科生就业求职信
2014/06/22 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
校长师德表现自我评价
2015/03/04 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
单位政审意见范文
2015/06/04 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
数据库连接池
2021/04/06 MySQL
Vue实现下拉加载更多
2021/05/09 Vue.js