Javascript一个简单的计算器

最新推荐文章于 2024-04-25 09:54:19 发布

EurekaSeveN7

最新推荐文章于 2024-04-25 09:54:19 发布

阅读量521

点赞数

文章标签：初学

本文链接：https://blog.csdn.net/EurekaSeveN7/article/details/81437641

版权

初学JavaScript的第2个星期，利用一些简单的逻辑与函数瞎做了个计算器

JS部分

        function calCulate(val){

        var num = document.getElementById("text");
        switch(val){
            case "=":
            if(eval(num.value)==null){
                break;

            }
            num.value = eval(num.value);

            break;

            case "C":
            num.value = "";
            break;

            default:
             num.value =num.value+val;
            break;
        }   
    }

css部分

<style type="text/css">

            div{
                width: 400px;

            }
            .btn{

                float: left;
                display: block;
                width: 100px;
                height: 100px;
                font-size: 30px;
            }
            .input{
                width: 396px;
                height: 100px;
                text-align: right;
                font-size: 50px;

            }
            .btn1{
                font-size: 50px;
                width: 400px;
                height: 100px;
                background-color: orange;

            }
        </style>

html部分

    <body>
        <input class="input" id="text" type="text" value=""/>
        <div>
        <button class="btn"  value="7"  onclick="calCulate(this.value)">7</button>
        <button class="btn"  value="8"  onclick="calCulate(this.value)">8</button>
        <button class="btn"  value="9"  onclick="calCulate(this.value)">9</button>
        <button class="btn"  value="+" onclick="calCulate(this.value)">+</button>
        <button class="btn"  value="4" onclick="calCulate(this.value)">4</button>
        <button class="btn" value="5" onclick="calCulate(this.value)">5</button>
        <button class="btn" value="6" onclick="calCulate(this.value)">6</button>
        <button class="btn" value="-" onclick="calCulate(this.value)">-</button>
        <button class="btn" value="1" onclick="calCulate(this.value)">1</button>
        <button class="btn" value="2" onclick="calCulate(this.value)">2</button>
        <button class="btn" value="3" onclick="calCulate(this.value)">3</button>
        <button class="btn" value="*" onclick="calCulate(this.value)">*</button>
        <button class="btn" value="." onclick="calCulate(this.value)">.</button>
        <button class="btn" value="0" onclick="calCulate(this.value)">0</button>
        <button class="btn" value="C" onclick="calCulate(this.value)">C</button>
        <button class="btn" value="/" onclick="calCulate(this.value)">/</button>
        <button class="btn1" value="=" onclick="calCulate(this.value)">=</button>
        </div>
    </body>

这里写图片描述

EurekaSeveN7

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript一个简单的计算器

初学JavaScript的第2个星期，利用一些简单的逻辑与函数瞎做了个计算器JS部分 function calCulate(val){ var num = document.getElementById("text"); switch(val){ case "=": if(eval(num....
复制链接

扫一扫