html+CSS+JS实现简单计算器

最新推荐文章于 2024-01-28 22:53:06 发布

IT阿东

最新推荐文章于 2024-01-28 22:53:06 发布

阅读量149

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/bhh55/article/details/129959907

版权

该文章展示了一个使用HTML结构、CSS样式和JavaScript功能实现的基础计算器。HTML定义了计算器的布局，CSS提供了样式，而JavaScript处理了点击按钮进行计算的功能，包括加减乘除以及清除和删除操作。

摘要由CSDN通过智能技术生成

html代码

<div class="calculator">
      <div class="bar bar-top">
            <span></span>
      </div>  
  
    <div class="screen">
        <div class="prev"></div>
        <div class="current"></div>
    </div>
    <div class="buttons">
        <button class="fn btn-del" data-type="dwleteFn">X</button>
        <button class="fn btn-clear"data-type="clear">00</button>
        <button class="fn btn-operate" data-type="operate">*</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button class="fn btn-operate" data-type="operate">+</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button class="fn btn-operate" data-type="operate">/</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button class="fn btn-operate"  data-type="operate">-</button>
        <button>0</button>
        <button class="fn btn-equl" data-type="equal">=</button>
    </div>
        <div class="bar">
            <span></span>
        </div>  
</div>
</div>

css代码

<style>
         * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
         }
         body {
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
         }
         .calculator {
            height: 800px;
            width: 460px;
            background-color: black;
            border-radius: 60px;
         }
         .screen {
            height: 240px;
            display: flex;
            color: #fff;
            background-color: darkgray;
            border-radius: 60px;
            font-size: 40px;
            flex-direction: column;
            align-items: flex-end;
            padding-right: 20px;
         }
         .current {
            font-size: 60px;
            
         }
        
         .bar {
            display: flex;
            justify-content: center;
            padding-top: 10px;
        
         }
         .bar span {
            height: 2px;
            width: 110px;
            background-color: #fff;
           
         }
         .buttons {
       

            display: grid;
            /* 设置为五行四列 */
           /*  grid-template-rows: 70px 70px 70px 70px ; 
            grid-template-columns: 70px 70px 70px 70px 70px;  */
            grid-template-rows: repeat(5,1fr);
            grid-template-columns: repeat(4,1fr);
            grid-gap: 10px;
         }
         .buttons button {
            width: 70px;
            height: 70px;
            font-size: 40px;
            border-radius: 50%;
            color: blanchedalmond;
            background-color: #333;
            border: none;
            margin: 10px;
         }
         .buttons .btn-del {
            width: 180px;
            border-radius: 40px;
            grid-column-start: 1;
            grid-column-end: 3;

         }
         .buttons .btn-equl {
            width: 290px;
            border-radius: 40px;
           /*  grid-column-start: 2;
            grid-column-end: 5; */
            /* 上面的写法等价于下面的 */
            grid-column: 2/5;
        
            
         }
         .buttons  .fn {
            background-color: #bf9c0b;

         }
         .buttons button:active {

            filter: brightness(150%);
         }
    </style>

js代码

<script>
        /* var x=5,y=20;
        eval("document.write(x*y)");
        document.write("<br>" + eval("2+2"));
        document.write("<br>" + eval(x+17)); */
        const buttons=document.querySelector('.buttons');
        const preElement=document.querySelector('.prev');
        const currentElement=document.querySelector('.current');
     

      var  currentNumber='', prevNumber='', sign=''
        buttons.addEventListener('click',e => {
        console.log(e.target)
        const type=e.target.dataset.type
        console.log(type)
        const  text= e.target.textContent
        console.log(text)
          if(type=='equal'){
            calculate()
   
          }
          else if(type=='dwleteFn'){
            deleteFn()

          }
         else if (type=='operate'){
            operate(text)
          }
          else if(type=='clear'){
            clear()
          
          } else
            {
               pushNumber(text)
            }
          
          updateScreen()
         })
        
        function pushNumber(num) {
            currentNumber=currentNumber+num
            alert(num)
  

        }
        //清除
        function clear() {
         currentNumber='' ;
         prevNumber='';
         sign='';

        }
        //删除一位
        function deleteFn() {
         if(!currentNumber.toString().length) return
         
       currentNumber=currentNumber.toString().slice(0,-1);
         
        }
        function operate(text) {
         if(!currentNumber.toString().length) return
  
         sign=text;
         prevNumber=currentNumber
         currentNumber=''


        }
        function calculate() {
         let result=0
         const prev=Number(prevNumber)
         const current=Number(currentNumber)
         console.log('前一个数'+prev)
         console.log('后一个数'+current)

         switch(sign){
            case '+':
            result=prev+current
            break
            case '-':
            result=prev-current
            break
            case '*':
            result=prev*current
            break
            case '/':
            result=prev/current
            break
            default:
               return;

            
         }
         currentNumber=result;
         sign=''
         prevNumber=''
      
        }
function updateScreen() {
   currentElement.textContent=currentNumber
   if(sign) {
      preElement.textContent=prevNumber+sign

   }else{
      preElement.textContent=' '
   }
}

    </script>

实现效果：