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的类继承
Mar 05 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
拖动时防止选中
Feb 03 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 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
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
调试php程序的简单步骤
2019/10/04 PHP
代码生成器 document.write()
2007/04/15 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
Python脚本实现格式化css文件
2015/04/08 Python
Python中decorator使用实例
2015/04/14 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Python 列表的清空方式
2020/01/13 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
建筑工地宣传标语
2014/06/18 职场文书
开展读书活动总结
2014/06/30 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
家庭困难证明
2014/10/12 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
webpack的移动端适配方案小结
2021/07/25 Javascript