纯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 12 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
详解vue 组件注册
Nov 20 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
原生JS实现京东查看商品点击放大
Dec 21 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 str_pad 函数用法简介
2009/07/11 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
综合办公室主任职责
2013/12/16 职场文书
公益活动策划方案
2014/01/09 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
Python中的 enumerate和zip详情
2022/05/30 Python