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 相关文章推荐
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
angular中的post请求处理示例详解
Jun 30 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
Symfony2联合查询实现方法
2016/03/18 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
Python 实现随机数详解及实例代码
2017/04/15 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
大学毕业自我鉴定范文
2014/02/03 职场文书
小学端午节活动方案
2014/03/13 职场文书
授权委托书
2014/09/17 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
交通事故案件代理词
2015/05/23 职场文书
宾馆安全管理制度
2015/08/06 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
MySQL慢查询的坑
2021/04/28 MySQL
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS