微博发布案例JS_js微博发布案例-CSDN博客

本文链接：https://blog.csdn.net/qq_57193827/article/details/125840127
这是一个用于微博发布的网页应用示例，包含一个文本输入框和发布按钮。用户可以输入内容，系统会实时显示剩余字符数，并在内容超出200字符时给出警告。发布的微博内容会显示在页面的列表中，每条微博包括用户名、发布时间和删除按钮。点击删除按钮可以移除相应微博。此外，页面还预设了一些模拟数据。
摘要由CSDN通过智能技术生成
<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .w{
            width: 900px;
            margin: 0 auto;
        }
        .controls textarea{
            width: 878px;
            height: 100px;
            resize: none;
            border-radius: 10px;
            outline: none;
            padding-left: 20px;
            padding-top: 10px;
            font-size: 18px;
        }
        .controls{
            overflow: hidden;
        }
        .controls div{
            float: right;
        }
        .controls div span{
            color: #666;
        }
        .controls div .useCount{
            color: red;
        }
        .controls div button{
            width: 100px;
            outline: none;
            border: none;
            background: rgb(0,132,255);
            height: 30px;
            cursor: pointer;
            color: #fff;
            font: bold 14px '宋体';
            transition: all 0.5s;
        }
        .controls div button:hover{
            background: rgb(0,255,255);
        }
        .controls div button:disabled{
            background: rgb(0,255,255,0.5);
        }
        .contentList{
            margin-top: 50px;
        }
        .contentList li{
            padding: 20px 0;
            border-bottom: 1px dashed #ccc;
            position: relative;
        }
        .contentList li .info{
            position: relative;
        }
        .contentList li .info span{
            position: absolute;
            top: 15px;
            left: 100px;
            font: bold 16px '宋体';
        }
        .contentList li .info p{
            position: absolute;
            top: 40px;
            left: 100px;
            color: #aaa;
            font-size: 12px;
        }
        .contentList img{
            width: 80px;
            border-radius: 50%;
        }
        .contentList li .content{
            padding-left: 100px;
            color: #666;
            word-break: break-all;
        }
        .contentList li .the_del{
            position: absolute;
            right: 0;
            top: 0;
            font-size: 28px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="w">
        <!-- 操作的界面 -->
        <div class="controls">
            <textarea placeholder="说点什么吧......" id='area' cols="30" rows="10"></textarea>
            <div>
                <span class="useCount" id="useCount">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
            </div>
        </div>

        <!-- 微博内容列表 -->
        <div class="contentList">
            <ul id="list">
            </ul>
        </div>
    </div>
        <!-- 添加了hidden属性元素会直接隐藏掉
        <li hidden> 
            <div class="info">
                <img src="../../公用资源/图片/1.jpg" class="userpic">
                <span class="username">死数据:百里守约</span>
                <p class="send-time">
                    死数据:发布于2020年12月05日 00:07:57
                </p>
            </div>
            <div class="content">死数据:111</div>
            <span class="the_del">x</span>
        </li> -->
    <script>
        // 文本域文字
        let area = document.querySelector('#area');
        let useCount = document.querySelector('#useCount');
        // 按钮
        let btn = document.querySelector('#send');
        // 父元素
        let ul = document.querySelector('#list');
        
        // 显示输入字符
        test();
        function test() {
            if(!area.value.length){
                btn.disabled = true;
            }else{
                btn.disabled = false;
            }
            if(area.value.length > 200){
                alert('超过最大限制')
                area.value = ''
                clearInterval(timer)
            }
            useCount.innerHTML = `${area.value.length}`
        }
        let timer = setInterval(test,10)
        
        // area.addEventListener('input',function () {
        //    if(!area.value.length){
        //         btn.disabled = true;
        //     }else{
        //         btn.disabled = false;
        //     }
        //     if(area.value.length > 200){
        //         alert('超过最大限制')
        //         area.value = ''
        //         clearInterval(timer)
        //     }
        //     useCount.innerHTML = this.value.length;
        // })


        // 数据资源
        let arr = [
            {
                name : '华为',
                src : '../../公用资源/图片/1.jpg'
            }
            ,
            {
                name : '苹果',
                src : '../../公用资源/图片/2.jpg'
            },
            {
                name : '三星',
                src : '../../公用资源/图片/3.jpg'
            }
        ]
        // 随机
        function getRand(min,max){
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random()*(max-min+1))+min;
            // 返回[0,1)
        }
        // 发布
        btn.addEventListener('click',function () {
            // 产生随机数
            let temp = getRand(0,2);
            // 产生日期
            let date = new Date();
            let y = date.getFullYear();
            y = y < 10 ? '0'+y : y;
            let m = date.getMonth()+1;
            m = m < 10 ? '0'+m : m;
            let d = date.getDate();
            d = d < 10 ? '0'+d : d;
            // 时分秒
            let h = date.getHours();
            h = h < 10 ? '0' + h : h; 
            let min = date.getMinutes();
            min = min < 10 ? '0' + min : min;
            let s = date.getSeconds();
            s = s < 10 ? '0'+ s : s;
            // 健壮性判断
            if(!area.value.length){
                alert('内容为空')
            }else{
                // 创建节点
                let li = document.createElement('li');
                // 添加属性
                li.innerHTML = `
                <div class="info">
                <img src=${arr[temp].src} class="userpic">
                <span class="username">${area.value}</span>
                <p class="send-time">
                    日期:发布于${y}年${m}月${d}日 ${h}:${min}:${s}
                </p>
                </div>
                <div class="content">${arr[temp].name}</div>
                <span class="the_del">x</span>
                `

                ul.insertBefore(li,ul.children[0]);
                // 进行绑定
                let del = document.querySelector('ul li .the_del');
                del.addEventListener('click',function () {
                    ul.removeChild(this.parentNode)
                })
                area.value = ''
            }
        })

        // 错误写法  绑定事件  在添加li 的时候 一起绑定
    //     name();
    //    function name() {
    //        if(ul.children.length){
    //            let son = document.querySelectorAll('.the_del');
    //            for(let i =0;i<son.length;i++){
    //                son[i].addEventListener('click',function () {
    //                     ul.removeChild(son[i].parentNode)
    //                     clearInterval(timer2)
    //                })
    //            }
    //        }
    //    }
    //    let timer2=setInterval(name,10);
    </script>
</body>
</html>