使用“三剑客”做一个简易计算器

龙，学习中......

已于 2023-05-09 12:32:20 修改

阅读量335

点赞数

分类专栏： Web 文章标签： html css javascript

于 2022-04-15 23:00:43 首次发布

本文链接：https://blog.csdn.net/weixin_57595610/article/details/124205892

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用HTML、原生CSS以及原生JavaScript做一个简易计算器

<!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>计算器</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: rgba(173, 255, 47, 0.5);
        }

        #main {
            position: relative;
            width: 400px;
            height: 600px;
            display: flex;
            top: 100px;
            left: 40%;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
            background-color: rgba(66, 77, 88, 1);
            border: 3px solid gray;
        }

        #dUp {
            width: 370px;
            height: 80px;
            box-sizing: border-box;
            position: absolute;
            display: flex;
        }

        #text {
            position: absolute;
            padding: 2px;
            width: 300px;
            height: 100%;
            box-sizing: border-box;
            background-color: grey;
            border: 1px solid cadetblue;
        }

        #textbox1 {
            text-align: right;
            padding-right: 5px;
            box-sizing: border-box;
            font-size: 20px;
            font-weight: bolder;
            color: grey;
            width: 295px;
            height: 35px;
            border: 0;
        }

        #textbox2 {
            text-align: right;
            padding-right: 5px;
            box-sizing: border-box;
            font-size: 30px;
            width: 295px;
            height: 40px;
            border: 0;
        }

        #clsbox {
            position: absolute;
            display: flex;
            right: 0;
            padding: 2px;
            width: 65px;
            height: 100%;
            justify-content: center;
            box-sizing: border-box;
            background-color: grey;
        }

        #button {
            position: absolute;
            top: 22%;
            width: 340px;
            height: 400px;
            background-color: brown;
            border: 1px solid cadetblue;
        }

        #cls {
            width: 60px;
            height: 75px;
            font-size: 30px;
            color: aquamarine;
            background-color: darkred;
        }

        ul {
            text-decoration: none;
            margin-top: 45px;
            text-align: center;
            box-sizing: border-box;
        }

        ul li {
            display: inline-block;
            margin: 0 5px;
        }

        ul li button {
            font-size: 25px;
            color: aliceblue;
            width: 65px;
            height: 45px;
            background-color: midnightblue;
            border-radius: 10px;
        }
    </style>
    <script>
        var str = "";
        var a;
        var result2;
        var result;
        function input(bNum) {
            result2 = document.getElementById("textbox2");
            result = document.getElementById("textbox1");
            result.value = "";
            a = "";
            var num = bNum.value;
            if (num == "=") {
                a = str + "=";
                result.value = a;
                str = eval(str);
                result2.value = str;
                // console.log(eval(str));
                // str="";
            } else {
                str += num;
                result2.value = str;
            }
        }

        function zero() {
            a = "";
            str = "";
            result.value = "";
            result2.value = 0;
        }
    </script>
</head>

<body>
    <!-- 主体div -->
    <div id="main">
        <!-- 上部 -->
        <div id="dUp">
            <!-- 结果div -->
            <div id="text">
                <input id="textbox1" type="text" value="">
                <input id="textbox2" type="text" value=0>
            </div>
            <!-- 归零按钮 -->
            <div id="clsbox">
                <button id="cls" onclick="zero()">C</button>
            </div>
        </div>

        <!-- 按钮div -->
        <div id="button">
            <ul>
                <li>
                    <button onclick="input(this)" value="7">7</button>
                </li>
                <li>
                    <button onclick="input(this)" value="8">8</button>
                </li>
                <li>
                    <button onclick="input(this)" value="9">9</button>
                </li>
                <li>
                    <button onclick="input(this)" value="+">+</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button onclick="input(this)" value="4">4</button>
                </li>
                <li>
                    <button onclick="input(this)" value="5">5</button>
                </li>
                <li>
                    <button onclick="input(this)" value="6">6</button>
                </li>
                <li>
                    <button onclick="input(this)" value="-">-</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button onclick="input(this)" value="1">1</button>
                </li>
                <li>
                    <button onclick="input(this)" value="2">2</button>
                </li>
                <li>
                    <button onclick="input(this)" value="3">3</button>
                </li>
                <li>
                    <button onclick="input(this)" value="*">*</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button onclick="input(this)" value="0">0</button>
                </li>
                <li>
                    <button onclick="input(this)" value=".">.</button>
                </li>
                <li>
                    <button onclick="input(this)" value="=">=</button>
                </li>
                <li>
                    <button onclick="input(this)" value="/">/</button>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

龙，学习中......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用“三剑客”做一个简易计算器

综合练习（网页计算机）<!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"> &lt
复制链接

扫一扫

专栏目录