微信小程序如何实现计时器开始和结束功能

3403771864 发布于2022-12-04 11:50 / 712人阅读

　　本篇文章主要为大家介绍微信小程序实现计时器开始和结束整个演示代码过程：

　　1、首先，我们先看看微信小程序计时功能，点击开始计时

　　2、wxml

　　<view class='tip'>计时器{{h}}:{{m}}:{{s}}</view>
　　<button class='but bg-blue on' bindtap="taskStart">任务开始</button>
　　<button class='but bg-blue on' bindtap="taskEnd">任务结束</button>

　　data:{
　　h:'00',
　　m:'00',
　　s:'00',
　　//存储计时器
　　setInter:'',
　　num:1,
　　},
　　/**
　　* 生命周期函数--监听页面加载
　　*/
　　onLoad: function (options) {
　　// this.queryTime()
　　},
　　// 计时器
　　queryTime(){
　　const that=this;
　　var hou=that.data.h
　　var min=that.data.m
　　var sec=that.data.s
　　that.data.setInter = setInterval(function(){
　　sec++
　　if(sec>=60){
　　sec=0
　　min++
　　if(min>=60){
　　min=0
　　hou++
　　that.setData({
　　h:(hou<10?'0'+min:min)
　　})
　　}else{
　　that.setData({
　　m:(min<10?'0'+min:min)
　　})
　　}
　　}else{
　　that.setData({
　　s:(sec<10?'0'+sec:sec)
　　})
　　}
　　var numVal = that.data.num + 1;
　　that.setData({ num: numVal });
　　console.log('setInterval==' + that.data.num);
　　},1000)
　　},
　　taskStart(){
　　this.queryTime()
　　},
　　taskEnd(){
　　//清除计时器 即清除setInter
　　clearInterval(that.data.setInter)
　　},
　　onUnload: function () {
　　var that =this;
　　//清除计时器 即清除setInter
　　clearInterval(that.data.setInter)
　　},

　　本篇内容已全部讲述完毕，欢迎大家继续关注。

云服务器 GPU云服务器微信小程序功能微信小程序的功能微信小程序有什么功能微信小程序技术实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128399.html

指尖一点歌声来--微信小程序之仿网易云音乐心得

摘要：为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。查文档发现，小程序中图片加载完成后，有一个加载完成事件。前者在微信客户端版本就不开始维护了，后者低版本需做兼容处理。目前还有一些功能暂未实现，会在以后继续完善项目，继续学习。为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。期间踩过了大把的坑，bug出现的难受和解决bug欢喜，一直是伴随我阶段性学习这个项目的心情。初步完成...

KitorinZero 2019-08-22 11:18 评论0 收藏0
基于微信小程序的投票系统开发经验分享

摘要：由于最近在帮学校做开发一个基于微信小程序的投票系统项目，开发时也遇到很多坑，有一些心得，所以想分享给大家，一起讨论和进步。用户进入微信小程序后不需登录即可直接投票。 ** 一、前言 **第一次在社区发文章，作为一个大学未毕业的前端菜鸟，自己平常也经常逛各种技术社区，今天终于要发表自己的处女文章了，还是有点小激动的。由于最近在帮学校做开发一个基于微信小程序的投票系统项目，开发时也遇到很多...

learn_shifeng 2019-08-02 11:40 评论0 收藏0
基于微信小程序的投票系统开发经验分享

摘要：由于最近在帮学校做开发一个基于微信小程序的投票系统项目，开发时也遇到很多坑，有一些心得，所以想分享给大家，一起讨论和进步。用户进入微信小程序后不需登录即可直接投票。 ** 一、前言 **第一次在社区发文章，作为一个大学未毕业的前端菜鸟，自己平常也经常逛各种技术社区，今天终于要发表自己的处女文章了，还是有点小激动的。由于最近在帮学校做开发一个基于微信小程序的投票系统项目，开发时也遇到很多...

leonardofed 2019-08-23 12:17 评论0 收藏0
记一次微信小程序在安卓的白屏问题

摘要：在做小程序的时候，做到了一个限时商品售卖，用到了倒计时，因为这个原因导致了安卓手机上使用小程序时，将小程序放入后台运行一段时间后，再次进入小程序后出现了页面白屏或者点击事件失效的情况，这里记录下相关代码文件我这里是使用了自定义组件的形式来渲在做小程序的时候，做到了一个限时商品售卖，用到了倒计时，因为这个原因导致了安卓手机上使用小程序时，将小程序放入后台运行一段时间后，再次进入小程序后...

Hydrogen 2019-08-23 14:13 评论0 收藏0