纯js代码实现简单计算器


Posted in Javascript onDecember 02, 2015

本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢。具体如下:
运行效果截图如下:

纯js代码实现简单计算器

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
 <title> new document </title> 
 <script type="text/javascript">
  function count(){
    var txt1  = parseInt( document.getElementById('txt1').value);//获取第一个输入框的值
    var txt2  = parseInt( document.getElementById('txt2').value);//获取第二个输入框的值
    var select = document.getElementById('select').value;//获取选择框的值
    var result = '';
    switch (select)
     {
      case '+':
        result = txt1 + txt2;
        break;
      case '-':
        result = txt1 - txt2;
        break;
      case '*':
        result = txt1 * txt2;
        break;
      case '/':
        result = txt1 / txt2;
        break; 
     }
     document.getElementById('fruit').value = result;//设置结果输入框的值 
  }
 </script> 
 </head> 
 <body>
  <input type='text' id='txt1' /> 
  <select id='select'>
    <option value='+'>+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type='text' id='txt2' /> 
  <input type='button' value=' = ' onclick = "count()" /> <!--通过 = 按钮来调用创建的函数,得到结果--> 
  <input type='text' id='fruit' />  
 </body>
</html>

复制粘贴上方代码即可实现简单的计算器功能,希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
jquery判断输入密码两次是否相等
Apr 22 #Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 #Javascript
Jqgrid之强大的表格插件应用
Dec 02 #Javascript
整理Javascript事件响应学习笔记
Dec 02 #Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 #Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 #Javascript
原生JavaScript实现异步多文件上传
Dec 02 #Javascript
You might like
PHP 第二节 数据类型之数值型
2012/04/28 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
JS循环遍历JSON数据的方法
2014/07/08 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
python魔法方法-属性访问控制详解
2016/07/25 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python+pyqt5编写md5生成器
2019/03/18 Python
python os.fork() 循环输出方法
2019/08/08 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
领导干部考察材料
2014/02/08 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
五好家庭事迹材料
2014/12/20 职场文书
英文邀请函
2015/02/02 职场文书
工程部经理岗位职责
2015/02/02 职场文书
银行求职信范文
2019/05/13 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android