【黄啊码】微信小程序倒计时秒杀功能

时间:2022-02-28 00:47:48


【黄啊码】微信小程序倒计时秒杀功能

 .wxml

<block wx:​​​​if​​​​=​​​​"{{isstart}}"​​​​>​​
​​<view ​​​​class​​​​=​​​​"top"​​​​>​​
​​<view ​​​​class​​​​=​​​​"imageview"​​​​>​​
​​<image src=​​​​"/images/background.png"​​​ ​​mode=​​​​"aspectFit"​​​​></image>​​
​​</view>​​
​​<view ​​​​class​​​​=​​​​"top_view"​​​​>​​
​​<view ​​​​class​​​​=​​​​"top_left_view"​​​​>​​
​​<view style=​​​​"color:red;height:170rpx;line-height:170rpx;margin-top:40rpx;font-size:28rpx"​​​​>​​
​​¥<text style=​​​​"font-size:30px"​​​​>{{list.Money}}</text> {{list.Name}}​​
​​</view>​​
​​<view>​​
​​{{list.Rules[0]}}​​
​​</view>​​
​​<view>​​
​​{{list.Rules[1]}}​​
​​</view>​​
​​</view>​​
​​<view ​​​​class​​​​=​​​​"top_right_view"​​​​>​​
​​<text>积分兑换</text>​​
​​</view>​​
​​</view>​​
​​</view>​​
​​<view ​​​​class​​​​=​​​​"center"​​​​>​​
​​<view style=​​​​"font-size:34rpx;"​​​​>积分抢购{{list.Money}}元{{list.Name}}</view>​​
​​<view style=​​​​"color:#358174"​​​​>​​
​​<text style=​​​​"font-size:32rpx"​​​​>需{{list.Score}}积分 | </text>​​
​​<text style=​​​​"font-size:24rpx"​​​​>每人限抢1次,您已抢购{{list.GetCount}}次</text>​​
​​</view>​​
​​<view ​​​​class​​​​=​​​​"centerview"​​​​>​​
​​<view ​​​​class​​​​=​​​​"{{list.State==2?'colorred':'colorgray'}}"​​​​>{{list.StateStr}}</view>​​
​​<view><text>剩余</text><text style=​​​​"color:#358174"​​​​>{{list.LeftCount}}</text><text>份</text></view>​​
​​</view>​​
​​</view>​​
​​<view ​​​​class​​​​=​​​​"buttom"​​​​>​​
​​<text wx:​​​​for​​​​=​​​​"{{list.Info}}"​​​ ​​wx:key=​​​​"key"​​​​>​​
​​{{item}}​​
​​</text>​​
​​</view>​​
​​<block wx:​​​​if​​​​=​​​​"{{list.GetCount!=0}}"​​​​>​​
​​<view ​​​​class​​​​=​​​​"finished"​​​​>​​
​​您已抢购成功​​
​​</view>​​
​​</block>​​
​​<block wx:elif=​​​​"{{list.State==3}}"​​​​>​​
​​<view ​​​​class​​​​=​​​​"finished"​​​​>​​
​​{{list.Desc}}​​
​​</view>​​
​​</block>​​
​​<block wx:​​​​else​​​​>​​
​​<view ​​​​class​​​​=​​​​"countdownBox"​​​ ​​bindtap=​​​​"nowbuy"​​​​>​​
​​<block wx:​​​​if​​​​=​​​​"{{timeout}}"​​​​>​​
​​{{list.Desc}}​​
​​</block>​​
​​<block wx:​​​​else​​​​>​​
​​<text>倒计时:</text>​​
​​<view ​​​​class​​​​=​​​​"item"​​​​>{{countdown.hour}}</view>​​
​​<text>:</text>​​
​​<view ​​​​class​​​​=​​​​"item"​​​​>{{countdown.minute}}</view>​​
​​<text>:</text>​​
​​<view ​​​​class​​​​=​​​​"item"​​​​>{{countdown.second}}</view>​​
​​</block>​​
​​</view>​​
​​</block>​​
​​</block>​​
​​<block wx:​​​​else​​​​>​​
​​<view ​​​​class​​​​=​​​​"nostart"​​​​>​​
​​暂无抢红包活动​​
​​</view>​​
​​</block>​​

.wxss

.top {
width: 100%;
height: 380rpx;
font-size: 24rpx;
border-bottom: 1px solid #989898;
}

.imageview {
width: 100%;
height: 360rpx;
}

.imageview image {
margin-left: 5%;
width: 90%;
height: 360rpx;
}

.top_left_view {
width: 45%;
height: 360rpx;
margin-left: 21%;
margin-top: 20rpx;
color: #636365;
line-height: 1.5em;
margin-top: -360rpx;
}

.colorgray{
color: gray;
}

.colorred{
color: red;
}

.top_left_view view {
text-align: center;
}

.top_right_view {
border: 1px solid black;
width: 4%;
color: #B89633;
height: 200rpx;
font-size: 28rpx;
margin-top: -300rpx;
margin-left: 86%;
}

.center {
width: 90%;
margin-left: 5%;
padding: 3% 0;
line-height: 1.8em;
font-size: 26rpx;
border-bottom: 1px solid #989898;
}

.centerview {
display: flex;
justify-content: space-between;
}

.buttom {
width: 90%;
margin-left: 5%;
font-size: 26rpx;
color: #989898;
}

.finished{
width: 90%;
margin-left: 5%;
height: 85rpx;
border-radius: 50rpx;
background-color: #999999;
position: absolute;
bottom: 0;
margin-bottom: 50rpx;
color: white;
text-align: center;
line-height: 85rpx;
}

.countdownBox {
width: 90%;
margin-left: 5%;
height: 85rpx;
margin-bottom: 50rpx;
background-color: #de2c3a;
border-radius: 50rpx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 30rpx;
position: absolute;
bottom: 0;
}
.countdownBox .item{
height: 50rpx;
color: #000;
box-sizing: border-box;
padding: 0rpx 8rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 35rpx;
font-weight: 480;
margin: 0rpx 10rpx;
}

.nostart{
text-align: center;
margin-top: 200rpx;
}

.js

var http = require('../../../utils/request.js');
const app = getApp();
Page({
data: {
isnull: false,
timeout: false,
isClicked: true,
isstart: false,
countdown: {
hour: '00',
minute: '00',
second: '00',
millisecond:'00'
},
list: []
},
//开始倒计时
startCountdown: function (millisecond) {
var that = this;
that.clearinterval();
app.globalData.seckillinterval = null;
if (millisecond > 0) {
app.globalData.seckillinterval = setInterval(function () {
millisecond -= 10;
if (millisecond <= 0) {
if (app.globalData.seckillinterval != null) {
clearInterval(app.globalData.seckillinterval);
app.globalData.seckillinterval = null;
}
that.setData({
countdown: {
hour: '00',
minute: '00',
second: '00',
millisecond:'00'
},
timeout: true
});
that.onShow();
}
that.transformRemainTime(millisecond);
}, 10);
} else {
that.setData({
timeout: true
});
}
},
// 剩余时间(毫秒)处理转换时间
transformRemainTime: function (millisecond) {
var that = this;
var countdownObj = that.data.countdown;
var seconds = Math.floor(millisecond / 1000)
// 小时
countdownObj.hour = that.formatTime(Math.floor(seconds / 3600 % 24));
// 分钟
countdownObj.minute = that.formatTime(Math.floor(seconds / 60 % 60));
// 秒
countdownObj.second = that.formatTime(Math.floor(seconds % 60));
// 毫秒
countdownObj.millisecond = that.formatTime(Math.floor((millisecond % 1000) / 10));
that.setData({
countdown: countdownObj
});
},
//格式化时间为2位
formatTime: function (time) {
if (time < 10)
return '0' + time;
return time;
},
//点击“立即抢”
nowbuy: function (e) {
var that = this;
//状态是“秒杀中”才执行方法
if (that.data.list.State == 2 && that.data.isClicked) {
that.setData({
isClicked: false
})
http.postRequest("Skill/Buy", {}, function (res) {
if (res.IsOk) {
wx.showModal({
title: '提示',
content: res.Data.ErrMsg,
showCancel: false,
success(res) {
if (app.globalData.seckillinterval) {
clearInterval(app.globalData.seckillinterval);
app.globalData.seckillinterval = null
}
that.onShow();
}
})
}
}, function (res) {})
//防止重复提交
setTimeout(function () {
that.setData({
isClicked: true
})
}, 1000)
}
},
onShow: function () {
var that = this;
//获取优惠券信息
http.postRequest("Skill/Index", {}, function (res) {
if (res.IsOk) {
if (res.Data) {
that.setData({
list: res.Data,
isstart: true
})
that.startCountdown(res.Data.StartTimeLeft)
} else {
that.setData({
isstart: false
})
}
}
}, function (res) {})
},
//清除计时器
clearinterval: function () {
if (app.globalData.seckillinterval) {
clearInterval(app.globalData.seckillinterval);
app.globalData.seckillinterval = null;
}
},
onHide: function () {
this.clearinterval();
},
onUnload: function () {
this.clearinterval();
}
})

在使用完定时器后一定要清除定时器,否则定时器将一直运行,占用程序资源,甚至程序报错。关于有效清除定时器方法在微信开放社区的讨论:微信小程序使用clearInterval清除定时函数无效? | 微信开放社区

啊码整理了一部分小程序的案例,比较适合入门的朋友入手,如果需要可以从该​​链接【1】​​、​​链接【2】​​进入

【黄啊码】微信小程序倒计时秒杀功能

【黄啊码】微信小程序倒计时秒杀功能

【黄啊码】微信小程序倒计时秒杀功能