HTML可输入可删除留言板

最新推荐文章于 2023-12-06 17:59:03 发布

ZYT＿庄彦涛

最新推荐文章于 2023-12-06 17:59:03 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45528773/article/details/130628371

版权

HTML 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS3

1 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

Outcome

初始颜色是天空深蓝色。

鼠标移入框内颜色变成#84d7ff。

鼠标在白色文本框内点击颜色变成yellow。

在白色文本框内输入文字很好看！

在下方评论区出现相应文字

在白色文本框内继续输入文字很有趣！

在下方评论区出现相应文字

点击下方评论区相应评论删除键，很有趣！已删除

点击下方评论区相应评论删除键，很好看！已删除

手机视图

Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=0.5">
        <title>留言板</title>
        <style>
            .box{
                text-align:center;
                width: 660px;
                height: 200px;
                background-color: deepskyblue;
                padding: 20px;
                border: 5px solid goldenrod;
                margin-top: 80px;
                line-height:126px;
                margin-left: 7%;
                padding-top:60px;
                font-size:30px;
                border-radius: 50px;
            }

            .txt{
                text-align:center;
                width: 400px;
                height: 180px;
                font-size:30px;
                resize:none;
                outline:none;
                border-radius: 20px;
            }

            .btn{
                width: 80px;
                height: 60px;
                font-size:25px;
                color: orangered;
                background-color: lime;
                border-radius: 20px;
                padding: 5px;
                border: 5px solid #506244;
            }

            dt{
                border-bottom: 1px dashed #ccc;
                margin-left: 7%;
                width:700px;
                font-size:40px;
                background-color: beige;
                color: chocolate;
            }
        </style>
        <script src="jquery-3.6.0.min.js"></script>
    </head>

    <body>
        <div class="box">
            <span>发表留言</span>
            <textarea name="" class="txt" cols="30" rows="10"></textarea>
            <button class="btn">发布</button>
        </div>

        <dl align="center" ></dl>

        <script>
            $(".btn").on("click", function() {
                var dt = $("<dt></dt>");
                dt.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
                $("dl").prepend(dt);
                dt.slideDown();
                $(".txt").val("");
            });

            $("dl").on("click", "a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            });

            var dt = $("<dt>--------------评论区--------------</dt>");
            $("dl").append(dt);
            $("dl").prepend(dt);


            $("div").mouseenter(function() {
                $(this).css("background", "#84d7ff");
            });

            $("div").on("click", function() {
                $(this).css("background", "yellow");
            });
        </script>
    </body>
</html>

Outcome

Code