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 相关文章推荐
分页栏的web标准实现
Nov 01 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
vue-router单页面路由
Jun 17 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
详解vue组件基础
May 04 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
模拟xcopy的函数
2006/10/09 PHP
将数组写入txt文件 var_export
2009/04/21 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
vue计算属性和监听器实例解析
2018/05/10 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
Python 复平面绘图实例
2019/11/21 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
护理专业自荐信范文
2014/02/26 职场文书
个人培训自我鉴定
2014/03/28 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
2014年业务工作总结
2014/11/17 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
Redis过期数据是否会被立马删除
2022/07/23 Redis
Apache自带的ab压力测试工具的实现
2022/07/23 Servers