案例-表白墙简单实现

文章目录

效果展示
- 初始画面
- 提交内容后画面（按键按下）
代码区
效果展示

初始画面

提交内容后画面（按键按下）

代码区

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    .total {
        width: 400px;
        margin: 0px auto; /*上下、左右*/
    }
    h1 {
        text-align: center;
        padding-bottom: 30px;
    }
    p {
        text-align: center;
        color: gray;
    }
    .div1 {
        display: flex;
        justify-content: center; /*水平方向*/
        align-items: center; /*垂直方向*/
        padding-top: 5px;
    }
    span {
        width: 80px;
        height: 30px;
    }
    #edit {
        width: 200px;
        height: 30px;
    }
    .submit {
        width: 280px;
        height: 30px;
        background-color: rgba(248, 236, 7, 0.942);
        border: none;
        border-radius: 5px;
    }
    .submit:active{
        background-color: grey;
    }
</style>
<body>
    <div class="total">
        <h1>表白墙</h1>
        <p>输入后请点击提交，会将信息显示在表格中</p>
        <div class="div1">
            <span>谁：</span><input id="edit" class="who" type="text">
        </div>
        <div class="div1">
            <span>对谁：</span><input id="edit" class="ofwho" type="text">
        </div>
        <div class="div1">
            <span>说什么</span><input id="edit" class="what" type="text">
        </div>
        <div class="div1">
            <input class="submit" type="button" value="提交" onclick="submit()">
        </div>
    </div>
</body>
<script>
    function submit(){
        let containDiv = document.querySelectorAll('#edit')
        console.dir(containDiv)
        let from = containDiv[0].value
        let to = containDiv[1].value
        let message = containDiv[2].value
        console.log(from+'对'+to+'说'+message)
        // 创建div
        let nodeDiv = document.createElement('div')
        nodeDiv.className = 'div1'
        nodeDiv.innerHTML = from+'对'+to+'说'+message
        console.log(nodeDiv)
        // 尾插div
        let nodeparent = document.querySelector('.total')
        nodeparent.appendChild(nodeDiv)
    }
</script>
</html>