简简单单的表白墙制作

最新推荐文章于 2024-07-10 23:34:24 发布

隐曜绅士

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量101

点赞数

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

本文链接：https://blog.csdn.net/m0_62915189/article/details/130184015

版权

前端专栏收录该内容

7 篇文章 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">
    <title>JavaScript</title>
    <style>
        /* * 通配符选择器, 是选中页面所有元素 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 600px;
            margin: 20px auto;
        }
        h1{
            text-align: center;
        }
        p{
            text-align: center;
        }
        .row{
             /* 开启弹性布局 */
             display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
        }
        .row span{
            width: 75px;
        }
        .row input{
            height: 30px;
            text-align: center;
        }
        .row button{
            /* 去边框 */
            border: none;
            border-radius: 5px;
            background-color: azure;
            height: 25px;
            width: 200px;
        }
        .row msgdiv{
            text-align: center;
            font-size: 50px;
            font-family: STXingkai;
        }
        button:active{
            color: #02aefe;
            background-color: crimson;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>只写给刘美彬的表白墙</h1>
        <p>输入内容后提交，会在下方显示</p>
        <div class="row">
            <span>发送人: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>收到人: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>消息内容: </span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">发送给心爱的她~~</button>
        </div>
        <div class="row">
            <button id="reverse">再思考想说的话~~</button>
        </div>
        <script>
            let container=document.querySelector(".container");
            let inputs=document.querySelectorAll("input");
            let button=document.querySelector("#submit");
            button.onclick=function()
            {
                let from=inputs[0].value;
                let to=inputs[1].value;
                let msg=inputs[2].value;
                if(from==''||to==''||msg=='')
                {
                    return;
                }
                let msgdiv=document.createElement('div');
                msgdiv.className='row magdiv';
                msgdiv.innerHTML = from + '对' + to + '说' + msg;
                container.appendChild(msgdiv);
                for(let input of inputs)
                {
                    input.value='';
                }
            }
            let reverse = document.querySelector('#reverse');
            reverse.onclick=function()
            {
                let rows=document.querySelectorAll('.row');
                if(rows==null ||rows.length==0)
                {
                    return;
                }
                container.removeChild(rows[rows.length-1]);
            }
        </script>    
    </div>
</body>
</html>