JS朋友圈评论样例（粗略版）

一线摸鱼人员

已于 2023-08-02 15:34:41 修改

阅读量186

点赞数 1

分类专栏：前端文章标签： javascript 开发语言 ecmascript 前端 visual studio code

于 2023-08-02 15:33:41 首次发布

本文链接：https://blog.csdn.net/weixin_53328988/article/details/132063806

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先上效果：

完整代码：

<!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="./rem.js"></script>
    <!-- <link rel="stylesheet" href="/bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* width: 2rem;
            margin: auto; */
            padding: 0.2rem 0.1rem;
        }

        .box {
            display: flex;
            flex-direction: row;
        }

        .head_img {
            width: 0.5rem;
        }

        .head_img>img {
            display: block;
            width: 100%;
            justify-content: space-between;
        }

        .contents {
            width: 3rem;
            padding: 0 0rem 0rem 0.2rem;
            border-bottom: 0.01rem solid black;
        }

        .contents>#id {
            color: aqua;
            margin-bottom: 0.05rem;
        }

        .contents>#text {
            margin-bottom: 0.05rem;
        }

        .contents>img {
            width: 2rem;
            margin-bottom: 0.1rem;
        }

        .bottom {
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 0.2rem;
        }

        .bottom .left>p {
            font-size: 0.1rem;
        }

        .bottom .right>img {
            display: block;
            width: 0.3rem;
        }

        .bottom .middle {
            display: none;
            width: 1.3rem;
            /* height: 0.2rem; */
            background-color: #4c4c4c;
            padding: 0.05rem 0.1rem;
            border-radius: 0.05rem;
            font-size: 0.1rem;
            margin-left: 0.2rem;
            color: white;
        }

        .middle>div {
            margin: 0 0.05rem;
        }

        .bottom .middle img {
            vertical-align: middle;
        }

        #zan {
            font-size: 0.1rem;
            display: flex;
        }

        #ping {
            position: relative;
        }

        #ping>textarea {
            width: 100%;
            height: 0.8rem;
            border-radius: 0.05rem;
            border: 0.01rem solid pink;
        }

        #ping>button {
            width: 0.5rem;
            height: 0.3rem;
            border: none;
            border-radius: 0.05rem;
            background-color: aquamarine;
            position: absolute;
            bottom: 0.05rem;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="head_img">
            <img src="/梅西.png" alt="">
        </div>
        <div class="contents">
            <p id="id">梅西</p>
            <p id="text">这是文案</p>
            <img src="/梅西.png" alt="">
            <div class="bottom">
                <div class="left">
                    <p>11分钟前</p>
                </div>
                <div class="middle">
                    <div class="zan">
                        <img src="./微信评论/点赞.png" alt="">
                        <span>点赞</span>
                    </div>
                    <div class="ping">
                        <img src="./微信评论/评论.png" alt="">
                        <span>评论</span>
                    </div>
                </div>
                <div class="right">
                    <img src="./微信评论/hot.png" alt="">
                </div>
            </div>

        </div>
    </div>
</body>
<script>
    const btu = document.querySelector(".right img")
    const div = document.querySelector(".middle")
    const zan = document.querySelector(".middle .zan")
    const ping = document.querySelector(".middle .ping")
    const contents = document.querySelector(".contents")


    btu.addEventListener("click", function () {
        div.style.display = "flex"
    })
    zan.addEventListener("click", function () {
        // var Newzan = document.createElement("div") 
        contents.insertAdjacentHTML("beforeend", `<div id="zan">${"❤一线摸鱼人员"}</div>`)
    })
    ping.addEventListener("click", function () {
        // var Newping = document.createElement("di")
        contents.insertAdjacentHTML("beforeend", `<div id="ping">
        <textarea name="" id="" cols="30" rows="10"></textarea> 
        <button id="but">发送</button>
        </div`)
        div.style.display = "none"

        const but = document.querySelector("#ping #but")
        const text = document.querySelector("textarea")
        console.log(but)

        but.addEventListener("click", function () {
            console.log(text.value)
            contents.insertAdjacentHTML("beforeend", `<p><span>一线摸鱼人员:</span><span>${text.value}</span></p>`)
            const pings = document.querySelector("#ping")
            pings.style.display = "none"
        })

    })



</script>

</html>

需要注意的点：

因为需要实现的是移动端的效果，所以使用了rem.js文件

命名比较混乱