巨简单巨丑的计算器（写的我快自闭了）

学习前端已有两月有余，去掉寒假划水也学了一个多月了，
还是弱的可以。写个计算器遇到了一堆问题，我真是个弟弟...
把问题和解决方法都塞在注释里了，小林要常回来看看
css样式我真的8想写了，就先这样丑丑的放着吧
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        #container{
            margin: 0 auto;
            /* position: absolute; */
            /* puzzle1:绝对定位与外边距？ */
            height: 40%;
            width: 35%;
            /* puzzle2:如何使用百分比？ 成了！给html与body均设置宽高100%*/
            border: 2px solid aqua;
            background-color: antiquewhite;
        }
        input{
            /* margin-top: 5%; */
            display: inline-block;
            /* margin:0 auto; */
            /* margin：auto可以做到水平居中，但是有个前提条件就是，这个
            标签必须是块状元素，并且有个确定的宽度，百分比的宽度也行； */
            margin-top: 3%;
            margin-left: 1.5%;
            /* 百分比是相对于宽度的 */
            height: 13%;
            width: 80%;
            /* 其实这里用px比较好，因为如果缩放网页到一定程度输入框就消失了
            还是要去橙旭园咨询下 */
        }
            /*input:focus{
            box-shadow: 1px 1px ;
            }自带focus？？*/
        #clear{
            display: inline-block;
            /* display是不继承的 */
            background-color: aquamarine;
            /* position: absolute;再做一些修改就可以无论怎么样缩放网页，清除按钮都和输入框在同一行上 */
            padding: 2px;
            border: 1px solid #dddddd;
            height: 14%;
            margin-left: 1px;
            margin-top: 3%;
            width: 15%;
            font-size: 18px;
            margin-bottom: 3%;
        }
        #clear:hover{
            border: 1px solid seagreen;
            box-shadow: 1px 1px sandybrown;
            /* 注意有两个必须有的值 */
        }
        #btn{
            background-color:turquoise;
            padding-left: 5%;
            /* ???为什么会导致btn这个div向右膨胀5%？？？ */
            /* width: 100%; */
            /* 为什么把宽度注释掉就可以了欸 */
            /* 如果设置了100%，再加上边距，就会变成105%的宽度~ */
            /* html元素宽度不具有继承特性，块级元素(block)的宽度会占据一整行（一整行父元素的宽度），
            所以看似继承了，实则不是。
            要让一个元素的宽度根据内容撑开，只要设置其display不为块级元素，不设置宽度就可以了 */
            height: 65%;
            /* 百分比？？？？ */
            /* 百分比是父元素内容的百分比，去掉内边距等之后的部分！ */
            padding-top: 5%;
        }
        #btn .num,.calc,.result{
            display: inline-block;
            height: 20%;
            width: 20%;
            background-color: white;
            border: 1px solid seagreen;
        }
        /* .num,.calc,.result:hover{
            box-shadow: 3px 3px orange;
            border: 1px solid darkorange;
        } 错误写法，会解析为“为num类”和“calc”类添加新的常规样式，并（只）为“result类”添加伪类 */
        .num:hover{
            box-shadow: 2px 2px orange;
            border: 1px solid darkorange;
        }
        .calc:hover{
            box-shadow:  2px 2px orange;
            /* 用inset制造内嵌阴影 */
            border: 1px solid darkorange;
        }
        .result:hover{
            box-shadow: 2px 2px orange;
            border: 1px solid darkorange;
        }
    </style>
</head>
<body>
<div id="container">
        <input id="input" placeholder="在此输入数字">
        <button id="clear" value="clear" onclick="cle()">清除</button>
        <br>
    <div id="btn">
        <button value="7" class="num" onclick="get(this.value)">7</button>
        <button value="8" class="num" onclick="get(this.value)">8</button>
        <button value="9" class="num" onclick="get(this.value)">9</button>
        <button value="+" class="calc" id="add" onclick="get(this.value)">+</button>
        <br>
        <button value="4" class="num" onclick="get(this.value)">4</button>
        <button value="5" class="num" onclick="get(this.value)">5</button>
        <button value="6" class="num" onclick="get(this.value)">6</button>
        <button value="-" class="calc" id="sub" onclick="get(this.value)">-</button>
        <br>
        <button value="1" class="num" onclick="get(this.value)">1</button>
        <button value="2" class="num" onclick="get(this.value)">2</button>
        <button value="3" class="num" onclick="get(this.value)">3</button>
        <button value="*" class="calc" id="mul" onclick="get(this.value)">*</button>
        <br>
        <button value="." class="num" onclick="get(this.value)">.</button>
        <button value="0" class="num" onclick="get(this.value)">0</button>
        <button value="/" class="calc" id="div" onclick="get(this.value)">/</button> 
        <button value="=" class="result" id="re" >=</button>
    </div>
</div>
    <script>
        // console.log(eval(2+1));
        //获取运算符元素
        function get(num){
            var show = document.getElementById("input");
            show.value += num;
        }
        var clear_btn = document.getElementById("clear");
        // clear_btn.onclick = clear;
        // 如果把点击事件绑定在清除按钮的HTML中会失效：在script中使用事件绑定或事件监听器方可
        //原因：...clear是保留字...，也就是说这三种方式都可以，打扰了，我是弟弟
        function cle(){
            var show = document.getElementById("input");
            show.value = "";
        }
        //
        var result_btn = document.getElementById("re");
        function calculates(){
        var result = 0;
        var temp;
        var show = document.getElementById("input");
        temp = show.value;
        result = eval(temp);
        show.value = result;
        }
        result_btn.addEventListener("click",calculates,false);
    </script>
</body>
</html>
巨简单巨丑的计算器（写的我快自闭了）

猜你喜欢
