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


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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
js中时间格式化的几种方法
Jul 22 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 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
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP解决中文乱码
2017/04/28 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
Python中的super用法详解
2015/05/28 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
浅析Git版本控制器使用
2017/12/10 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python em算法的实现
2020/10/03 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
工程负责人任命书
2014/06/06 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
小学假期安全广播稿
2014/09/28 职场文书
公务员政审材料范文
2014/12/23 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python