局部過濾器
時間、***號
<div id="wrapper" class="wrapper" style="display: none;">
距離活動結束還剩:<p v-html="times"></p>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script src="qs.min.js"></script>
var mainVM = new Vue({
el: '#wrapper',
data: {
initActiveMsgObj:{}, // 接收接口返回的數據
timer: null, // 計時器
times: '<span>0</span>天<span>00</span>時<span>0</span>分', // 倒計時到分鍾，比真正的秒還差60秒，需要賦值的時候加進去，如果是到秒，就不需要了
countDown: 0
},
filters: {
formatNumber(value){ // 格式化金額
var nStr = value;
if(!nStr){return nStr;}
nStr += '';
x = nStr.split('.');
x1 = x[0];
if(!x[1]){
x[1] = '00';
}
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
},
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: {
getDetail(){ // 初始化數據
axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
method: 'post',
dataType: "json",
data: Qs.stringify({
tid: this.GetQueryString('tid'), // 從url上獲取id
}),
url: url,
}).then(function (res) {
if(res.data && res.data.result){
res = res.data
if(res.status == 200){
mainVM.initActiveMsgObj = res.result;
mainVM.countDown = Number(res.result.end_time) + 60; // 這里如果是時間到分鍾，需要增加一個60s，這樣防止，到00還需要等一分鍾才結束活動，如果顯示到秒就不需要了次變量了。
mainVM.timeDown();
}else{
}
}
}).catch(function(error){
})
},
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);
var endtime = this.countDown;
// 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){
if(totalSeconds <= 60){
clearInterval(this.timer);
window.location.reload()
}else{
this.timer = setInterval(this.timeDown, 1000);
}
},
}
})