项目要求 仿照微信 写一个时间按微信的展示写
时间显示参照微信显示方式,当天内的显示时间,隔天显示昨天、前天,再长间隔显示星期几,隔星期的显示年/月/日.
效果图:
代码(直接复制,新建一个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>