微信小程序实现简单倒计时功能

任务描述：

计时器

任务要求：

案例描述：设计一个实现倒计时功能的小程序，小程序运行后，首先显示空白界面，过2秒后才显示计时界面，点击“开始计时”按钮后开始倒计时，点击“停止计时”按钮后停止计时。

实现效果：根据案例描述做出如下图效果，初始显示空白界面，2秒后显示计时界面（图1），数字为60，点击“开始计时”按钮后开始倒计时，点击“停止计时”按钮后停止计时（图2）。

index.wxml

<!--index.wxml-->
<view class="container"><view wx:if="{{hidden}}"><view class="title"> 计时器</view><view class="play"> {{num}}</view><view class="btn"><button bindtap="start"> 开始计时</button><button bindtap="stop">停止计时</button></view></view>
</view>

index.js

// index.js
// 获取应用实例
var num = 60;//定义开始秒数
//定义一个布尔变量，用于停止计时器
var ynStop=false;
Page({data: {//用于显示计算器hidden: false,num: num},//渲染出计时器onLoad() {//function里直接用this会出错var that =this//延时显示函数setTimeout(function(){//设置隐藏属性为否that.setData({hidden:true})}//设置延时为2s, 2000);},start: function () { //开始计时函数//设置显示器值为当前值减一this.setData({num: num--})//调用timer函数this.timer()//后台打印num值console.log(num)},stop: function () {  //停止函数//将是否停止循环值定义为真ynStop=true;console.log(ynStop)},timer: function () { //计时函数if (num > 0&&ynStop==false) {//隔一秒回调start函数，注意setTimeout里函数不要加括号，或者用function（）{}setTimeout(this.start, 1000);} else {this.setData({num: 0})}}
})

微信小程序实现简单倒计时功能相关推荐

微信小程序实现简单定位功能
微信小程序实现简单定位功能,简单易读,获取经纬度信息在pages下创建一个单页如local local.js如下 var app = getApp() Page({ data:{latitude:' ...
如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...
借鉴华为HiLink实现微信小程序智能配网功能
借鉴华为HiLink实现微信小程序智能配网功能微信小程序介绍微信公众号智能配网 Smartconfig实现原理 Smartconfig技术的弊端 AP配网技术的出现微信小程序智能配网模块端设置 ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序实现换肤功能
参考链接: (1)微信小程序实现换肤功能 https://www.jb51.net/article/136445.htm (2)微信小程序实现换肤功能 https://blog.csdn.net/qq ...
微信小程序的简单介绍
微信小程序的简单介绍 1.与HTML的区别 HTML 微信小程序 <div></div> <view></view> <h1></h1 ...
低成本免服务器微信小程序源码多功能集合搭建
现如今在线副业已经成为一种趋势,越来越多的人选择副业作为起步.小程序凭借不占内存.无论前期投入还是后期维护,成本都较低:如果你想副业来赚钱,选择小程序是非常不错的选择,有很多人可能会问,我不会做小程序 ...
微信小程序：好玩多功能实用工具箱
看标题你们猜得不错,这就是一款由多个功能组合的一款小程序源码功能可以说有好玩的,也有实用的,非常的不错 UI也是特别的简单,让人看起来很舒服,也是特别的赞! 功能列表有: 测量尺子随机抽取图片 ...
小程序服务器换肤,微信小程序实现换肤功能
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...
微信小程序摄像头监控_微信小程序拍照和摄像功能实现方法示例
本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件 ...

微信小程序实现简单倒计时功能

微信小程序实现简单倒计时功能相关推荐

最新文章

热门文章

微信小程序 实现简单倒计时功能

微信小程序 实现简单倒计时功能相关推荐

最新文章

热门文章

微信小程序实现简单倒计时功能

微信小程序实现简单倒计时功能相关推荐