交互式网页发帖功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/KB0824liu/article/details/129940139

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 600px;
            /* height: 500px; */
            border: 1px solid;
        }

        #one {
            width: 220px;
            height: 50px;
            background-color: rgb(13, 133, 13);
            color: #fff;
            font-size: 19px;
            letter-spacing: 2px;
            border-radius: 6px;
            font-weight: 700;
            border: none;
            margin-left: 50px;
        }

        .acc {
            width: 530px;
            height: 1px;
            background-color: gray;
            margin-top: 5px;
            margin-left: 50px;
        }

        .box2 {
            width: 460px;
            height: 300px;
            border: 1px solid red;
            margin-left: 110px;
            margin-top: 10px;
            display: none;
            position: absolute;
            background-color: #fff;
        }

        select {
            width: 160px;
            height: 30px;
            margin-top: 10px;
        }

        textarea {
            width: 380px;
            height: 150px;
            margin-top: 10px;
            outline: none;
            resize: none;
        }

        #fourth {
            width: 140px;
            height: 35px;
            background-color: rgb(13, 133, 13);
            border-radius: 6px;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 2px;
            margin-top: 10px;
            border: none;
        }

        .box3 li img {
            border-radius: 50%;
        }

        .box3 li {
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="box1">
        <button id="one">我要发贴</button>
        <hr>
        <!-- 发布表单 -->
        <div class="box2">
            <input type="text" style="width: 380px; height: 26px; margin-top: 10px;outline: none;"
                placeholder="请输入标题（1-50个字符）" id="first"><br>
            所属板块: <select name="" id="sceond">
                <option value="">请选择板块</option>
                <option value="电子书籍">电子书籍</option>
                <option value="新课来了">新课来了</option>
                <option value="新手报到">新手报到</option>
                <option value="职业规划">职业规划</option>
            </select><br>
            <textarea name="" id="third"></textarea><br>
            <button id="fourth">发布</button>
        </div>
        <!-- 评论列表 -->
        <div class="box3">
            <ul>
            </ul>
        </div>
    </div>
    <script>
        //点击我要发帖按钮
        let _one = document.querySelector("#one");
        //发布按钮
        let _fourth = document.querySelector("#fourth");
        //发布表单
        let _box2 = document.querySelector(".box2");
        //评论列表
        let _ul = document.querySelector(".box3 ul");

        //表单数据
        let _input = document.querySelector(".box2 input");
        let _select = document.querySelector(".box2 select");
        let _textarea = document.querySelector(".box2 textarea");
        //存放图片
        let imgs = ["./img/tou01.jpg", "./img/tou02.jpg", "./img/tou03.jpg", "./img/tou04.jpg"]
        //点击发帖，表单显示
        _one.onclick = function () {
            if (_box2.style.display == 'none') {
                _box2.style.display = 'block'
                _ul.style.display='none'
            } else {
                _box2.style.display = 'none'
                _ul.style.display='block'
            }
        }
        //点击发布
        _fourth.onclick = function () {
            _ul.style.display='block'
            //获取表单数据
            let title = _input.value;
            //获取板块
            let bankuai = _select.value;
            if (bankuai == "") {
                alert("请选择板块");
                return;
            }
            //获取内容
            let content = _textarea.value;
             //每发送一次，随机数需要重新生成一次
             let randomIndex = parseInt(Math.random() * 4); //0-3
            //向ul追加li
            var _li = document.createElement("li");
            _li.innerHTML = ` 
                   <img src="${imgs[randomIndex]}" alt="">
                    <div>
                        <p>${title}</p>
                        <div>
                            <span>${bankuai}</span>
                            <span>${new Date()}</span>
                        </div>
                    </div>`
            _ul.insertBefore(_li, _ul.firstElementChild)
            //重置表单
            _input.value="";
            _select.value="";
            _textarea.value="";
            //隐藏表单
            _box2.style.display='none';
        }
    </script>
</body>