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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
vue3弹出层V3Popup实例详解
Jan 04 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
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php变量范围介绍
2012/10/15 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
python简单获取数组元素个数的方法
2015/07/13 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
小学语文业务学习材料
2014/06/02 职场文书
学雷锋的心得体会
2014/09/04 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
医学会议开幕词
2016/03/03 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers