如何在微信小程序中实现计时倒数功能
最编程
2024-02-22 20:13:47
...
微信小程序倒计时功能
1、在wxml页面中写入倒计时功能代码,设计倒计时功能。依次从天、时、分、秒写入代码。
<view class='body'> <!--设置倒计时格式-->
<text class='time1'>距结束</text>
<text class='text1'>{{qgdjs_jo.day}}</text>
<text class='time1'>天</text>
<text class='text1'>{{qgdjs_jo.hour}}</text>
<text class='time1'>时</text>
<text class='text1'>{{qgdjs_jo.min}}</text>
<text class='time1'>分</text>
<text class='text1'>{{qgdjs_jo.sec}}</text>
<text class='time1'>秒</text>
</view>
2、在wxss里面设置计时器的样式
.body{
display: flex;
width: 100%;
align-items: center;
font-size: 12px;
flex-direction: row;
justify-content: flex-end;
}
.time1{
color: #f02a46;
padding-right: 2px;
padding-left: 2px;
}
.text1{
color: #fff;
background: #f02a46;
border-radius: 5px;
padding: 2px;
}
2、在data中定义倒计时中要用到的变量。结束时间(jssj),定时器名称等,结束时间一般都是从后台获取的。
Page({
data: {
jssj:"2020-07-24 07:23:00", //设置结束时间
timer:"", //倒计时定时器名称
qgdjs_jo:{ day : "00", hour: "00", min: "00", sec: "00"} //抢购倒计时
},
3、然后编写计时器函数,主要用到了定时器的功能。
countDown:function(){
let that = this;
that.setData({
timer: setInterval(function(){
var lefttime = parseInt((new Date(that.data.jssj.replace(/-/g,"/")).getTime() - new Date().getTime()));
if(lefttime <= 0) {
that.setData({
qgdjs_jo:{day:"00",hour:"00",min:"00",sec:"00"}
})
clearInterval(that.data.timer);
return;
}
var d = parseInt(lefttime /1000 /3600 /24); //天数
var h = parseInt(lefttime / 1000 / 3600 % 24); //小时
var m = parseInt(lefttime / 1000 / 60 % 60); //分钟
var s = parseInt(lefttime / 1000 % 60); //当前的秒
d < 10 ? d = "0" + d : d;
h < 10 ? h = "0" + h : h;
m < 10 ? m = "0" + m : m;
s < 10 ? s = "0" + s : s;
that.setData({
qgdjs_jo:{ day: d, hour: h, min: m, sec:s }
})
},1000)
})
},
然后 调用计时器函数,一般都是在onload中执行。
onLoad: function () {
var that = this;
that.countDown();
},
然后就可以了
上一篇: uni-app里的倒计时期间重置方法
下一篇: React里的计时器Hook实现方法
推荐阅读
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
如何在微信小程序中实现计时倒数功能
-
如何在微信小程序中启用无缝扫码功能(使用uniapp开发)
-
如何在微信小程序中实现快速扫码功能 (以 Uni-app 为例)
-
在uniapp的小程序中,实现轻松长按二维码扫描,直接跳转至相应小程序或个人微信账号的功能
-
如何在微信小程序中实现防抖和节流的小程序版本编写方法
-
如何在微信小程序中添加车牌输入功能?
-
在微信小程序中实现弹幕发送的视频播放器功能