[js] 小案例---简易版计算器

最新推荐文章于 2024-04-30 16:57:21 发布

533_

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量154

点赞数

分类专栏： # js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_14993591/article/details/120218210

版权

js 专栏收录该内容

154 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<title>计算器</title>
<style>
  #all {
    width: 300px;
    height: 500px;
    background: #ccc;
    margin: auto;
  }

  td {
    width: 60px;
    height: 60px;
    text-align: center;
  }

  #jp {
    width: 270px;
    height: 80px;
    margin: 0 auto;
    position: relative;
  }

  #jg {
    width: 270px;
    height: 70px;
    background: #ffffff;
    position: absolute;
    top: 10px;
  }
</style>

<body>
  <div id="all">
    <div id="jp">
      <div id="jg"></div>
    </div>
    <table width="90%" height="300" border="1" align="center" cellspacing="10">
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>+</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>-</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>*</td>
      </tr>
      <tr>
        <td>0</td>
        <td>.</td>
        <td id="dengyu">=</td>
        <td>/</td>
      </tr>
      <tr>
        <td id="cle">清空</td>
        <td id="tg">退格</td>
      </tr>
    </table>
  </div>

  <script>
    var oTd = document.querySelectorAll('td')
    var oDiv = document.querySelector('#jg')
    // console.log(oDiv)
    console.log(oTd)
    
    var str = ''
    oTd.forEach(function(item,index){
      // console.log(item)
      item.addEventListener('click',function(){
        // console.log(item.innerText)
        if(item.innerText==='='){
          oDiv.innerText = eval(str)   //计算字符串类型的表达式  eval('5*4')
          str = ''    //计算后清空，方便下一次输入
        }
        else if(item.innerText==='清空'){
          str = ''
          oDiv.innerText = '0'
        }
        else if(item.innerText==='退格'){
          str = str.substr(0,str.length-1)   //删除最后一个字符
          oDiv.innerText = str
        }
        // 其余字符直接拼接就行
        else{
          str += item.innerText
          oDiv.innerText = str

        }
      })
    })

  </script>
</body>

</html>

在这里插入图片描述

533_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[js] 小案例---简易版计算器

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /></head><title>计算
复制链接

扫一扫