专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2020-09-27 作者:黄珊
微信小程序拼团倒计时的实现,一般我们说的显示秒杀都是指的单条数据,下面为大家整理微信小程序拼团倒计时的源码例子。
wxml文件放个text
在js文件中调用
function countdown(that) { var second = that.data.second if (second == 0) { // console.log("Time Out..."); that.setData({ second: "Time Out..." }); return ; } var time = setTimeout(function(){ that.setData({ second: second - 1 }); countdown(that); } ,1000)}Page({ data: { second: 3 }, onLoad: function() { countdown(this); }});
运行验证下,从10走到1s,然后显示时间到。
于是继续将毫秒完善,注意毫秒的步长受限于系统的时间频率,于是我们精确到0.01s即10ms
js
/* 秒级倒计时 /function countdown(that) { var second = that.data.second if (second == 0) { that.setData({ second: "Time out!", micro_second: "micro_second too." }); clearTimeout(micro_timer); return ; } var timer = setTimeout(function(){ that.setData({ second: second - 1 }); countdown(that); } ,1000)}/ 毫秒级倒计时 */// 初始毫秒数,同时用作归零var micro_second_init = 100;// 当前毫秒数var micro_second_current = micro_second_init;// 毫秒计时器var micro_timer;function countdown4micro(that) { if (micro_second_current <= 0) { micro_second_current = micro_second_init; } micro_timer = setTimeout(function(){ that.setData({ micro_second: micro_second_current - 1 }); micro_second_current--; countdown4micro(that); } ,10)}Page({ data: { second: 2, micro_second: micro_second_init }, onLoad: function() { countdown(this); countdown4micro(this); }});
wxml文件
如此,当秒级运行完毕时,毫秒级timer即clearTimeout,并将字本显示为'micro_second too'
再添加一个countdown4micro方法,使得显示剩余 0:3:19 89这样形式的倒数
function dateformat(second) { var dateStr = ""; var hr = Math.floor(second / 3600); var min = Math.floor((second - hr * 3600) / 60); var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60; dateStr = hr + ":" + min + ":" + sec; return dateStr;}
目前有2个时钟,影响性能,合并下去掉countdown,于是countdown4micro变成以下的样子:
function countdown4micro(that) { var loop_second = Math.floor(loop_index / 100); // 得知经历了1s if (cost_micro_second != loop_second) { // 赋予新值 cost_micro_second = loop_second; // 总秒数减1 total_second--; } // 每隔一秒,显示值减1; 渲染倒计时时钟 that.setData({ clock:dateformat(total_second - 1) }); if (total_second == 0) { that.setData({ // micro_second: "", clock:"时间到" }); clearTimeout(micro_timer); return ; } if (micro_second_current <= 0) { micro_second_current = micro_second_init; } micro_timer = setTimeout(function(){ that.setData({ micro_second: micro_second_current - 1 }); micro_second_current--; // 放在最后++,不然时钟停止时还有10毫秒剩余 loop_index ++; countdown4micro(that); } ,10)}
如此这般,毫秒与时分秒是分别运行渲染的,再次改造,程序可读性更好。dateformat针对于毫秒操作,而不接受秒为数。同时还省却了计算100次为1s的运算
/** * 需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒 * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX * 2.提供一个时钟,每10ms运行一次,渲染时钟,再总ms数自减10 * 3.剩余的秒次为零时,return,给出tips提示说,已经截止 /// 定义一个总毫秒数,以一分钟为例。TODO,传入一个时间点,转换成总毫秒数var total_micro_second = 2 * 1000;/ 毫秒级倒计时 */function countdown(that) { // 渲染倒计时时钟 that.setData({ clock:dateformat(total_micro_second) }); if (total_micro_second <= 0) { that.setData({ clock:"已经截止" }); // timeout则跳出递归 return ; } setTimeout(function(){ // 放在最后-- total_micro_second -= 10; countdown(that); } ,10)}// 时间格式化输出,如3:25:19 86。每10ms都会调用一次function dateformat(micro_second) { // 秒数 var second = Math.floor(micro_second / 1000); // 小时位 var hr = Math.floor(second / 3600); // 分钟位 var min = Math.floor((second - hr * 3600) / 60); // 秒位 var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60; // 毫秒位,保留2位 var micro_sec = Math.floor((micro_second % 1000) / 10); return hr + ":" + min + ":" + sec + " " + micro_sec;}Page({ data: { clock: '' }, onLoad: function() { countdown(this); }});
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。
更多小程序开发案例,尽在:http://www.hishop.com.cn/xiaocx/kaifa.html
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
新零售模式的发展,传统酒水行业通过开创体验式的经营模式,来提升顾客的个性化服务,已经成为实现酒类行业的热门趋势...
现阶段美容行业的运营很不规范,虽然经过一轮一轮的实践之后,有很多美容店已经了解到信息化管理系统的重要性,但在实...
2024年怎样开加盟连锁店第七步(建立品牌知名度) 建立品牌知名度是成功创建一个加盟连锁品牌的关键步骤。一个强大的品...
2024年怎样开加盟连锁店第三步(开发一个详细的加盟手册) 加盟手册的重要性 加盟手册是加盟连锁品牌成功的基础组成部分...
在零售行业,线上线下一体化营销已经成为企业提升竞争力的关键策略。根据9的分析,2024年中国零售行业的数字化转型正在...
在数字化转型的浪潮中,线上线下推广方案已成为零售企业连接顾客、提升销售的关键策略。友数连锁,作为HiShop推出的新零...