JS做的计算器

在这里插入图片描述
.html
<html>
    <head>
        <title>计算器</title>
        <meta charset="utf-8"/>
        <style type="text/css">
        #showdiv{
            border:  solid 1px;
            width: 320px;
            height: 400px;
            text-align: center;
            margin: auto;
            margin-top: 50px;
            border-radius: 10px;
            background-color: floralwhite;
        }
        input[type=text]{
            margin-top: 20px;
            width: 290px;
            height: 40px;
            font-size: 20px;
        }
        input[type=button]{
            width: 60px;
            height: 60px;
            margin-top: 20px;
            margin-left: 5px;
            margin-right: 5px;
            font-size: 30px;
            font-weight: bolder;
        }
        </style>
        <script type="text/javascript">
        function Click(btn){
            var num=btn.value;
            switch(num){
                case "=":document.getElementById("pm").value=eval(document.getElementById("pm").value);
                break;
                case "c":document.getElementById("pm").value="";
                break;
                default:document.getElementById("pm").value+=num;
                break;
            }

        }
        </script>
    </head>
    <body>
        <div id="showdiv">
            <input type="text" name="" id="pm" value=""/><br>

            
            <input type="button" name="" id="" value="1" onclick="Click(this)">
            <input type="button" name="" id="" value="2"onclick="Click(this)">
            <input type="button" name="" id="" value="3"onclick="Click(this)">
            <input type="button" name="" id="" value="4"onclick="Click(this)"><br>
            
            <input type="button" name="" id="" value="5"onclick="Click(this)">
            <input type="button" name="" id="" value="6"onclick="Click(this)">
            <input type="button" name="" id="" value="7"onclick="Click(this)">
            <input type="button" name="" id="" value="8"onclick="Click(this)"><br>
            <input type="button" name="" id="" value="9"onclick="Click(this)">
            
            <input type="button" name="" id="" value="+"onclick="Click(this)">
            <input type="button" name="" id="" value="-"onclick="Click(this)">
            <input type="button" name="" id="" value="*"onclick="Click(this)"><br>
            <input type="button" name="" id="" value="/"onclick="Click(this)">
            <input type="button" name="" id="" value="0" onclick="Click(this)">
           <input type="button" name="" id="" value="c" onclick="Click(this)">
           <input type="button" name="" id="" value="=" onclick="Click(this)">
            
        </div>
    </body>
</html>
为了方便，都写在了html里，遇到了一个坑把X当成了*，以至于后面的eval()函数运算识别不出来，考CCF的后遗症…
猜你喜欢
