纯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 30 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 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
PHP学习笔记之一
2011/01/17 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
python使用str &amp; repr转换字符串
2016/10/13 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
pycharm永久激活超详细教程
2020/10/29 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
矫正人员思想汇报
2014/01/08 职场文书
自荐信格式简述
2014/01/25 职场文书
党支部三会一课计划
2014/09/24 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
返乡农民工证明
2015/06/24 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
Python基本的内置数据类型及使用方法
2022/04/13 Python