纯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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
JavaScript定时器常见用法实例分析
Nov 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
一些PHP写的小东西
2006/12/06 PHP
PHP文件上传实例详解!!!
2007/01/02 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
json 实例详细说明教程
2009/10/31 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Python如何获取文件路径/目录
2020/09/22 Python
numba提升python运行速度的实例方法
2021/01/25 Python
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
宪法宣传周工作方案
2014/05/26 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
售后服务质量承诺书
2015/04/29 职场文书
七夕情人节问候语
2015/11/11 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
关于的python五子棋的算法
2022/05/02 Python