Vue -- filters 过滤器、倒计时效果

局部过滤器

时间、***号

<div id="wrapper" class="wrapper" style="display: none;">
距离活动结束还剩:<p v-html="times"></p>
</div>
var mainVM = new Vue({
el: '#wrapper',
data: {
timer: null, // 计时器
times: '<span>0</span>天<span>00</span>时<span>0</span>分'
},
filters: {
formatDate(timestamp) {
if (!timestamp) return;
var date = new Date(timestamp * 1000);
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
return M + "." + D;
},
formatDateChina(timestamp) {
if (!timestamp) return;
var date = new Date(timestamp * 1000);
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
return M + "月" + D + "日";
},
},
mounted() {
document.getElementById('wrapper').style.display = 'block';
},
created() {
this.getDetail();
},
methods: {
GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
},
timeDown() {  // 倒计时
clearInterval(this.timer);
var starttime = this.initActiveMsgObj.start_time;
var nowDate = Math.round(new Date() / 1000); // 当前时间
var endtime = Number(this.initActiveMsgObj.end_time)+60; // 这里如果是时间到分钟，需要增加一个60s，这样防止，到00还需要等一分钟才结束活动，如果显示到秒就不需要了。
// endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
if(endtime < nowDate){return}
var totalSeconds = parseInt((endtime - nowDate)); // 相差的总秒数
//天数
var days = Math.floor(totalSeconds / (60 * 60 * 24));
//取模（余数）
var modulo = totalSeconds % (60 * 60 * 24);
//小时数
var hours = Math.floor(modulo / (60 * 60));
hours = hours < 10 ? ('0' + hours) : hours;
modulo = modulo % (60 * 60);
//分钟
var minutes = Math.floor(modulo / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
// console.log(minutes)
//秒
// var seconds = modulo % 60;
// console.log(seconds);
//输出到页面
this.times = '<span>'+ days +'</span>天<span>'+ hours +'</span>时<span>'+ minutes +'</span>分';
// console.log(days + "天" + hours + "时" + minutes + "分");
if(totalSeconds <= 0){
clearInterval(this.timer);
}else{
this.timer = setInterval(this.timeDown, 1000);
}
},
}
})

转载于:https://www.cnblogs.com/lisaShare/p/11164541.html

• 点赞
• 收藏
• 分享
• 文章举报