发布评论

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        ul,
        li {
            list-style-type: none;
        }
        
        .main {
            width: 1000px;
            height: 500px;
            margin: 50px auto;
            background-color: #E7FEFE;
            padding: 20px;
        }
        
        .main header {
            width: 950px;
            height: 150px;
            margin: 0px auto;
            border: 1px solid #ccc;
        }
        
        h3 {
            margin: 10px 0px 10px 10px;
        }
        
        .text {
            width: 900px;
            height: 65px;
            margin: 0px auto;
            display: block;
            resize: none;
            background: #E7FEFE;
            outline: none;
            border: none;
            border: 1px solid #ccc;
        }
        
        header .more {
            font-size: 14px;
            margin-left: 25px;
            line-height: 30px;
        }
        
        header input[type=button] {
            float: right;
            margin-right: 30px;
            margin-top: 5px;
        }
        
        .container {
            width: 950px;
            border: 1px solid #ccc;
            margin: 30px auto;
            display: none;
        }
        
        li {
            width: 930px;
            height: 30px;
            background-color: #ccc;
            margin: 10px auto;
            line-height: 30px;
            text-align: left;
        }
        
        .container input[type=button] {
            float: right;
            margin-top: 5px;
        }
        
        .alter {
            width: 300px;
            height: 100px;
            margin: 0px auto;
            position: relative;
            top: -80px;
            display: none;
        }
        
        .alterText {
            display: block;
            width: 250px;
            height: 60px;
            resize: none;
            border: none;
            outline: none;
            border: 1px solid #5acfcf;
            background-color: #dfffff;
        }
        
        .modify {
            position: absolute;
            right: 8px;
            bottom: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <header>
            <h3>网友评论</h3>
            <textarea name="text" id="" cols="30" rows="10" class="text" placeholder="我有话要说..."></textarea>
            <span class="more"></span>
            <input type="button" value="发布" disabled>
        </header>
        <div class="container">
            <ul></ul>
        </div>
        <div class="alter">
            <textarea name="alterText" id="" cols="30" rows="10" class="alterText"></textarea>
            <input type="button" class="modify" value="修改 ">
        </div>
    </div>
    <script>
        var texts = document.querySelector('.text');
        console.log(texts);
        var btn = document.querySelector('input[type=button]');
        console.log(btn);
        var ul = document.querySelector('ul');
        console.log(ul);
        var alter = document.querySelector('.alter')
        var alterText = document.querySelector('.alterText');
        var modify = document.querySelector('.modify');
        var container = document.querySelector('.container')
        console.log(alterText);
        var moreText = document.querySelector('.more');



        var wordNumFlag = 20;
        moreText.innerText = "还可以输入" + wordNumFlag + '个字';
        texts.onkeyup = function() {
            var wordLength = texts.value.length;

            moreText.innerText = "还可以输入" + (wordNumFlag - wordLength) + "个字";
            if (wordLength > 0 && wordLength <= wordNumFlag) {
                btn.disabled = false;
            } else {
                btn.disabled = true;
            }
        }
        btn.onclick = function() {
            // 新建li,编辑，删除按钮
            var li = document.createElement('li');
            var liText = document.createElement('span');
            var del = document.createElement('input');
            var edits = document.createElement('input');
            // 点击发布按钮,输入框的值传送到li中，然后情况输入框的值
            liText.innerHTML = texts.value;
            texts.value = '';
            // 把创建的删除按钮和编辑按钮添加到li 中，再把li 添加到ul中
            li.appendChild(liText);
            li.appendChild(del);
            li.appendChild(edits);
            ul.insertBefore(li, ul.firstElementChild);
            //把编辑和删除设为按钮
            del.type = 'button';
            edits.type = 'button';
            del.value = "删除 ";
            edits.value = "编辑 ";

            console.log(edits);
            // 给删除按钮绑定事件
            del.onclick = function() {
                ul.removeChild(li)
                if (ul.children.length == 0) {
                    container.style.display = 'none'
                }
            }

            // 给编辑按钮绑定事件
            edits.onclick = function() {
                alter.style.display = 'block';
                alterText.value = liText.innerText
                modify.onclick = function() {
                    liText.innerText = alterText.value;
                    alter.style.display = 'none';
                    alterText.value = '';
                };
            };
            if (ul.children.length > 0) {
                container.style.display = 'block';
            }
            moreText.innerText = "还可以输入" + wordNumFlag + '个字';
        };
    </script>
</body>

</html>
posted @ 2023-02-13 11:26 芬-mi 阅读(8) 评论(0) 收藏举报
刷新页面返回顶部
zf

发布评论

公告
