JavaScript经典案例：简易计算器

最新推荐文章于 2022-10-14 19:15:17 发布

原创

最新推荐文章于 2022-10-14 19:15:17 发布 · 584 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

效果图：

js经典案例：实现简单计算器

逻辑：

1、首先通过遍历，为所有元素添加事件； 2、各个按钮功能分别实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .one {
   
   
    width: 50px;
    height: 50px;
    background: #f60;
    display: inline-block;
    line-height: 50px;
    color: #fff;
    margin: 5px 5px 5px 0;
    font-size: 23px;
    text-align: center;
    cursor: pointer;
  }

  .two {
   
   
    width: 112px;
    height: 50px;
    background: #f60;
    color: #fff;
    font-size: 23px;
    display: inline-block;
    margin-top: 5px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;

  }

  .tools {
   
   
    background: blue;
    cursor: pointer;

  }

  .cal {
   
   
    height: 100px;
    position: relative;
    background: #999

最低0.47元/天解锁文章