6.27晚作业（两种方式）

qing_mang

已于 2022-06-28 14:22:55 修改

阅读量120

点赞数

文章标签： javascript 前端 html css3

于 2022-06-28 13:41:46 首次发布

本文链接：https://blog.csdn.net/qing_mang/article/details/125500486

版权

我写：

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>6.28课堂练习</title>
    <link rel="stylesheet" href="../css/6.28.css">
</head>

<body>
    <!-- 变色器 -->
    <div class="box1">
        <h1>变色器</h1>
        <button id="show">显示</button>
        <button id="hide">隐藏</button>
        <button id="red">红色</button>
        <button id="yellow">黄色</button>
        <button id="blue">蓝色</button>
        <div class="colorChangingBox" id="colorChangingBox"></div>
    </div>
    <script>
        // 获取dom元素
        var showbtn = document.getElementById("show"),
            hidebtn = document.getElementById("hide"),
            redbtn = document.getElementById("red"),
            yellowbtn = document.getElementById("yellow"),
            bluebtn = document.getElementById("blue")
        // 绑定点击事件
        show.onclick = function () {
            colorChangingBox.style.display = "block"
        }
        hide.onclick = function () {
            colorChangingBox.style.display = "none"
        }
        red.onclick = function () {
            colorChangingBox.style.display = "block"
            colorChangingBox.style.backgroundColor = "red"
        }
        yellow.onclick = function () {
            colorChangingBox.style.display = "block"
            colorChangingBox.style.backgroundColor = "yellow"
        }
        blue.onclick = function () {
            colorChangingBox.style.display = "block"
            colorChangingBox.style.backgroundColor = "blue"
        }
    </script>

    <!-- 四则运算器 -->
    <div class="box2">
        <h1>四则运算器</h1>
        <!-- 输入框1 -->
        <input type="text" id="inputBox1">
        <!-- 输入框2 -->
        <input type="text" id="inputBox2">
        <!-- 四则运算按钮 -->
        <button id="sum" class="OperationButton">加法</button>
        <button id="sub" class="OperationButton">减法</button>
        <button id="mul" class="OperationButton">乘法</button>
        <button id="div" class="OperationButton">除法</button>
        <button id="rem" class="OperationButton">取余</button>
        <!-- 输出框 -->
        <input type="text" id="outputBox">
    </div>
    <script>
        // 获取dom元素
        var inputBox1 = document.getElementById("inputBox1"),
            inputBox2 = document.getElementById("inputBox2"),
            sum = document.getElementById("sum"),
            sub = document.getElementById("sub"),
            mul = document.getElementById("mul"),
            div = document.getElementById("div"),
            rem = document.getElementById("rem"),
            outputBox = document.getElementById("outputBox")
        // 绑定事件
        sum.onclick = function () {
            var num1 = inputBox1.value,
                num2 = inputBox2.value
            document.getElementById("outputBox").value = num1*1 + num2*1
            console.log(outputBox)
        }
        sub.onclick = function () {
            var num1 = inputBox1.value,
                num2 = inputBox2.value
            document.getElementById("outputBox").value = num1 - num2
            console.log(outputBox)
        }
        mul.onclick = function () {
            var num1 = inputBox1.value,
                num2 = inputBox2.value
            document.getElementById("outputBox").value = num1 * num2
            console.log(outputBox)
        }
        div.onclick = function () {
            var num1 = inputBox1.value,
                num2 = inputBox2.value
            document.getElementById("outputBox").value = num1 / num2
            console.log(outputBox)
        }
        rem.onclick = function () {
            var num1 = inputBox1.value,
                num2 = inputBox2.value
            document.getElementById("outputBox").value = num1 % num2
            console.log(outputBox)
        }
        
    </script>
</body>

</html>

css代码

.box1 {
    width: 500px;
    height: 600px;
    border: 1px solid red;
    position: absolute;
    top: 100px;
    left: 200px;
    text-align: center;
}

.colorChangingBox {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: aquamarine;
}

.box2 {
    width: 500px;
    height: 600px;
    border: 1px solid red;
    position: absolute;
    top: 100px;
    right: 200px;
    text-align: center;
}

#inputBox1,
#inputBox2,
#outputBox {
    margin-left: 165px;
    margin-top: 20px;
    display: block;
    width: 200px;
    height: 50px;
    text-align: center;
    font-size: 26px;
}

.OperationButton {
    margin-top: 20px;
    width: 80px;
    height: 30px;
    border-radius: 6px;
}

老师写：

颜色选择器

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            border: 1px solid;
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <button id="show">显示</button>
        <button id="hide">隐藏</button>
        <button id="red">红色</button>
        <button id="blue">蓝色</button>
        <button id="green">绿色</button>
    </div>
    <div class="box" id="box"></div>
</body>
<script>
    /*
    1.需求：默认显示红色div盒子
            点击隐藏，隐藏div盒子
            点击显示，显示div盒子
            点击对应的按钮显示对应的要求
    */
    // 获取dom元素
    var showBtn = document.getElementById("show"),
        hideBtn = document.getElementById("hide"),
        redBtn  = document.getElementById("red"),
        blueBtn = document.getElementById("blue"),
        greenBtn= document.getElementById("green"),
        boxDiv  = document.getElementById("box")
        console.log(showBtn)
        // 点击显示
        showBtn.onclick = function() {
            boxDiv.style.display = "block"
        }
        // 点击隐藏
        hideBtn.onclick = function() {
            boxDiv.style.display = "none"
        }
        // 点击按钮变成红色
        redBtn.onclick = function() {
            boxDiv.style.display = "block"
            boxDiv.style.backgroundColor = "red"
        }
        blueBtn.onclick = function() {
            boxDiv.style.display = "block"
            boxDiv.style.backgroundColor = "blue"
        }
        greenBtn.onclick = function() {
            boxDiv.style.display = "block"
            boxDiv.style.backgroundColor = "green"
        }
</script>
</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>Document</title>
</head>
<body>
    <div>
        <input type="text" id="leftVal"><input type="text" id="rightVal">
    </div>
    <div>
        <button>加</button><button>减</button><button>乘</button><button>除</button><button>取模</button>
    </div>
    <div class="box" id="res">

    </div>
</body>
<script>
    // 通过标签名获取dom元素
    var btns      = document.getElementsByTagName("button"),
        leftValue = document.getElementById("leftVal"),
        rightValue= document.getElementById("rightVal"),
        res       = document.getElementById("res")
    
    btns[0].onclick = function() {
        var left = leftValue.value,
            right= rightValue.value
            // console.log(typeof (left*1))
        res.innerHTML = left*1 + right*1
    }
    // 减法
    btns[1].onclick = function() {
        // 获取input框的value值？
        var left = leftValue.value,
            right= rightValue.value
        // 把数据渲染到div中？
        res.innerHTML = left - right
    }
    btns[2].onclick = function() {
        // 获取input框的value值？
        var left = leftValue.value,
            right= rightValue.value
        // 把数据渲染到div中？
        res.innerHTML = left * right
    }
    btns[3].onclick = function() {
        // 获取input框的value值？
        var left = leftValue.value,
            right= rightValue.value
        // 把数据渲染到div中？
        res.innerHTML = left / right
    }
    btns[4].onclick = function() {
        // 获取input框的value值？
        var left = leftValue.value,
            right= rightValue.value
        // 把数据渲染到div中？
        res.innerHTML = left % right
    }
</script>
</html>