JavaScript完成简单的计算器

最新推荐文章于 2023-09-18 09:54:05 发布

写不完的bug

最新推荐文章于 2023-09-18 09:54:05 发布

阅读量302

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/MYHYa/article/details/110696618

版权

JS 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript创建一个简单的网页计算器。内容包括CSS部分，用于设置计算器的样式，以及HTML body部分，用于构建计算器的布局。核心是JavaScript部分，讲解了实现计算器功能的逻辑代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS部分

<style>
        .con{
            border: 1px solid #000000;
            width: 500px;
            height: 600px;
            text-align: center;
            position: relative;
            left:0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .con>div{
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            box-shadow: 2px 2px 2px #CCCCCC;
            float: left;
            margin: 11px;
            text-align: center;
            font-size: 40px;
            line-height: 100px;
            user-select: none;
        }
        .con>input{
            width: 90%;
            height: 30px;
            line-height: 30px;
            font-size: 25px;
            text-align: right;
            margin-top: 20px;
            margin-bottom: 20px;
            box-shadow: 3px 3px 3px #CCCCCC;
            outline: none;
            padding: 5px 10px;
            background-color: white;
            border: 1px solid #000000;
        }
        .clear::after{
            content: "";
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
        }
        .clear{
            zoom: 1;
        }
    </style>

在页面中间创建一个计算器的样式

body部分

<div class="con clear">
        <input type="text" id="input" disabled>
        <div class="divs">7</div>
        <div class="divs">8</div>
        <div class="divs">9</div>
        <div class="divs">-</div>
        <div class="divs">4</div>
        <div class="divs">5</div>
        <div class="divs">6</div>
        <div class="divs">+</div>
        <div class="divs">1</div>
        <div class="divs">2</div>
        <div class="divs">3</div>
        <div class="divs">*</div>
        <div class="divs">C</div>
        <div class="divs">0</div>
        <div class="divs">=</div>
        <div class="divs">/</div>
    </div>

JavaScript部分

<script>
           var input,divs,type;
           var value1="",value2="";
        
            init();
           function init(){
              input=document.getElementById("input");
              divs=document.getElementsByClassName("divs");
               for(var i=0;i<divs.length;i++){
                   divs[i].onclick=clickHandler
               }

           }

           function clickHandler(){
                // console.log(this.innerHTML);//暂时认知在点击的函数中this是被点击的元素
                if(isNaN(this.innerHTML)){
                    calculateValue(this.innerHTML);
                }else{
                    setInputValue(Number(this.innerHTML))
                }
           }

           function setInputValue(num){
                if(!type){
                    value1=Number(value1+num).toString();
                    input.value=value1;
                }else{
                    value2=Number(value2+num).toString();
                    input.value=value1+type+value2;
                }
           }

           function calculateValue(_type){
                if(_type==="C") return clearInput();//执行函数并且跳出当前函数，并且不继续向下执行
                if(_type==="=") return calculate();
                if(!value1)return;
                type=_type;
           }

           function clearInput(){
              value1="";
              value2="";
              type="";
              input.value="";
           }

           function calculate(){
               if(!type || !value2)return;
               var s;
                switch(type){
                    case "+":
                    s=Number(value1)+Number(value2);
                    break;
                    case "-":
                    s=value1-value2;
                    break;
                    case "*":
                    s=value1*value2;
                    break;
                    case "/":
                    s=value1/value2;
                    break;
                }
                input.value=value1+type+value2+"="+s;
                value1=s.toString();
                value2="";
                type="";
           }
    </script>