js实现简单的计算器功能


Posted in Javascript onJanuary 16, 2017

话不多说,请看示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简单的计算器</title>
  <style>
    * {
      margin: 0 auto;
      padding: 0px;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    a {
      text-decoration: none;
    }
    .wrap {
      width: 30%;
      min-width: 250px;
      margin: 0 auto;
      border: 1px solid #b1b1b1;
    }
    .wrap .screen {
      width: 100%;
      height: 150px;
      background-color: #8d8d8d;
    }
    .wrap .screen .string {
      height: 100%;
      user-select: none;
      font-size: 30px;
      word-break: break-all;
    }
    .wrap .button-group {
      width: 100%;
      margin-top: 5px;
    }
    .wrap .button-group td {
      width: 25%;
    }
    .wrap .button-group td a {
      display: inline-block;
      height: 80px;
      text-align: center;
      background-color: #d5d5d5;
      color: #000;
      line-height: 80px;
      font-size: 25px;
      width: 100%;
      user-select: none;
    }
    .wrap .button-group td a:hover {
      background-color: #9d9d9d;
      color: #002a80;
    }
    .wrap .button-group td a.active {
      background-color: red;
    }
  </style>
</head>
<body>
<div class="wrap">
  <div class="screen">
    <p class="string"></p>
  </div>
  <div class="button-group">
    <table cellspacing="5" cellpadding="10" border="0" width="100%">
      <tr>
        <td><a href="javascript:void(0);">7</a></td>
        <td><a href="javascript:void(0);">8</a></td>
        <td><a href="javascript:void(0);">9</a></td>
        <td><a href="javascript:void(0);">*</a></td>
      </tr>
      <tr>
        <td><a href="javascript:void(0);">4</a></td>
        <td><a href="javascript:void(0);">5</a></td>
        <td><a href="javascript:void(0);">6</a></td>
        <td><a href="javascript:void(0);">/</a></td>
      </tr>
      <tr>
        <td><a href="javascript:void(0);">1</a></td>
        <td><a href="javascript:void(0);">2</a></td>
        <td><a href="javascript:void(0);">3</a></td>
        <td><a href="javascript:void(0);">+</a></td>
      </tr>
      <tr>
        <td><a href="javascript:void(0);">DEL</a></td>
        <td><a href="javascript:void(0);">0</a></td>
        <td><a href="javascript:void(0);" class="active">=</a></td>
        <td><a href="javascript:void(0);">-</a></td>
      </tr>
    </table>
  </div>
</div>
<script>
  var numString = document.getElementsByClassName("string")[0];
  var buttonGroup = document.getElementsByTagName("a");
  var screen = document.getElementsByClassName("string")[0];
  var num1 = 0;
  var num2 = 0;
  var count = 0;
  var f;
  var flag = true;
  /*控制输入的是数字*/
  var flag2 = true;
  /*控制是否连续点击符号*/
  screen.onclick = function () {
    numString.innerHTML = "";
  };
  for (var i = 0; i < buttonGroup.length; i++) {
    buttonGroup[i].onclick = function () {
      switch (this.innerHTML) {
        case "0":
        case "1":
        case "2":
        case "3":
        case "4":
        case "5":
        case "6":
        case "7":
        case "8":
        case "9":
          if (!flag) {
            numString.innerHTML = "";
            flag2 = true;
          }
          flag = true;
            numString.innerHTML += this.innerHTML;
          break;
        case "DEL":
          numString.innerHTML = numString.innerHTML.substr(0, numString.innerHTML.length - 1);
          break;
        case "+":
        case "-":
        case "*":
        case "/":
          f = this.innerHTML;
          count++;
          if (flag2) {
            flag = false;
            /*控制输入的是符号*/
            if (count == 1) {
              num1 = numString.innerHTML;
            } else {
              flag2 = false;
              num2 = numString.innerHTML;
              numString.innerHTML = eval(num1 + f + num2);
              num1 = numString.innerHTML;
            }
          }
          break;
        case "=":
          num2 = numString.innerHTML;
          numString.innerHTML = eval(num1 + f + num2);
          count = 0;
          flag = !flag;
          break;
      }
    }
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
VUE长按事件需求详解
Oct 18 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 #Javascript
基于jQuery实现的打字机效果
Jan 16 #Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 #Javascript
JavaScript严格模式详解
Jan 16 #Javascript
关于iframe跨域POST提交的方法示例
Jan 15 #Javascript
JavaScript中利用for循环遍历数组
Jan 15 #Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 #Javascript
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
继续学习javascript闭包
2015/12/03 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python中itertools模块用法详解
2014/09/25 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python读写配置文件操作示例
2019/07/03 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
简短的公司员工自我评价分享
2013/11/13 职场文书
银行门卫岗位职责
2013/12/29 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
自我检讨报告
2015/01/28 职场文书
2015年敬老月活动总结
2015/03/27 职场文书