纯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 this调用规则说明
Mar 08 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
简单的js表单验证函数
Oct 28 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 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
apache php模块整合操作指南
2012/11/16 PHP
PHP中的use关键字概述
2014/07/23 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
php多进程应用场景实例详解
2019/07/22 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
layui导航栏实现代码
2017/05/19 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Python字符串和文件操作常用函数分析
2015/04/08 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python进阶篇之字典操作总结
2016/11/16 Python
python实现下载文件的三种方法
2017/02/09 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
详解python之协程gevent模块
2018/06/14 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python实现画出e指数函数的图像
2019/11/21 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
小学一年级评语大全
2014/04/22 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
基于Python实现射击小游戏的制作
2022/04/06 Python