master

分支 (1)

管理

管理

master

java-demo
/
frontend
/
expressionWall.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>表白墙</title>
</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>提交</button>
        </div>
    </div>

    <!-- 调整样式 -->
    <style>
        .container {
            width: 400px;
            /* margin外边距，第一个数字表示上限边距，第二个数字表示水平边距（左右），
            如果水平设置为auto就表示元素水平居中 */
            margin: 0 auto;
        }

        h1 {
            /* 文字水平居中 */
            text-align: center;
        }

        p {
            text-align: center;
            color: #666;
        }

        .row {
            /* 针对row进行具体尺寸的设置 */
            height: 40px;
            /* 弹性布局 */
            display: flex;
            /* 水平居中 ，也可以使用margin中的auto进行实现！*/
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
        }

        .row span {
            /* 对于提示性的文字再进行样式设置，已达到对齐的目的 */
            width: 100px;
        }

        .row input {
            /* 对于输入框再进行样式设置，已达到对齐的目的 */
            width: 300px;
            height: 20px;
        }

        .row button {
            /* 调整按钮，其实调不调整大小都是ok的 */
            width: 400px;
            height: 30px;
            /* 颜色 */
            color: azure;
            background-color: blue;
            /* 去掉边框 */
            border: none;
        }

        .row button:active {
            /* 按下鼠标背景颜色改变 */
            background-color: #666;
        }

    </style>

    <!-- 点击提交功能实现 -->
    <script>
        let container = document.querySelector('.container');
        let button = document.querySelector('button');
        button.onclick = function() {
            // 拿到输入的对象 以及输入的内容
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value;
            let to = inputs[1].value;
            let message = inputs[2].value;
            // 进行输入的空判断
            if(from == '' || to == '' || message == '') {
                alert('当前输入框内容为空 请重新输入！');
                return;
            }
            console.log(from + ',' + to + ',' + message);

            // 能够构造出新的div用来保存用户提交的内容
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row'; // row的特性就可以用在新构造的div上
            rowDiv.innerHTML = from + ' 对 ' + to + ' 悄悄说：' + message;

            // 将div挂载到containner中去
            container.appendChild(rowDiv);

            // 提交之后清空输入框
            for(let i = 0; i < inputs.length; i++) {
                inputs[i].value = '';
            }

        }
    </script>
</body>
</html>