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