js实现简单计算器

最新推荐文章于 2022-11-14 13:19:26 发布

qq_36587340

最新推荐文章于 2022-11-14 13:19:26 发布

阅读量129

点赞数

分类专栏： html+css javascript

本文链接：https://blog.csdn.net/qq_36587340/article/details/94168329

版权

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

html+css

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算器</title>
    <style>
        .box {
            width: 180px;
            padding: 15px;
            background-color: #adadad;
        }
        
        .box input[type='button'] {
            width: 46.5px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            margin: 5px;
            outline: none;
            border-radius: 4px;
            font-size: 14px;
        }
        
        #equ {
            width: 94%;
        }
        
        #num {
            width: 94%;
            height: 32px;
            border-radius: 4px;
            margin-bottom: 15px;
            padding-left: 10px;
        }
    </style>
</head>

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

</html>
<script>
    function count(val) {
        var num = document.getElementById('num');
        switch (val) {
            case 'C':
                num.value = ''
                break;
            case '=':
                num.value = eval(num.value) || '';
                break;
            default:
                num.value = num.value + val;
                break;
        }
    }
</script>