微信小程序实现单个或多个倒计时功能


Posted in Javascript onNovember 01, 2020

微信小程序 实现单个/多个倒计时显示

  • 单个倒计时
  • 多个倒计时

思路:首先获取到每个倒计时的结束时间,然后把结束时间跟当前时间转换成时间戳,结束时间减去当前时间再除以1000(因为时间戳是毫秒级)就是该结束时间距离当前时间的秒数了,然后根据公式计算出时分秒,最后使用定时器每秒跑一次就实现成功啦~
两种倒计时思路差不多,多个倒计时多了遍历数组步骤,遍历拿到数组中每个对象结束时间来计算时间

好啦!说完思路先上效果图看看

微信小程序实现单个或多个倒计时功能

单个倒计时

上代码,上代码!!!重点来啦

wxml:

// 单个倒计时-----wxml
<view class="countdown">
 <view class="item">
 倒计时:
 <view class="txt-time">{{txtTime.hou}}</view>:
 <view class="txt-time">{{txtTime.min}}</view>:
 <view class="txt-time">{{txtTime.sec}}</view>
 </view>
</view>

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
<view class="countdown">
 <block wx:for="{{timeList}}" wx:key="index">
 <view class="item">
 {{item.title}}:
 <view class="txt-time">{{item.time.hou}}</view>:
 <view class="txt-time">{{item.time.min}}</view>:
 <view class="txt-time">{{item.time.sec}}</view>
 </view>
 </block>
</view>

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

好了,看到这里单个或者多个倒计时显示功能就实现成功啦,具体样式可以根据自己需求修改即可。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 #Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 #Javascript
uni-app使用countdown插件实现倒计时
Nov 01 #Javascript
uni-app实现获取验证码倒计时功能
Nov 01 #Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 #Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 #Javascript
微信小程序实现星星评分效果
Nov 01 #Javascript
You might like
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
ES6基础之默认参数值
2019/02/21 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python实现的rsa加密算法详解
2018/01/24 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
如何基于python实现不邻接植花
2020/05/01 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
params有什么用
2016/03/01 面试题
函授毕业生的自我鉴定
2013/11/26 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
教师师德师风整改措施
2014/10/24 职场文书
大学生在校表现评语
2014/12/31 职场文书
大学辅导员述职报告
2015/01/10 职场文书
奔腾年代观后感
2015/06/09 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
八年级作文之感恩
2019/11/22 职场文书
Python 多线程处理任务实例
2021/11/07 Python