博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序 倒计时
阅读量:4085 次
发布时间:2019-05-25

本文共 1963 字,大约阅读时间需要 6 分钟。

项目需要做倒计时. 
黄大哥的轮子.拿来用用.表示很顺手. 
倒计时

代码: 
1.index.wxml

{
{
clock}} {
{
micro_second}}
1
2
3
1
2
3

2.index.js 
注释很清楚了.不多说.

/**  * 需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒 * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX * 2.提供一个时钟,每10ms运行一次,渲染时钟,再总ms数自减10 * 3.剩余的秒次为零时,return,给出tips提示说,已经截止 */// 定义一个总毫秒数,以一分钟为例。TODO,传入一个时间点,转换成总毫秒数var total_micro_second = 36 * 60 * 60 * 1000;/* 毫秒级倒计时 */function count_down(that) {
// 渲染倒计时时钟 that.setData({ clock: date_format(total_micro_second) }); if (total_micro_second <= 0) { that.setData({ clock: "已经截止" }); // timeout则跳出递归 return; } setTimeout(function () {
// 放在最后-- total_micro_second -= 10; count_down(that); }, 10)}// 时间格式化输出,如03:25:19 86。每10ms都会调用一次function date_format(micro_second) {
// 秒数 var second = Math.floor(micro_second / 1000); // 小时位 var hr = Math.floor(second / 3600); // 分钟位 var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60)); // 秒位 var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60; // 毫秒位,保留2位 var micro_sec = fill_zero_prefix(Math.floor((micro_second % 1000) / 10)); return hr + ":" + min + ":" + sec + " " + micro_sec;}// 位数不足补零function fill_zero_prefix(num) {
return num < 10 ? "0" + num : num}Page({ data: { clock: '' }, onLoad: function () {
count_down(this); }});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

 

你可能感兴趣的文章
ubuntu 12.04 安装 GMA3650驱动
查看>>
新版本的linux如何生成xorg.conf
查看>>
xorg.conf的编写
查看>>
启用SELinux时遇到的问题
查看>>
virbr0 虚拟网卡卸载方法
查看>>
No devices detected. Fatal server error: no screens found
查看>>
新版本的linux如何生成xorg.conf
查看>>
virbr0 虚拟网卡卸载方法
查看>>
Centos 6.0_x86-64 终于成功安装官方显卡驱动
查看>>
Linux基础教程:CentOS卸载KDE桌面
查看>>
db sql montior
查看>>
read humor_campus
查看>>
IBM WebSphere Commerce Analyzer
查看>>
my read work
查看>>
db db2 base / instance database tablespace container
查看>>
hd disk / disk raid / disk io / iops / iostat / iowait / iotop / iometer
查看>>
project ASP.NET
查看>>
db db2_monitorTool IBM Rational Performace Tester
查看>>
OS + Unix Aix telnet
查看>>
IBM Lotus
查看>>