此博客介绍如何使用 Vue.js 和 JavaScript 实现一个输入框，当用户输入日期后，能精确计算并显示从当前时间到输入日期的过去时间，包括年前、月前、日前、小时前、分钟前和秒前的展示。通过 filters 功能实现时间差的计算和格式化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<input type="text" v-model="day">
<p>{{day|time}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<script>
new Vue({
el: '.box',
data: {
day: new Date().toLocaleString()
},
filters: {
time(val) {
var time1 = new Date(val).getTime();
var time2 = new Date().getTime();
var time3 = time2 - time1
var t = Math.round(time3 / 1000 / 60 / 60 / 24)
if (t >= 365) {
var y = Math.round(t / 365)
return y + '年前'
} else if (t > 30) {
var m = Math.round(t / 30)
return m + '月前'
} else if (t >= 1) {
return t + '日前'
} else if (time3 >= 60 * 60 * 1000) {
var h = Math.round(time3 / 60 / 60 / 1000)
return h + '时前'
} else if (time3 >= 60 * 1000) {
var f = Math.round(time3 / 60 / 1000)
return f + '分前'
} else {
var s = Math.round(time3 / 1000)
return s + '秒前'
}
}
}
})
</script>
</html>
运行结果
扫一扫
2279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
