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


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 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
JQuery基础语法小结
Feb 27 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
Vue实现简单的留言板
Oct 23 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
python的unittest测试类代码实例
2017/12/07 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
详解Python_shutil模块
2019/03/15 Python
django数据库自动重连的方法实例
2019/07/21 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
基于python实现操作git过程代码解析
2020/07/27 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
数据库连接池的工作原理
2012/09/26 面试题
学习计划书怎么写
2014/09/15 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
Python OpenCV实现图形检测示例详解
2022/04/08 Python