纯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 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
JavaScript实现简易计算器小功能
Oct 22 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
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
php实现用户登陆简单实例
2017/04/04 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
Cookie 小记
2010/04/01 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
python编写Logistic逻辑回归
2020/12/30 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
python常量折叠基础知识点讲解
2021/02/28 Python
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
采购文员岗位职责
2013/11/20 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
《假如》教学反思
2014/04/17 职场文书
高中语文课后反思
2014/04/27 职场文书
计划生育标语
2014/06/23 职场文书
公司文体活动总结
2015/05/07 职场文书
机械生产实习心得体会
2016/01/22 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书