简易计算器

最新推荐文章于 2024-11-12 11:19:19 发布

柠稔875

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量156

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_74315371/article/details/128981681

版权

这段代码定义了一个HTML和CSS结构，用于创建一个基本的计算器界面，包括数字按钮、运算符和结果显示区。JavaScript函数`check()`、`dy()`和`qc()`分别处理按钮点击事件，实现表达式构建、计算结果展示和清除功能。

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

<style>
div{
    margin: 2px auto;
    background-color: antiquewhite;
}
.c1{
    width: 500px;
    height: 400px;
    border: 1px solid black;
}
.c2{
    border: 1px solid black;
    margin: 20px;
    width: 460px; 
    height: 250px;
    background-color: aquamarine;
    
}
.c3,.c4,.c5{
    margin: 5px;
    margin-left: 5px;
    margin-top: 5px;
    width: 100px;
    height: 50px;
    float: left;
}
.c6{
    margin: 5px;
    margin-left: 5px;
    margin-top: 5px;
    width: 100px;
    height: 50px;
    float: left;
}
#res{
    margin: 20px;
    width: 460px; 
    height: 50px;
}
</style>

<body>
    <div class="c1">
        <input type="text" id="res" value="">
        <div class="c2">
        <button class="c3" onclick="check(this);">7</button>
        <button class="c3" onclick="check(this);">8</button>
        <button class="c3" onclick="check(this);">9</button>
        <button class="c3" onclick="check(this);">+</button>
        <button class="c4" onclick="check(this);">4</button>
        <button class="c4" onclick="check(this);">5</button>
        <button class="c4" onclick="check(this);">6</button>
        <button class="c4" onclick="check(this)">-</button>
        <button class="c5" onclick="check(this);">1</button>
        <button class="c5" onclick="check(this);">2</button>
        <button class="c5" onclick="check(this);">3</button>
        <button class="c5" onclick="check(this)">*</button>
        <button class="c6" onclick="check(this);">/</button>
        <button class="c6" onclick="check(this);">0</button>
        <button class="c6" onclick="dy();">=</button>
        <button class="c6" onclick="qc();">CE</button>
        </div>
    </div>

    <script >
        var exp ="";
        var res=document.getElementById("res");
        // console.log(res);
       function check(obj){ 
         exp += obj.innerText;
        //  res.innerText = exp;
         res.value = exp;
       }
       function dy(){
           
        //    res.innerText = exp +"="+eval(exp);
           res.value = exp +"="+eval(exp);
        //    console.log(exp +"="+eval(exp));
       }
       function qc(){
           exp='';
        //    res.innerText = exp;
           res.value = exp;

       }
    </script>
</body>