微信小程序 —— 倒计时(展示时钟)

以下所述参考网上众多大佬略写，本人只是菜鸟一枚，记录博客主要怕自己记不住，方便以后参考，有何不足，欢迎补充…
方式方法和网上大多大佬有雷同，因为我也是参考网上各位大佬的…

一、单独一个页面只有一个时展示：

进入页面获取结束时间或开始时间格式化
再执行倒计时函数

 data: {countDown: '00分00秒',  // 定义初始展示的时间}// 到计时时钟handleCountdown() {var activity_remain = '',now = new Date().getTime(),  // 获取当前时间end_time = this.data.activity_end / 1000;activity_remain = end_time - (now / 1000);var that = this;that.setData({countDown: that.dateformat(activity_remain)});// 渲染倒计时时钟timer1 = setTimeout(function () {that.handleCountdown(that);that.setData({end_time: end_time - 1})}, 1000)if (activity_remain <= 0) {clearTimeout(timer1);let countDown = '00分00秒'that.setData({countDown: countDown})return false;}},//  格式化时间dateformat(micro_second) {// 总秒数var second = Math.floor(micro_second);// 小时var hr = Math.floor(second / 3600 % 24);// 分钟var min = Math.floor(second / 60 % 60);// 秒var sec = Math.floor(second % 60);if (min < 10) {min = "0" + min;}if (sec < 10) {sec = "0" + sec;}return min + "分" + sec + '秒';},

二、页面有多个倒计时展示（数组）：
创建一个空数组，
将结束时间和 ID push进去

data：{// 倒计时countDownList: [],    // 展示倒计时的数组actEndTimeList: [],   // 结束时间和ID放进去
}timeFormat(param) {//小于10的格式化函数return param < 10 ? '0' + param : param;},// 到计时时钟handleCountdown() {// 获取当前时间，同时得到活动结束时间数组let newTime = new Date().getTime();let endTimeList = this.data.actEndTimeList;let countDownArr = [];// 对结束时间进行处理渲染到页面endTimeList.forEach(o => {let orderId = o.id;let endTime = new Date(o.endTime);let obj = null,aaa = "";// 如果活动未结束，对时间进行处理if (endTime - newTime > 0) {let time = (endTime - newTime) / 1000;// 获取天、时、分、秒let day = parseInt(time / (60 * 60 * 24));let hou = parseInt(time % (60 * 60 * 24) / 3600);let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);obj = {day: this.timeFormat(day),hou: this.timeFormat(hou),min: this.timeFormat(min),sec: this.timeFormat(sec)},aaa = {obj,orderId}} else {//活动已结束，全部设置为'00'obj = {day: '00',hou: '00',min: '00',sec: '00'},aaa = {obj,orderId}}countDownArr.push(aaa);})// 渲染，然后每隔一秒执行一次倒计时函数this.setData({ countDownList: countDownArr,isCountdown: true})// setTimeout(this.handleCountdown, 1000);if (this.data.isCountdown == true) {setTimeout(this.handleCountdown, 1000);}},

微信小程序 —— 倒计时(展示时钟)相关推荐

微信小程序倒计时，购物车，向左滑删除左拉删除
微信小程序倒计时 :https://gitee.com/dotton/CountDown 微信小程序购物车功能,全选,价格叠加:https://www.cnblogs.com/linxin/p/683 ...
微信小程序倒计时实现
微信小程序倒计时实现 a.wxml <view class="daojishi"><text>{{day}}</text>天<text&g ...
【重构】微信小程序倒计时组件
回想在4个月前刚刚进入公司实习时,我封装了一个应用于小程序的倒计时组件. 链接在这里:微信小程序之倒计时组件以现在的视角再去看之前的实现可以说是一坨看不下去的烂代码.所以也借此机会,将之前的组件重构 ...
android时钟小程序,超详细，用canvas在微信小程序上画时钟教程
Page({ data: { width:0, height:0}, onLoad:function(options) {var that = this //获取系统信息 wx.getSystemIn ...
微信小程序--字体展示
以下为微信小程序font-family中提供的十四种字体如果同时设置font-size,有时会对font-family的效果产生干扰,导致字体设置无效,需注意字体大小问题. 字体一 font-fam ...
微信小程序map展示
今天对微信小程序进行了运用,对于移动端自己做的比较少,现在大多数的项目就是百度,也就是CV工程师微信小程序的代码 wxml <view class="" hover-cla ...
通俗易懂的五星评价代码——微信小程序如何展示像淘宝天猫那样五星好评？
项目背景 2020年起始,微信官方宣布支持小程序直播.陆续有很多的商家与开发者参与到这场微信生态直播大潮中,作为电商小程序评价内容必不可少的,官方没有提供评价组件只能自己动手丰衣足食.网上看了很多资料 ...
微信小程序倒计时方法封装
最近在做一个商城小程序的时候在订单部分有用到倒计时,比如说未支付订单在一定时间后自动关闭订单,这个时候在前端页面上就要展示倒计时. 先封装一个把时间戳转化成天时分秒格式数据的方法,这个方法也可以用于单 ...
微信小程序倒计时，小程序60秒倒计时，小程序倒计时防止重复点击
相信大家再做小程序的时候大部分都会碰到获取验证码功能比如说手机号登陆获取验证码一定时间之内不能重复点击案例下载地址 html部分 <view class="signIn" ...

微信小程序 —— 倒计时(展示时钟)

微信小程序 —— 倒计时(展示时钟)相关推荐

最新文章

热门文章