实现的一个网页版的简易表白墙

梦里梦外; 2024-05-06 21:25 77阅读 0赞

## 实现的一个网页版的表白墙 ##

### 实现效果 ###

![image-20240307134439192][]

### 代码截图 ###

![image-20240307215605013][]

相关代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="container">
            <h1>表白墙</h1>
            <P>输入相关信息，点击提交后将会展示在表格中</P>
            <div class="div1">
                <span>谁：</span><input type="text" class="edit">
            </div>
            <div class="div1">
                <span>对谁：</span><input type="text" class="edit">
            </div>
            <div class="div1">
                <span>说：</span><input type="text" class="edit">
            </div>
            <div class="div1">
                <input type="button" value="提交" class="submit" onclick="Submit()">
            </div>
        </div>
    </body>
    <style>
        * {
        
            margin: 0px;
            padding: 0px;
        }
        .container {
        
            width: 400px;
            margin: 0 auto;
        }
        h1 {
        
            text-align: center;
            margin-bottom: 20px;
            margin-top: 40px;
        }
        p {
        
            text-align: center;
            color: gray;
            line-height: 63px;
        }
        .div1 {
        
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .edit {
        
            margin-bottom: 20px;
            width: 200px;
            height: 30px;
        }
        span {
        
            width: 50px;
            margin-bottom: 20px;
        }
        .submit {
        
            background-color: rgb(255, 136, 0);
            color: white;
            width: 254px;
            height: 40px;
            border: none;
            border-radius: 5px;
        }
        .submit:active {
        
            background-color: gray;
        }
    
    </style>
    <script>
        function Submit() {
        
            let edits = document.querySelectorAll('.edit')
            let from  = edits[0].value
            let to  = edits[1].value
            let message = edits[2].value
            if(from == "" || to == "" || message == "") {
        
                return
            }
            let div = document.createElement('div')
            div.className = 'div1'
            div.innerHTML =   from + " 对 " + to + "说：" + message 
            let container = document.querySelector('.container')
            container.appendChild(div)
            for(i = 0; i < edits.length; i++) {
        
                edits[i].value = "";
            }
    }
    </script>
    </html>

[image-20240307134439192]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0b8c9e97c9624d3e95d5ab06e45fcb2d.png
[image-20240307215605013]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/74f0dcbb6993461c85b50be7a6068483.png