javascript微博发布案例（附详细代码）

铃儿响叮当不响

已于 2022-07-15 21:38:41 修改

阅读量1.5k

点赞数

分类专栏：前端js笔记文章标签： javascript html 前端 vscode

于 2022-07-14 14:35:35 首次发布

本文链接：https://blog.csdn.net/qq_36507046/article/details/125783852

版权

前端js笔记专栏收录该内容

43 篇文章 7 订阅

订阅专栏

思路：

需求1：检测用户输入的字数

注册input事件
将输入文本长度赋值给对应的数值

需求2：输入不能为空

点击按钮之后判断如果输入为空，则提示不能输入为空，并直接return
为了防止无意义的一些输入利用字符串.trim()可以去掉首尾空格
当输入为空点击发布按钮以后将输入内容清空计数器也变为0

需求3 新增留言应写在点击事件内部

创建li 然后里面通过innerHTML追加数据
追加给父元素ul ,用父元素.insertBefore(插入到当前元素的前面)

需求4：删除事件必须写在点击事件里面

删除事件应该放在追加ul的前面这样创建元素的同时顺便绑定了点击事件
删除操作删除li 父元素.removeChild(子元素)

需求5：重置

发布完一条消息后将表单的内容重置为空

代码部分（html+js）：

html代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>微博发布</title>

    <style>

        * {

            margin: 0;

            padding: 0

        }

        .box {

            width: 700px;

            margin: 50px auto;

            border: 1px solid #ccc;

            border-radius: 5px;

        }

        .input {

            margin-top: 4px;

            padding: 5px;

        }

        .button-box {

            float: right;

            margin-top: 10px;

        }

        #btn {

            display: inline-block;

            height: 28px;

            line-height: 28px;

            width: 60px;

            min-width: 30px;

            font-size: 15px;

            background-color: deepskyblue;

            border-radius: 3px;

            color:whitesmoke;

            border: 0;

            text-align: center;

            padding: 0 10px;

        }

        #btn:hover {

            background-color: dodgerblue;

        }

        input {

            float: right;

        }       

        textarea {

            width: 100%;

            height: 100px;

            outline: none;

            resize: none;

            border: 0;

            font-size: 17px;

        }

        li {

            list-style: none;

        }

        .info {

            width: 700px;

            margin:50px auto;

            height: 100px;

            border: 1px solid #ccc;

            border-radius: 5px;

            position: relative;

        }

        .info .imgs {

            width: 8%;

            float: left;

            margin:25px 0 0 5px;

        }

        .info .del {

             float:right;

             font-size: 24px;

             color:grey;

             padding:0px;

             width: 20px;

             height:20px;

             border:0;

             background-color: white;

        }

        .username {

            font-size: 12px;

            color:#ccc;

            position:absolute;

            left: 15px;

            top: 5px;

        }

         .send-time {

            font-size: 12px;

            color: #ccc;

            position:absolute;

            right: 5px;

            bottom:5px;

        }

         .content {

        font-size: 12px;

           position:absolute;

           left: 70px;

           top: 25px;

         }

    </style>

</head>

<body>

<div class="box" id="weibo">

    <div class="input">

        <textarea name="" id="txt" cols="20" rows="10" placeholder="分享新鲜事..." maxlength="140"></textarea>

    </div>

    <div class="button-box">

        <span class="useCount">0</span>

        <span>/</span>

        <span>140</span>

        <button id="btn" alt="">发布</button>

    </div>

</div>

   <div class="contentList">

      <ul id="list">

      </ul>

   </div>

</body>

</html>

javascript代码部分

 <script>

        let data =[

            {uname:'花花',imgSrc:'./image/1.jpg'},

            {uname:'喵喵',imgSrc:'./image/2.jpg'},

            {uname:'鸭鸭',imgSrc:'./image/3.jpg'},

            {uname:'小刘鸭',imgSrc:'./image/4.jpg'},

            {uname:'墩墩',imgSrc:'./image/5.jpg'},

            {uname:'坨坨',imgSrc:'./image/6.jpg'},

        ]

        // 需求1：检测用户输入的字数

        let textarea = document.querySelector('textarea')

        let useCount =document.querySelector('.useCount')

        let btn = document.querySelector('#btn')

        let ul = document.querySelector('#list')

        // 注册input事件

        textarea.addEventListener('input',function(){

            // 将输入文本长度赋值给对应的数值

            useCount.innerHTML = this.value.length

        })

        // 需求2：输入不能为空

        // 点击按钮之后判断 如果输入为空，则提示不能输入为空，并直接return

        btn.addEventListener('click',function(){

            // 为了防止无意义的一些输入 利用字符串.trim()可以去掉首尾空格

           if (textarea.value.trim() === '') {

            // 当输入为空点击发布按钮以后 将输入内容清空 计数器也变为0

            textarea.value = ''

            useCount.innerHTML = 0

            return alert('内容不能为空')

           }

          // 随机函数

          function getRandom(min, max){

            return Math.floor(Math.random() * (max - min + 1)) + min

              }

          let index = getRandom(0,data.length-1)

            // 需求3 新增留言 应写在点击事件内部

            // 创建一个小li 然后里面通过innerHTML追加数据

            let li = document.createElement('li')

            li.innerHTML = `

             <div class="info">

             <img class="imgs" src=${data[index].imgSrc}>

             <span class="username">${data[index].uname}</span>

             <button class="del">×</button>

             <div class="content">${textarea.value}</div>

             <div class="send-time">${new Date().toLocaleString()}</div>

             </div>

            `

             // 需求4：删除事件必须写在点击事件里面

            // 删除事件应该放在追加ul的前面这样创建元素的同时顺便绑定了点击事件

            let del = li.querySelector('.del')

            del.addEventListener('click',function(){

            // 删除操作 删除li 父元素.removeChild(子元素)

             ul.removeChild(li)

            })    

            // 追加给父元素ul ,用父元素.insertBefore(插入到当前元素的前面)

             ul.insertBefore(li,ul.children[0])

             // 需求5：重置

             // 发布完一条消息后将表单的内容重置为空

             textarea.value = ''

            useCount.innerHTML = 0

        })

     </script>

拓展：按下回车键发布信息

这里需要用到事件对象来实现，通过文本输入框的'keyup'(按键弹起)事件的key属性值，来判断当前用户输入键盘的类型，只要event.key === 'Enter'，就调用btn.click()方法，自动触发发布按钮。

注意这里不宜使用keydown属性，使用keydown则会导致文本输入框的内容无法清空，始终有回车键存在于文本输入框内。

textarea.addEventListener('keyup',function(event){
           // 只要 event.key === 'Enter'
           if (event.key === 'Enter'){
             // 回车发布新闻 与点击发布按钮效果等价
              // 回车后 自动触发点击按钮
              btn.click() 
           }       
         })

效果图：