js制作简单的计算器

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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值