纯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脚本性能优化注意事项
Nov 18 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
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
dedecms模版制作使用方法
2007/04/03 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python单链表简单实现代码
2016/04/27 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python变量和字符串详解
2017/04/29 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
OpenCV 模板匹配
2019/07/10 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
Python request中文乱码问题解决方案
2020/09/17 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
大专生自我评价
2014/01/28 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
法人委托书范本
2014/04/04 职场文书
销售员岗位职责
2014/06/09 职场文书
迎国庆横幅标语
2014/10/08 职场文书
受资助学生感谢信
2015/01/21 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
学雷锋活动简报
2015/07/20 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers