jquery简单微博效果

最新推荐文章于 2022-06-02 12:07:46 发布

_XinXinM_

最新推荐文章于 2022-06-02 12:07:46 发布

阅读量404

点赞数

本文链接：https://blog.csdn.net/binbinhxx/article/details/111714421

版权

js思路
1.点击发布按钮会动态生成一个小li，小li里面有文本框内容和删除按钮，并且添加到ul中。
2.点击删除按钮，可以删除当前的微博留言。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        .box{
            width:600px;
            margin:100px auto;
            border:1px solid #000;
            padding:20px;
        }
        textarea{
            width:450px;
            height:160px;
            /* 轮廓线定义无轮廓 */
            outline:none;
            /* 用户无法调整元素的尺寸。 */
            resize:none;
        }
        ul{
            width:450px;
            padding-left :80px;
        }
        ul li {
            line-height:25px;
            border-bottom:1px dashed #cccccc;
            display:none;
        }
        input{
            float:right;
        }
        ul li a {
            float: right;
        }
    </style>
    <script>
        $(function(){
            // 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中
            $(".bth").on("click",function(){
                var li = $("<li></li>");
                li.html($(".txt").val()+"<a href = 'javascript:;'>删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val("");
            })
            // on 可以给动态元素绑定事件
            $("ul").on("click","a",function(){
                $(this).parent().slideUp(function(){
                    $(this).remove();
                });
            })
        })
    </script>
</head>
<body>
    <div class = "box" id = "weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class = "bth">发布</button>
        <ul></ul>
    </div>
    
</body>
</html>

_XinXinM_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery简单微博效果

js思路1.点击发布按钮会动态生成一个小li，小li里面有文本框内容和删除按钮，并且添加到ul中。2.点击删除按钮，可以删除当前的微博留言。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
复制链接

扫一扫