纯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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
优雅地使用loading(推荐)
Apr 20 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
信用卡效验程序
2006/10/09 PHP
php变量范围介绍
2012/10/15 PHP
php中rename函数用法分析
2014/11/15 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
对Angular中单向数据流的深入理解
2018/03/31 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
旷课检讨书1000字
2014/02/14 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
计算机实训报告范文
2014/11/05 职场文书
2014年教研室工作总结
2014/12/06 职场文书
技能培训通讯稿
2015/07/18 职场文书
Oracle使用别名的好处
2022/04/19 Oracle
python开发人人对战的五子棋小游戏
2022/05/02 Python