纯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 相关文章推荐
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 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
世界收音机发展史
2021/03/01 无线电
PHP IPV6正则表达式验证代码
2010/02/16 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
javascript demo 基本技巧
2009/12/18 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
js实现随机点名
2021/01/19 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中self原理实例分析
2015/04/30 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
python简单的三元一次方程求解实例
2020/04/02 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
毕业生自我推荐
2013/11/04 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
合作经营协议书范本
2014/09/16 职场文书
失职检讨书大全
2015/01/26 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书