js实现评论并按时间排序

最新推荐文章于 2024-05-31 14:43:52 发布
最新推荐文章于 2024-05-31 14:43:52 发布
阅读量585 收藏 8
点赞数 16
分类专栏： js 文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56713342/article/details/134675189
版权

目录

css代码

html代码

js代码

完整代码

效果图

需求：1.点击输入框时，下方显示输入框文本长度

           2.失去焦点时，输入框文本长度消失

          3.发布每条评论时按时间顺序排序

          4.可以实时删除评论

css代码

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            width: 500px;
        }

        input {
            height: 60px;
            padding-left: 20px;

            width: 500px;
            outline: none;
            border: 1px solid #9c9b9c;
            border-radius: 10px;
        }

        /* input:focus {
            height: 60px;
            background-color: white;

        } */

        .top p {
            text-align: right;
            margin-top: 3px;
        }

        button {
            width: 100px;
            height: 30px;
            color: white;
            background-color: #3686ff;
            outline: none;
            border: none;
        }

        .list .img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: darkorange;
            margin-right: 20px;
        }

        .list {
            display: flex;
            position: relative;
            height: 100px;

            border-bottom: 1px dashed #adabab;
            padding: 10px;


        }

        .list span {
            position: absolute;
            display: block;
            width: 20px;
            height: 20px;
            /* background-color: aqua; */
            cursor: pointer;
            top: 0;
            right: 0;
            font-size: 20px;
            text-align: center;
            line-height: 20px;
        }

        .info .name {
            font-weight: 600;
        }

        .info .time {
            color: #c9cdd5;
            font-size: 14px;
            margin-bottom: 20px;
            margin-top: 10px;
        }

        .info .text {
            color: #757575;
        }

        .top .publish {
            opacity: 0;

            transition: all 0.5s;
        }

        ul {
            margin-top: 30px;
        }
    </style>

html代码

  <div class="wrapper">
        <div class="top">
            <input type="text" placeholder="说点什么吧...">
            <p> <span class="publish">0/200字</span><button>发布</button></p>

        </div>

        <ul>
            <li>

                <!-- <div class="list">

            <div class="img"></div>
            <div class="info">
                <p class="name">孙膑</p>
                <p class="time">发布于</p>
                <p class="text">今天吃大肘子</p>
                <span>x</span>
            </div>
        </div>
       -->
            </li>
        </ul>



    </div>

js代码

思路：先给input输入框添加获取焦点时，显示文本长度

           失去焦点时，隐藏文本长度

          给input框添加inpu事件，input事件是跟随input框内容的变化而变化，因而可以实时获取输             入框的内容长度

        再给按钮添加点击事件，并动态创建li来存储评论内容

        封装一个获取当前时间的函数

        给创建的li中的某个元素添加点击事件，用于删除评论

 <script>
        const btn = document.querySelector('button')
        const ipt = document.querySelector('input')
        const span = document.querySelector('.top span')
        const pub = document.querySelector('.top p .publish')

        //获取焦点显示
        ipt.addEventListener('focus', function () {
            pub.style.opacity = 1



        })
        //失去焦点隐藏
        ipt.addEventListener('blur', function () {
            pub.style.opacity = 0

        })
        ipt.addEventListener('input', function () {
            pub.innerHTML = `${ipt.value.length}/200字`
        })

        //给按钮添加事件

        const ul = document.querySelector('ul')

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

            //判断输入框是是否为空

            if (ipt.value === '') {
                alert('请输入内容')
                return
            } else {
                //创建li
                let li = document.createElement('li')



                li.innerHTML = `<div class="list">

                <div class="img"></div>
                <div class="info">
                    <p class="name">孙膑</p>
                    <p class="time">发布于${getTime()}</p>
                    <p class="text">${ipt.value}</p>
                    <span>x</span>
                </div>
                </div>`
                ul.prepend(li)
                ipt.value = ''
            }



            //给span绑定事件

            let spans = document.querySelectorAll('.info span')
            for (let i = 0; i < spans.length; i++) {
                spans[i].addEventListener('click', function () {
                    this.parentNode.parentNode.parentNode.remove()

                    // ul.removeChild(this.parentNode.parentNode.parentNode)
                })
            }


        })

