1：小程序?qū)崿F(xiàn)電商秒殺倒計(jì)時(shí)效果+樣式
wxml:
<view class="container">
<text>淘搶購(gòu)倒計(jì)時(shí): {{second}} </text>
</view>
wxss:
.container{
background: #fe6906;
color: #ffffff;
}
js
// 從從60到到0倒計(jì)時(shí)
function countdown(that) {
var second = that.data.second
if (second == 0) {
that.setData({
second: "秒殺結(jié)束"
});
return;
}
var time = setTimeout(function () {
that.setData({
second: second - 1
});
countdown(that);
}
, 1000)
}
Page({
data: {
second: 60
},
onLoad: function () {
countdown(this);
}
});
效果如下
rnh03tG7ni.gif
2：時(shí)分秒倒計(jì)時(shí)+樣式
拼團(tuán)秒殺功能
https://blog.csdn.net/qq_41473887/article/details/81287786
wxml：
<view class='container'>
<text>剩余時(shí)間：{{countdown}}</text>
</view>
wxss:
.container{
background: #fe6906;
color: #ffffff;
}
js：
Page({
/*頁(yè)面的初始數(shù)據(jù)*/
data: {
countdown: ''
, endDate2: '2018-11-11 11:41:00'
},
/* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加*/
onLoad: function (options) {
var that = this;
that.countTime()
},
countTime() {
var that = this;
var date = new Date();
var now = date.getTime();
var endDate = new Date(that.data.endDate2);//設(shè)置截止時(shí)間
var end = endDate.getTime();
var leftTime = end - now; //時(shí)間差
var d, h, m, s, ms;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
ms = Math.floor(leftTime % 1000);
ms = ms < 100 ? "0" + ms : ms
s = s < 10 ? "0" + s : s
m = m < 10 ? "0" + m : m
h = h < 10 ? "0" + h : h
that.setData({
countdown: d + "：" + h + "：" + m + "：" + s + ":" + ms,
})
//遞歸每秒調(diào)用countTime方法顺少，顯示動(dòng)態(tài)時(shí)間效果
setTimeout(that.countTime, 100);
} else {
console.log('已截止')
that.setData({
countdown: '00:00:00'
})
}
},
})
效果如下：
原文作者：祈澈姑娘 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子，愛(ài)編程，愛(ài)運(yùn)營(yíng)双饥，愛(ài)折騰千康。堅(jiān)持總結(jié)工作中遇到的技術(shù)問(wèn)題瓜客，堅(jiān)持記錄工作中所所思所見(jiàn)戏溺，歡迎大家加入群聊钉稍，一起探討交流撇眯。
