主页 > 前端 > javascript >
来源:自学PHP网 时间:2020-11-02 10:29 作者:小飞侠 阅读:次
[导读] 微信小程序实现单个或多个倒计时功能...
今天带来微信小程序实现单个或多个倒计时功能教程详解
微信小程序 实现单个/多个倒计时显示
思路:首先获取到每个倒计时的结束时间,然后把结束时间跟当前时间转换成时间戳,结束时间减去当前时间再除以1000(因为时间戳是毫秒级)就是该结束时间距离当前时间的秒数了,然后根据公式计算出时分秒,最后使用定时器每秒跑一次就实现成功啦~ 好啦!说完思路先上效果图看看 单个倒计时 上代码,上代码!!!重点来啦 wxml: // 单个倒计时-----wxml css: // 单个倒计时-----wxss .countdown .item { display: flex; justify-content: center; align-items: center; height: 200rpx; width: 90%; margin: 0 5%; border-bottom: 2rpx solid #eee; } .countdown .item .txt-time { background-color: #6EBEC7; color: #fff; border-radius: 10rpx; font-size: 28rpx; margin: 0 4rpx; font-weight: bold; height: 42rpx; width: 66rpx; line-height: 42rpx; text-align: center; } js: // 单个倒计时-----js Page({ /** * 页面的初始数据 */ data: { endTime: "2020-08-22 18:30:00",//结束时间 }, //时间显示小于10的格式化函数 timeFormat(param) { return param < 10 ? '0' + param : param; }, //倒计时 singleCountDown: function () { var that = this; var time = 0; var obj = {}; var endTime = new Date(that.data.endTime.replace(/-/g, "/")).getTime();//结束时间时间戳 var currentTime = new Date().getTime();//当前时间时间戳 time = (endTime - currentTime) / 1000; // 如果活动未结束 if (time > 0) { var hou = parseInt(time / (60 * 60)); var min = parseInt(time % (60 * 60 * 24) % 3600 / 60); var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60); obj = { hou: that.timeFormat(hou), min: that.timeFormat(min), sec: that.timeFormat(sec) } } else { //活动已结束 obj = { hou: "00", min: "00", sec: "00" } clearTimeout(that.data.timeIntervalSingle); //清除定时器 } var timeIntervalSingle = setTimeout(that.singleCountDown, 1000); that.setData({ timeIntervalSingle, txtTime: obj, }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.singleCountDown();//页面加载时就启动定时器 }, }) 多个倒计时 wxml: // 多个倒计时显示-----wxml wxss: 跟上面单个倒计时样式一样,这里就不贴出来啦! js: // 多个倒计时显示-----wxml Page({ /** * 页面的初始数据 */ data: { timeList: [{//时间数组 title: "a倒计时", endTime: "2020-08-23 18:00:00", }, { title: "b倒计时", endTime: "2020-08-25 20:00:00", }, { title: "c倒计时", endTime: "2020-08-21 20:00:00", }], }, //时间显示小于10的前面补0方法 timeFormat(param) { return param < 10 ? '0' + param : param; }, //多个倒计时函数 severalCountDown: function () { var that = this; var time = 0; var obj = {}; var timeList = that.data.timeList; //遍历数组,计算每个item的倒计时秒数 timeList.forEach(function (item) { var endTime = new Date(item.endTime.replace(/-/g, "/")).getTime();//结束时间时间戳 var currentTime = new Date().getTime();//当前时间时间戳 time = (endTime - currentTime) / 1000; // 如果活动未结束 if (time > 0) { var hou = parseInt(time / (60 * 60)); var min = parseInt(time % (60 * 60 * 24) % 3600 / 60); var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60); obj = { hou: that.timeFormat(hou), min: that.timeFormat(min), sec: that.timeFormat(sec) } } else { //活动已结束 obj = { hou: "00", min: "00", sec: "00" } clearTimeout(that.data.timeIntervalSeveral); //清除定时器 } item.time = obj; }) var timeIntervalSeveral = setTimeout(that.severalCountDown, 1000); that.setData({ timeIntervalSeveral, timeList, }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.severalCountDown();//多个定时器 }, }) 易错点:结束时间转换成时间戳时要特别特别注意把时间字符串的‘-'替换成‘/',不然在ios中有报错 温馨提示:定时器推荐使用setTimeout(),而不推荐setinterval 好了,看到这里单个或者多个倒计时显示功能就实现成功啦,具体样式可以根据自己需求修改即可。 为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学php网。 以上就是关于微信小程序实现单个或多个倒计时功能全部内容,感谢大家支持自学php网。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com