微信小程序?qū)崿F(xiàn)倒計時功能
更新時間:2020年11月19日 10:23:59 作者:大白大白大白
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)倒計時功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)倒計時功能的具體代碼,供大家參考,具體內(nèi)容如下
商城商品中的活動倒計時
js
var endTime = new Date().getTime() + 24 * 3600 * 1000*4;
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
headerImgs: postData.postSwiperData,
countDownDay: '',
countDownHour: '',
countDownMinute: '',
countDownSecond: '',
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
var id = options.id; //頁面跳轉(zhuǎn)傳過來的值
},
onReady: function() {
var that = this;
countdown(that);
}
})
function countdown(that) {
var NowTime = new Date().getTime();
var EndTime = endTime;
var total_micro_second = EndTime - NowTime || [];
console.log('當前時間'+NowTime+'\n剩余時間:' + total_micro_second);
// 渲染倒計時時鐘
that.setData({
countDownDay: dateformaDay(total_micro_second),
countDownHour: dateformaHour(total_micro_second),
countDownMinute: dateformaMinute(total_micro_second),
countDownSecond: dateformaSecondMinute(total_micro_second),
});
// if (total_micro_second <= 0) {
// that.setData({
// clock: "已經(jīng)截止"
// });
// //return;
// }
setTimeout(function() {
total_micro_second -= 1000;
countdown(that);
}, 1000)
}
// 時間格式化輸出
function dateformaDay(micro_second) {
// 總秒數(shù)
var second = Math.floor(micro_second / 1000);
// 天數(shù)
var day = Math.floor(second / 3600 / 24);
return day;
}
function dateformaHour(micro_second) {
// 總秒數(shù)
var second = Math.floor(micro_second / 1000);
// 小時
var hr = Math.floor(second / 3600 % 24);
return hr;
}
function dateformaMinute(micro_second) {
// 總秒數(shù)
var second = Math.floor(micro_second / 1000);
// 分鐘
var min = Math.floor(second / 60 % 60);
return min;
}
function dateformaSecondMinute(micro_second) {
// 總秒數(shù)
var second = Math.floor(micro_second / 1000);
// 秒
var sec = Math.floor(second % 60);
return sec;
}
wxml
<!-- 倒計時 start -->
<view style='display:flex;flex-direction:column;'>
<span style="font-size:10px;color:white;margin-top:5px;">距活動結束還剩</span>
<view class='time-container'>
<text class='time-number'>{{countDownDay}}</text>
<span class='time-text'>天</span>
<text class='time-number'>{{countDownHour}}</text>
<span class='time-text'>時</span>
<text class='time-number'>{{countDownMinute}}</text>
<span class='time-text '>分</span>
<text class='time-number '>{{countDownSecond}}</text>
<span class='time-text '>秒</span>
</view>
</view>
<!-- 倒計時 end -->
wxss
.time-container {
display: flex;
flex-direction: row;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
align-items: center;
}
.time-number {
background: white;
color: red;
width: 18px;
height: 18px;
font-size: 12px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.time-text {
font-size: 10px;
color: white;
margin: 3px;
}
為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript實現(xiàn)經(jīng)緯度轉(zhuǎn)換成地址功能
這篇文章主要介紹了JavaScript實現(xiàn)經(jīng)緯度轉(zhuǎn)換成地址,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03
利用javascript實現(xiàn)的三種圖片放大鏡效果實例(附源碼)
這篇文章主要介紹了利用javascript實現(xiàn)的幾種放大鏡效果,很實用一款漂亮的js圖片放大鏡特效,常見于電商網(wǎng)站上產(chǎn)品頁,用來放大展示圖片細節(jié),很有實用性,推薦下載學習研究。文中提供了完整的源碼供大家下載,需要的朋友可以參考借鑒,一起來看看吧。2017-01-01
JS實現(xiàn)圖文并茂的tab選項卡效果示例【附demo源碼下載】
這篇文章主要介紹了JS實現(xiàn)圖文并茂的tab選項卡效果,涉及javascript響應鼠標事件動態(tài)修改頁面元素屬性的相關操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
javaScript 判斷字符串是否為數(shù)字的簡單方法
javascript在通過parseIn或parseFloat將字符串轉(zhuǎn)化為數(shù)字的過程中,如果字符串中包含有非數(shù)字,那么將會返回NaN,參考下面代碼2009-07-07
Javascript:為input設置readOnly屬性(示例講解)
本篇文章主要是對Javascript中為input設置readOnly屬性的示例代碼進行了介紹。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12