//获取当前时间
        function getTime() {
            let date = new Date()
            let y = date.getFullYear()
            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 mm = date.getMinutes()
            mm = mm < 10 ? '0' + mm : mm
            let s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            return `${y}/${m}/${d} ${h}:${mm}:${s}`

        }


    </script>

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            width: 500px;
        }

        input {
            height: 60px;
            padding-left: 20px;

            width: 500px;
            outline: none;
            border: 1px solid #9c9b9c;
            border-radius: 10px;
        }

        /* input:focus {
            height: 60px;
            background-color: white;

        } */

        .top p {
            text-align: right;
            margin-top: 3px;
        }

        button {
            width: 100px;
            height: 30px;
            color: white;
            background-color: #3686ff;
            outline: none;
            border: none;
        }

        .list .img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: darkorange;
            margin-right: 20px;
        }

        .list {
            display: flex;
            position: relative;
            height: 100px;

            border-bottom: 1px dashed #adabab;
            padding: 10px;


        }

        .list span {
            position: absolute;
            display: block;
            width: 20px;
            height: 20px;
            /* background-color: aqua; */
            cursor: pointer;
            top: 0;
            right: 0;
            font-size: 20px;
            text-align: center;
            line-height: 20px;
        }

        .info .name {
            font-weight: 600;
        }

        .info .time {
            color: #c9cdd5;
            font-size: 14px;
            margin-bottom: 20px;
            margin-top: 10px;
        }

        .info .text {
            color: #757575;
        }

        .top .publish {
            opacity: 0;

            transition: all 0.5s;
        }

        ul {
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="top">
            <input type="text" placeholder="说点什么吧...">
            <p> <span class="publish">0/200字</span><button>发布</button></p>

        </div>

        <ul>
            <li>

                <!-- <div class="list">

            <div class="img"></div>
            <div class="info">
                <p class="name">孙膑</p>
                <p class="time">发布于</p>
                <p class="text">今天吃大肘子</p>
                <span>x</span>
            </div>
        </div>
       -->
            </li>
        </ul>





    </div>

    <script>
        const btn = document.querySelector('button')
        const ipt = document.querySelector('input')
        const span = document.querySelector('.top span')
        const pub = document.querySelector('.top p .publish')

        //获取焦点显示
        ipt.addEventListener('focus', function () {
            pub.style.opacity = 1



        })
        //失去焦点隐藏
        ipt.addEventListener('blur', function () {
            pub.style.opacity = 0

        })
        ipt.addEventListener('input', function () {
            pub.innerHTML = `${ipt.value.length}/200字`
        })

        //给按钮添加事件

        const ul = document.querySelector('ul')

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

            //判断输入框是是否为空

            if (ipt.value === '') {
                alert('请输入内容')
                return
            } else {
                //创建li
                let li = document.createElement('li')



                li.innerHTML = `<div class="list">

                <div class="img"></div>
                <div class="info">
                    <p class="name">孙膑</p>
                    <p class="time">发布于${getTime()}</p>
                    <p class="text">${ipt.value}</p>
                    <span>x</span>
                </div>
                </div>`
                ul.prepend(li)
                ipt.value = ''
            }



            //给span绑定事件

            let spans = document.querySelectorAll('.info span')
            for (let i = 0; i < spans.length; i++) {
                spans[i].addEventListener('click', function () {
                    this.parentNode.parentNode.parentNode.remove()

                    // ul.removeChild(this.parentNode.parentNode.parentNode)
                })
            }


        })

//获取当前时间
        function getTime() {
            let date = new Date()
            let y = date.getFullYear()
            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 mm = date.getMinutes()
            mm = mm < 10 ? '0' + mm : mm
            let s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            return `${y}/${m}/${d} ${h}:${mm}:${s}`

        }


    </script>
</body>

</html>

效果图

