html计算器

最新推荐文章于 2024-05-10 11:30:24 发布

stb13259324328

最新推荐文章于 2024-05-10 11:30:24 发布

阅读量552

点赞数

文章标签： HTML CSS JavaScript 计算用户交互

本文链接：https://blog.csdn.net/stb13259324328/article/details/121639053

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            margin: 0px auto;           
        }
        button{
            width: 80px;
            height: 70px; 
            background-color: rgb(71, 61, 66);
            box-shadow: -5px 5px 10px #888888;
            color: ivory;
            font-size: 20px;
        }
        input{
            width: 98%;
            height: 40px;
            box-shadow: -5px 5px 10px #888888; 
        }
        th{
            padding-left: 30px;
            padding-bottom: 30px;
        }

    </style>
</head>
<body>
    
    <table >
        <tr>
            <th colspan="4"><input type="text" id="c"></th>
        </tr>
        <tr>
            <th><button value="7" onclick="compute('7')">7</button></th>
            <th><button value="8" onclick="compute('8')">8</button></th>
            <th><button value="9" onclick="compute('9')">9</button></th>
            <th><button value="+" onclick="compute('+')">+</button></th>
        </tr>

        <tr>
            <th><button value="4" onclick="compute('4')">4</button></th>
            <th><button value="5" onclick="compute('5')">5</button></th>
            <th><button value="6" onclick="compute('6')">6</button></th>
            <th><button value="-" onclick="compute('-')">-</button></th>
        </tr>

        <tr>
            <th><button value="1" onclick="compute('1')">1</button></th>
            <th><button value="2" onclick="compute('2')">2</button></th>
            <th><button value="3" onclick="compute('3')">3</button></th>
            <th><button value="*" onclick="compute('*')">*</button></th>
        </tr>

        <tr>
            <th><button value="0" onclick="compute('0')">0</button></th>
            <th><button value="." onclick="compute('.')">.</button></th>
            <th><button value="/" onclick="compute('/')">/</button></th>
            <th><button value="=" onclick="result()">=</button></th> 
            <th><button value="" onclick="guizero()">归零</button></th> 
        </tr>
    </table>

    <script>
        function compute(val) {
            let count = document.getElementById("c");
            count.value = count.value+val;
        }

        function result() {
            let re = document.getElementById("c");
            re.value = eval(re.value);
        }

        function guizero() {
            let numb = document.getElementById("c");
            numb.value = "";
        }

    </script>
</body>
</html>

stb13259324328

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html计算器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