首页 > 代码库 > JS+CSS+HTML简单计算器

JS+CSS+HTML简单计算器

2024-08-21 21:53:39   223人阅读

<!doctype html>
<html>
    <head>
        <title>计算器</title>
        <meta charset="utf-8">
        <script type="text/javascript">
            //参数e用来接收传入的event事件
            function cal(e){
                //1.获取事件源，只处理button事件
                //浏览器兼容性
                var obj=e.srcElement || e.target;
                if(obj.nodeName != "INPUT"){
                    return;
                }
                var value=obj.value;
                var p=document.getElementById("screen");
                if(value == "C"){
                    //2.如果是[C],清空p
                    p.innerText="";
                }else if(value == "="){
                    //3.如果是[=],则运算
                    try{
                        var sum=parseFloat(eval("("+p.innerText+")")).toFixed(8);
                        p.innerText=sum;
                    }catch(e){
                        //发生异常,给予错误提示
                        p.innerText="Err";
                    }   
                }else{
                    //4.其他将value追加到p中
                   p.innerText=p.innerText+value;
                }
            }
        </script>
        <style type="text/css">
            .panel{
                border: 3px solid #ccc;
                width: 160px;
                margin: 150px auto;
            }
            p{
                border: 1px solid #ccc;
                height: 28px;
                width: 70%;
                margin: 5px 3px;
                line-height: 28px;
                font-family: ‘微软雅黑‘,‘文泉驿正体‘,‘黑体‘;
            }
            input{
                display: block;
                width: 30px;
                height: 30px;
                margin: 5px 5px;
                background-color: #ccc;
                border: 0;
                float: left;
            }
            p{
                display: block;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="panel" onclick="cal(event);">
            <div class="display">
                <p id="screen"></p>
                <input type="button" value="C">
                <!--此div用来消除浮动影响,设置为不可见-->
                <div style="border:0;clear:left;"></div>
            </div>
            <div class="opreator">
                <input type="button" value="7">
                <input type="button" value="8">
                <input type="button" value="9">
                <input type="button" value="/">
                <input type="button" value="4">
                <input type="button" value="5">
                <input type="button" value="6">
                <input type="button" value="*">
                <input type="button" value="1">
                <input type="button" value="2">
                <input type="button" value="3">
                <input type="button" value="-">
                <input type="button" value="0">
                <input type="button" value=".">
                <input type="button" value="=">
                <input type="button" value="+">
                <!--此div用来消除浮动影响,设置为不可见-->
                <div style="border:0;clear:left;"></div>
            </div>    
        </div>
    </body>
</html>

 

JS+CSS+HTML简单计算器


联系
我们