纯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框架
Aug 13 Javascript
Js 随机数产生6位数字
May 13 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
使用vue实现各类弹出框组件
Jul 03 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
js 实现碰撞检测的示例
Oct 28 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
九年级物理教学反思
2014/01/29 职场文书
情侣吵架检讨书
2014/02/05 职场文书
关于长城的导游词
2015/01/30 职场文书
工程部岗位职责
2015/02/10 职场文书
现货白银电话营销话术
2015/05/29 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
PHP解决高并发问题
2021/04/01 PHP
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
SQL Server中搜索特定的对象
2022/05/25 SQL Server
app场景下uniapp的扫码记录
2022/07/23 Java/Android