微信图文中怎么做倒计时？

Posted 2023-03-18

时间要智能

1、首先第一步要直接使用setInterval即可，但是在微信小程序中，我们需要用微信小程序的语法，这时就会遇到一个难题，那就是怎么关闭定时器的问题，下面给出实例。WXML代码。

2、接着就是下面是js实现代码// indes.js需要一个目标日期，初始化时，然后就是先得出到当前时间还有剩余多少秒将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX提供一个时钟，这时候每10ms运行一次，渲染时钟，再总ms数自减10剩余的秒次为零时，return。

3、每10ms都会调用一次function dateformat(micro_second) // 总秒 var second = Math.floor(micro_second / 1000);//var day = Math.floor(second / 3600/24)。

4、最后就用毫秒的步长受限于系统的时间频率，于是我们精确到0.01s即10ms// 时间格式化输出，如1天天23时时12分分12秒秒12 ，微信图文中做倒计时就成功了。

参考技术A

微信图文中做倒计时的具体步骤哦如下：

1、先观察一下最终效果，即做出来的微信倒计时的最终效果。

2、用Photoshop软件，做一张宽高为750*1208像素的图片，用于做引导页。

3、登录云直播管理平台，新创建一个直播频道，例如"html5课堂",设定这个直播频道的一些基本信息。

4、开启引导页，并上传上面用PS做好的引导页图片。

5、开启倒计时功能，并对应填入倒计时提示语句，以及直播时间。

6、再用微信打开你这个直播页面（或扫二维码打开），观看你这个直播，就会显示你做好的引导页图，并且下方会离直播开始的显示倒计时。

这样就解决了“微信图文中做倒计时”的问题。

参考技术B

使用三方的微信图文工具就行了！

到网上搜索一下微信图文编辑工具，在很多在线的，里面有倒计时功能，然后复制到你的公众号的素材编辑里面。

微信

微信，是腾讯公司于2011年1月21日推出的一款通讯产品，可以通过网络快速发送免费语音短信、视频、图片和文字，支持单人、多人参与。同时，也支持使用社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务。

2016年3月1日起，微信支付对转账功能停止收取手续费。同日起，对提现功能开始收取手续费；同年8月，微信获香港首批支付牌照。调查显示，微信在中国大陆的市场渗透率达93%，截至2017年5月，微信于全球拥有超过约9.38亿活跃用户。

图文详解-如何用Axure做一个倒计时功能按钮

本篇主要给大家讲一下如何用Axure巧妙简单的实现一个倒计时功能。

demo地址： http://pan.baidu.com/s/1jI4IRzC 密码: 8ghd

需要更详细学习的同学可以看下面文章。偷懒的同学可以直接在demo里复制出想要的部分即可使用了。

1、把主要元素进行排版设计；

这里每个人有每个人的习惯，没有一个标准，只是将主要元素进行组织后加以排版。大家发现并没有获取验证码按钮，这是我们的关键。下一步开始进行添加

2、添加一个Dynamic Panel(动态面板)命名为getCode到验证码输入框后面的位置。并为这个验证码设置三个states分别为get，wait，again代表按钮三个状态：获取验证码，等待，重新获取。如图

3、编辑getCode面板的get和again状态里的元素，为起添加一个按钮，内容分别为：“获取验证码”、“重新获取”，这两个按钮分别命名为getButton，againButton；

4、为getCode面板的wait添加一个Rectangle并设置背景为灰色，文字填充为“秒”，然后添加一个textfield。设置name为seconds，文字颜色为白色，背景色与与rectangle一样为灰色。如图

5、为getCode的Dynamic Panel的get状态下的按钮添加事件，如图

先将state设置为wait状态，等待一秒钟后，将wait状态里的seconds的text设置为59；

6、设置getCodeDynamic Panel里的wait状态下的seconds，为其添加onTextChange的第一个case1，先等待1秒钟，然后进行递减设置。如图：

点击进入编辑Function界面

先进行本地化变量设置，second为当前text的值

为seconds设置function。上图，将second变量引入进来。

编辑Function为secon-1.如上图。

7、因为只有当second大于0时进行倒计时。因此我们需要再为上述的case1添加一个条件约束，如图

8、为seconds添加一个当倒计时完成后的case，如下图

9、为getCode的Dynamic的“重新获取”按钮添加事件，如图：

完成上述操作后，试运行一下吧。一个简单的倒计时功能就完成了。网上也有其他的实现方式。但是我更新换这种做法，因为可复制性更强一些，需要用到此功能的地方。只需要将这个动态面板直接复制或者生成组件即可了。

demo地址： http://pan.baidu.com/s/1jI4IRzC 密码: 8ghd