微信小程序顯示倒計時功能示例【測試可用】
更新時間:2018年12月03日 10:50:09 作者:kerryqpw
這篇文章主要介紹了微信小程序顯示倒計時功能,結(jié)合實例形式分析了微信小程序針對給定時間的倒計時功能相關(guān)界面顯示與邏輯運算操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序顯示倒計時功能。分享給大家供大家參考,具體如下:
微信小程序中顯示倒計時:
index.wxml:
<view class='countdown'>剩:<text style='color:#6B4EFD'> {{countDownDay}} </text> 天 <text style='color:#6B4EFD'>{{countDownHour}} </text> <text style='color:#6B4EFD'>{{countDownMinute}} </text> <text style='color:#6B4EFD'>{{countDownSecond}} </text>
</view>
index.js:
Page( {
data: {
windowHeight: 654,
maxtime: "",
isHiddenLoading: true,
isHiddenToast: true,
dataList: {},
countDownDay: 0,
countDownHour: 0,
countDownMinute: 0,
countDownSecond: 0,
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo( {
url: '../logs/logs'
})
},
onLoad: function() {
this.setData( {
windowHeight: wx.getStorageSync( 'windowHeight' )
});
},
// 頁面渲染完成后 調(diào)用
onReady: function () {
var totalSecond = Date.parse(new Date("2018/12/12")) / 1000 - Date.parse(new Date()) / 1000;
var interval = setInterval(function () {
// 秒數(shù)
var second = totalSecond;
// 天數(shù)位
var day = Math.floor(second / 3600 / 24);
var dayStr = day.toString();
if (dayStr.length == 1) dayStr = '0' + dayStr;
// 小時位
var hr = Math.floor((second - day * 3600 * 24) / 3600);
var hrStr = hr.toString();
if (hrStr.length == 1) hrStr = '0' + hrStr;
// 分鐘位
var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60);
var minStr = min.toString();
if (minStr.length == 1) minStr = '0' + minStr;
// 秒位
var sec = second - day * 3600 * 24 - hr * 3600 - min*60;
var secStr = sec.toString();
if (secStr.length == 1) secStr = '0' + secStr;
this.setData({
countDownDay: dayStr,
countDownHour: hrStr,
countDownMinute: minStr,
countDownSecond: secStr,
});
totalSecond--;
if (totalSecond < 0) {
clearInterval(interval);
wx.showToast({
title: '活動已結(jié)束',
});
this.setData({
countDownDay: '00',
countDownHour: '00',
countDownMinute: '00',
countDownSecond: '00',
});
}
}.bind(this), 1000);
},
//cell事件處理函數(shù)
bindCellViewTap: function (e) {
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../babyDetail/babyDetail?id=' + id
});
}
})
運行結(jié)果如下圖所示:

希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
JavaScript代碼實現(xiàn)左右上下自動晃動自動移動
最近幾天做了一個項目,原來是用css3動畫做的,由于不兼容IE,改成用js做了,特此分享給大家,供大家參考2016-04-04
關(guān)于UTF-8的客戶端用AJAX方式獲取GB2312的服務(wù)器端亂碼問題的解決辦法
客戶端是UTF-8編碼,這也是現(xiàn)在大家公認的標準編碼在這種情況下,實用AJAX異步獲取GB2312編碼的服務(wù)器端信息時,不可避免的要遇到漢字亂碼問題2010-11-11
js實現(xiàn)微信/QQ直接跳轉(zhuǎn)到支付寶APP打開口令領(lǐng)紅包功能
最近支付寶的領(lǐng)紅包可真是刷爆了各個微信群啊,滿群都是支付寶口令,可是這樣推廣很麻煩,下面小編給大家?guī)砹薺s實現(xiàn)微信/QQ直接跳轉(zhuǎn)到支付寶APP打開口令領(lǐng)紅包功能,需要的朋友參考下2018-01-01
使用Bootstrap typeahead插件實現(xiàn)搜索框自動補全的方法
這篇文章主要介紹了使用Bootstrap typeahead插件實現(xiàn)搜索框自動補全的方法的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07
關(guān)于ES6尾調(diào)用優(yōu)化的使用
這篇文章主要介紹了關(guān)于ES6尾調(diào)用優(yōu)化的使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09

