js 时间处理仿微信好友列表（昨天，前天，周，年月日）

最新推荐文章于 2024-05-17 16:45:39 发布

z先生1025

最新推荐文章于 2024-05-17 16:45:39 发布

阅读量890

点赞数 2

分类专栏： web小功能文章标签：时间分类仿微信好友列表时间显示

本文链接：https://blog.csdn.net/weixin_44326007/article/details/103012057

版权

web小功能专栏收录该内容

7 篇文章 0 订阅

订阅专栏

项目要求仿照微信写一个时间按微信的展示写

时间显示参照微信显示方式，当天内的显示时间，隔天显示昨天、前天，再长间隔显示星期几，隔星期的显示年/月/日.
效果图：
在这里插入图片描述
代码（直接复制，新建一个html文件就能使用）,后面注释的是对一个数组进行的时间显示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>

    <div>
        <h2>选定一个时间，点击确认（别忘了时分）</h2>
        <input type="datetime-local" id="date" />
        <button id="btn">确定</button>
    </div>
    <h3>
        显示：<text id="time"></text>
    </h3>

</body>
<script>
    function formatTime2(date) {
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        var hour = date.getHours()
        var minute = date.getMinutes()
        var second = date.getSeconds()
        return [year, month, day].map(formatNumber2).join('-') + ' ' + [hour, minute, second].map(formatNumber2).join(
            ':')
    }

    function formatNumber2(n) {
        n = n.toString()
        return n[1] ? n : '0' + n
    }
    $("#btn").click(function () {
        let val = $("#date").val()
        if(val == ""){
            alert("未选择时间")
            return
        }

        let a = val.replace(/T/g, " ")
        console.log(a)
        data(a)
    })

    function data(data) {
        // 时间处理 主要根据当前时间的凌晨和当前时间周一的凌晨 做判断依据 （时间都转化成时间戳好计算，自认为）
        var time = formatTime2(new Date());
        let date = time.replace(/\//g, "-")
        var date1 = new Date(date) // 现在的时间
        var lc = new Date().setHours(0, 0, 0, 0) // 当前时间的凌晨的时间戳
        console.log("当前时间的凌晨的时间戳 =>", lc)
        var nowlc = new Date(lc);
        var nowTime = nowlc.getTime();
        var day = nowlc.getDay();
        var oneDay = 24 * 60 * 60 * 1000;
        var Monday = nowTime - (day - 1) * oneDay;
        var monday = new Date(Monday);
        var mondaytamp = Number(monday); //当前时间周一凌晨的时间戳
        console.log("当前时间周一凌晨的时间戳 =>", mondaytamp) // 
        var date2 = new Date(data)
        var timetamp = Number(new Date(data)); // 转化从时间戳
        console.log("后台获取的要处理的时间的时间戳 =>", timetamp)
        let d = ((lc - date2) / 1000) // 两个时间相差的秒数
        // console.log(d)
        if (d > 0) {
            var min = (d / 60).toFixed(0)
            var h = (min / 60).toFixed(0)
            // console.log(h)
            if (h <= 24) {
                data = "昨天"
            } else if (h <= 48) {
                data = "前天"
            } else if (h > 48) {
                let d = timetamp - mondaytamp
                if (d >= 0) {
                    var l = ["日", "一", "二", "三", "四", "五", "六"];
                    let z = date2.getDay()
                    data = "周" + l[z]
                    // if (z == 1) {
                    //   data = "周一"
                    // } else if (z == 2) {
                    //   data = "周二"
                    // } else if (z == 3) {
                    //   data = "周三"
                    // } else if (z == 4) {
                    //   data = "周四"
                    // } else if (z == 5) {
                    //   data = "周五"
                    // } else if (z == 6) {
                    //   data = "周六"
                    // } else if (z == 0) {
                    //   data = "周日"
                    // }
                } else if (d < 0) {
                    let y = date2.getFullYear()
                    let m = date2.getMonth()
                    let d = date2.getDate()
                    data = y + "年" + (m + 1) + "月" + d + "日"
                }
            }
        } else {
            // 当时时间段  时分
            let h = date2.getHours()
            let m = date2.getMinutes()
            data = h + ":" + m
        }
        console.log(data)
        $("#time").text(data)
        // data.forEach(e => {
        //   var date2 = new Date(e.Recent_time)
        //   var timetamp = Number(new Date(e.Recent_time)); // 转化从时间戳
        //   console.log("后台获取的要处理的时间的时间戳 =>", timetamp)
        //   let d = ((lc - date2) / 1000) // 两个时间相差的秒数
        //   if (d > 0) {
        //     var min = (d / 60).toFixed(0)
        //     var h = (min / 60).toFixed(0)
        //     if (h <= 24) {
        //       e.Recent_time = "昨天"
        //     } else if (h < 48) {
        //       e.Recent_time = "前天"
        //     } else if (h > 48) {
        //       let d = timetamp - mondaytamp
        //       if (d >= 0) {
        //         var l = ["日", "一", "二", "三", "四", "五", "六"];
        //         let z = date2.getDay()
        //         e.Recent_time = "周" + l[z]
        //         // if (z == 1) {
        //         //   e.Recent_time = "周一"
        //         // } else if (z == 2) {
        //         //   e.Recent_time = "周二"
        //         // } else if (z == 3) {
        //         //   e.Recent_time = "周三"
        //         // } else if (z == 4) {
        //         //   e.Recent_time = "周四"
        //         // } else if (z == 5) {
        //         //   e.Recent_time = "周五"
        //         // } else if (z == 6) {
        //         //   e.Recent_time = "周六"
        //         // } else if (z == 0) {
        //         //   e.Recent_time = "周日"
        //         // }
        //       } else if (d < 0) {
        //         let y = date2.getFullYear()
        //         let m = date2.getMonth()
        //         let d = date2.getDate()
        //         e.Recent_time =y + "年" + (m + 1) + "月" + d + "日"
        //       }
        //     }
        //   } else {
        //     // 当时时间段  时分
        //     let h = date2.getHours()
        //     let m = date2.getMinutes()
        //     e.Recent_time = h + ":" + m
        //   }
        // })
    }
</script>

</html>

z先生1025

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 时间处理仿微信好友列表（昨天，前天，周，年月日）

项目要求仿照微信写一个时间按微信的展示写时间显示参照微信显示方式，当天内的显示时间，隔天显示昨天、前天，再长间隔显示星期几，隔星期的显示年/月/日.效果图：代码（直接复制，新建一个html文件就能使用）,后面注释的是对一个数组进行的时间显示<!DOCTYPE html><html lang="en"><head> <meta ...
复制链接

扫一扫