js制作简单的计算器

最新推荐文章于 2024-08-03 18:28:24 发布

_Adoph

最新推荐文章于 2024-08-03 18:28:24 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签：计算器

本文链接：https://blog.csdn.net/weixin_44189739/article/details/86651805

版权

js 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
语法：
eval(string)；


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 250px;
            background: #cccccc;
            overflow: hidden;
        }
        #outp1{
            margin: 0;
            font: 14px/16px "微软雅黑";
            height: 16px;
            color: #333;
            text-align: right;
            border: 1px solid #fff;
        }
        #outp2{
            font: 20px/20px "微软雅黑";
            height: 18px;
            text-align: right;
            color: #333;
            margin: 0;
            border: 1px solid #fff;
        }
        .btn{
            overflow: hidden;
            margin-left:1px;
        }
        .numb,.opera{
            width: 60px;
            line-height: 40px;
            margin: 0;
            padding: 0;
            display: block;
            text-align: center;
            float: left;
            background-color: pink;
            border: 1px solid #cccccc;
        }

    </style>
</head>
<body>
    <div class="box">
        <p id="outp2"></p>
        <p id="outp1"></p>

        <div class="btn">
            <span class="numb">(</span>
            <span class="numb">)</span>
            <span class="numb">%</span>
            <span class="numb">C</span>

            <span class="numb">7</span>
            <span class="numb">8</span>
            <span class="numb">9</span>
            <span class="numb">/</span>

            <span class="numb">4</span>
            <span class="numb">5</span>
            <span class="numb">6</span>
            <span class="numb">*</span>

            <span class="numb">1</span>
            <span class="numb">2</span>
            <span class="numb">3</span>
            <span class="numb">-</span>

            <span class="numb">0</span>
            <span class="numb">.</span>
            <span class="numb">=</span>
            <span class="numb">+</span>

        </div>
    </div>
    <script type="text/javascript">
        var oBtn=document.getElementsByClassName("numb");//按键
        var outp1=document.getElementById("outp1"); //输出1
        var outp2=document.getElementById("outp2");//输出2,结果
        var str="";
        for(var i=0;i<oBtn.length;i++){
            oBtn[i].onclick=function () {
                switch (this.innerHTML) {
                    case "=":   outp2.innerHTML=eval(str);//等号,输出结果
                                str="";
                                 break;
                    case "C":   outp1.innerHTML="";	//清零
                                outp2.innerHTML="";
                                str="";
                                break;
                    default:    str+=this.innerHTML;
                                outp1.innerHTML=str;
                       			 break;
                }
            }
        }
    </script>
</body>
</html>