诗霖雪
关注
专栏目录
js实现时间轴自动排列效果
10-20
在本文中，我们将深入了解如何使用JavaScript实现时间轴自动排列效果，这是一种常用于展示事件随时间顺序排列的网页设计元素。 ### 时间轴自动排列效果的实现 时间轴自动排列效果主要是通过在网页中创建一个时间线...
Jquery实现超酷的树形排列评论列表时间轴.zip
07-11
实现效果： Jquery实现超酷的树形排列评论列表时间轴, 个人网站中使用就不错了。比如留言的功能，然后还有回复，这样的效果也是不错的，php中文网推荐下载！
js实现简易的评论留言功能
yang68668的博客
11-05 3486
<style> * { margin: 0; padding: 0; } li { list-style: none; width: 500px; height: 30px; line-height: 30px; background-color: cadetbl.
原生JS实现评论留言模块
最新发布
2401_82754161的博客
05-31 692
暂无评论~~~</span><p class="show">限制字数0/50</p>alert('评论不能为空！alert('超出字数限制！alert('评论不能为空！alert('超出字数限制！<span>清风徐来
js时间/日期排序
Lsiyi_的博客
05-06 414
2. 如果为时间戳格式，就不需要加Date.parse(），直接a[prop] - b[prop]（升序）即可。1. 日期格式为类似 2023-05-06 这种的，需要加上Date.parse(）。
JavaScript基础 发布评论/删除评论/获取时间
weixin_44944007的博客
12-05 2255
创建节点（三种方法） document.createElement(‘tagName’); 此方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，也称为动态创建元素节点。创建多个元素时效率较第一点，但结构清晰。 document.write();是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。 element.innerHTML;是将内容写入某个DOM节点，不会导致页面全部重绘，而且此方法在创建多个元素时效率更高（采取数组形式拼接），..
js中评论发送的时间，几天前，几小时前，刚刚
weixin_46089767的博客
01-14 619
评论发送的时间，几天前，几小时前，刚刚js代码 js代码 <script type="text/javascript"> function timeShow(time) { // 保留原始的时间 let result = time; //把分，时，天，周，半个月，一个月用毫秒表示 let minute = 1000 * 60; let hour = minute * 60; let day = hour * 24;
javascript时间排序算法实现活动秒杀倒计时效果
10-22
本文即为介绍如何通过JavaScript实现多个秒杀活动的倒计时排序效果。 首先，要实现多个倒计时的排序效果，我们需要了解JavaScript中的时间排序算法。JavaScript的Date对象和数组的sort方法是实现该算法的关键。Date...
JS实现冒泡排序，插入排序和快速排序并排序输出
10-23
冒泡排序、插入排序和快速排序是三种基础的排序算法，在JavaScript（JS）中实现这些算法可以加深对算法逻辑和程序设计的理解。以下是针对这三种排序算法的知识点详细说明： 冒泡排序（Bubble Sort）是一种简单的...
js实现数组冒泡排序、快速排序原理
11-22
最后，通过递归调用快速排序函数并合并结果，实现整个数组的排序。 快速排序的平均时间复杂度为O(n log n)，最坏情况（即输入数组已完全排序或逆序）为O(n^2)。但实际应用中，由于快速排序的效率高，通常被认为是最...
js实现评论、回复消息显示刚刚，几分钟前，几小时前。
Aurora_____的博客
11-30 5114
常见的评论或者朋友圈都能看到的发送时间是刚刚，几分钟前，几小时前，所以在做评论模块的时候也想进行这样的转换，其实转换的方法也挺简单的，就是获取到评论发送的时间戳和当前的时间戳进行对比，然后在除分、时、天、周、月所对应的时间戳，就能得到我们想要的效果了 /** * dateTimeStamp是评论的发送时间 2020-01-12 20:10:15 这样的形式 * @param dateTimeStamp * @returns {string}
JS实现简单的评论与删除功能
Henry的博客
08-21 2646
js实现简单的评论，删除功能，简单页面布局
JS评论时间
monongLY的博客
11-10 509
一分钟内显示 1分钟前 一小时内显示 xx分钟前 今天之内的显示 xx:xx 昨天的显示 昨天xx:xx 昨天之前，今年之内 xx月xx日 今年之前的显示 xx年xx月xx日 废话少说，上代码 export default { convertDate: (timestamp) => { // 当前时间 var nowDate = new Date(); // 分 xx分 v...
vue实战知乎日报（5）-自定义指令V-time
Beq
08-21 662
声明一个变量，获取时间戳，转换时间，最后通过bind定时更新时间。 源码： var Time = { // 获取当前时间戳 getUnix: function () { var date = new Date(); return date.getTime(); }, // 获取今天0点0分0秒的时间戳 getTodayU...
21-js 实现评论时间格式转化
weixin_30342209的博客
01-01 195
　　js里面要用可以用伊尔表达式，循环是用js： document.getElementById("${pj.pltime }").innerHTML = dateToGMT("${pj.pltime }"); <div class="order-info"> <p id="${pj.pltime}"> <script type=...
js实现移动端时间轴插件
04-13
在移动端应用开发中，时间轴（Timeline）是一种常见的可视化组件，用于展示按时间顺序排列的事件或数据。本文将深入探讨如何使用JavaScript实现一个适用于移动端的时间轴插件，并结合提供的压缩包资源，帮助开发者...
基于javascript实现按圆形排列DIV元素(二)
10-20
通过这种方式，我们可以用JavaScript实现一个动态的、按圆形排列的DOM元素效果，使页面元素呈现出优雅的动画效果。这个方法不仅适用于圆形布局，还可以扩展到其他几何形状，只需要调整计算坐标的方式即可。
js评论显示刚刚还是时间还是几分钟几小时前
SHERLOCK_96的博客
06-29 666
方法： getTimeShow(time_str){var now = new Date(); var date = new Date(time_str); //计算时间间隔，单位为分钟 var inter = parseInt((now.getTime() - date.getTime())/1000/60); if(inter == 0){ return "刚刚"; } //多少分钟前 else if(inter < 60){ return inter.toString()
js时间
csh的博客
03-31 967
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：VS2015和 JavaScript 撰写时间：2019年3月2日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
js 时间差(过去了多少时间、还剩多少时间）
CHBOS的专栏
10-09 3490
function timeago(timestamp) { var d_minutes, d_hours, d_days, d_seconds; var timeNow = parseInt(new Date().getTime() / 1000); d_seconds = timeNow - timestamp / 1000; d_
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值