案例3.5-计时器-开发者社区

【微信小程序】案例3.5 计时器（附功能扩展）

一、案例效果

小程序运行后，首页先显示空白界面，2 秒以后显示计时界面。计时界面包含一个计时数字（初始值为 60）和三个计时按钮：开始计时、停止计时、重新计时。

点击「开始计时」按钮后开始倒计时，数字每秒减 1；
点击「停止计时」按钮后停止计时；
如果当前倒计时的时间还没有到 0，再点击「开始计时」，接着倒计时；
如果已经倒计时到 0，点击「开始计时」或「停止计时」，数字仍然是 0；
点击「重新计时」按钮后从 60 开始重新倒计时。

在基本功能的基础上做了扩展：在时间显示界面上增加了形容时间如流水的背景文字「时光如流水」，用 CSS 伪元素实现。

⚪ 圆形计时显示 时光如流水 ← 背景文字（功能扩展） 60 ← 计时数字 [开始计时] [停止计时] [重新计时]

二、实现步骤

1. 新建项目

打开微信开发者工具，新建一个小程序项目：不使用云服务、不使用模板，直接创建空白项目。

2. 修改 app.json

配置页面路径和窗口样式，并指定使用 webview 渲染引擎：

{"pages":["pages/index/index"],"window":{"navigationBarBackgroundColor":"#ffffff","navigationBarTitleText":"计时器","navigationBarTextStyle":"black"},"renderer":"webview","style":"v2","sitemapLocation":"sitemap.json"}

3. 编写 index.wxml

页面主要由计时显示界面和三个按钮组成。计时显示用wx:if="{{show}}"控制：页面加载时show为false，界面空白；2 秒后show变为true，显示计时界面。三个按钮分别绑定了点击响应函数start、stop、reset。

<viewclass="scrollarea"><viewclass="time"wx:if="{{show}}">{{count}}</view><viewclass="btns"wx:if="{{show}}"><buttonclass="btn start"bindtap="start">开始计时</button><buttonclass="btn stop"bindtap="stop">停止计时</button><buttonclass="btn reset"bindtap="reset">重新计时</button></view></view>

4. 编写 index.wxss

page和.scrollarea的样式是创建项目时自动生成的，其它都是新增的样式。计时数字放在一个圆形白底容器中居中显示，三个按钮用不同颜色区分。

5. 编写 index.js

代码中主要用到了小程序框架的定时器接口：

setTimeout：设定一个定时器，在定时到期以后执行注册的回调函数，只执行一次；
setInterval：设定一个定时器，按照指定的周期（毫秒）执行回调函数；
clearInterval：取消由 setInterval 设置的定时器。

Page({data:{count:60,// 计时数字，初始值为 60show:false// 是否显示计时界面，默认为空白界面},timer:null,// setInterval 定时器编号onLoad:function(){// 首页先显示空白界面，2 秒以后显示计时界面setTimeout(()=>{this.setData({show:true})},2000)},// 开始计时：点击后开始倒计时start:function(){// 已经倒计时到 0，点击“开始计时”，数字仍然为 0if(this.data.count<=0){return}// 已经在计时中，避免重复开启定时器if(this.timer){return}// setInterval：每隔 1 秒执行一次回调this.timer=setInterval(()=>{if(this.data.count>0){this.setData({count:this.data.count-1})}// 倒计时到 0 后停止if(this.data.count===0){clearInterval(this.timer)this.timer=null}},1000)},// 停止计时stop:function(){clearInterval(this.timer)this.timer=null},// 重新计时：从 60 开始重新倒计时reset:function(){clearInterval(this.timer)this.timer=nullthis.setData({count:60})this.start()}})

三、功能扩展：增加形容时间如流水的背景文字

在时间显示界面上增加了背景文字「时光如流水」。实现方法使用了CSS 伪元素：

给宿主元素.time加上相对定位（position: relative;）；
用伪元素.time::before，通过content: "时光如流水"生成文字，并用绝对定位（position: absolute;）把文字放在计时圆形的上方，作为背景装饰。

.time{position:relative;/* 宿主元素相对定位 *//* ……其它样式…… */}.time::before{content:"时光如流水";position:absolute;/* 绝对定位 */top:100rpx;left:0;right:0;text-align:center;font-size:34rpx;color:rgba(150,150,150,0.6);letter-spacing:8rpx;}