纯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 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
javascript类型转换使用方法
Feb 08 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
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
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php网站地图生成类示例
2014/01/13 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php实现搜索类封装示例
2016/03/31 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
js实现简单抽奖功能
2020/11/24 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python标准库sched模块使用指南
2017/07/06 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
OpenCV 模板匹配
2019/07/10 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
第二次离婚起诉书
2015/05/18 职场文书
《海上日出》教学反思
2016/02/23 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL