纯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 相关文章推荐
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
JS实现购物车基本功能
Nov 08 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
php分页函数完整实例代码
2014/09/22 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
简单的JS多重继承示例
2008/03/13 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
JS实现随机点名器
2020/04/12 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
汽车检测与维修专业求职信
2014/07/04 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
个人优缺点总结
2015/02/28 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
致运动员赞词
2015/07/22 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang