微信小程序如何實現(xiàn)計時器開始和結(jié)束功能

3403771864 發(fā)布于2022-12-04 11:50 / 754人閱讀

　　本篇文章主要為大家介紹微信小程序?qū)崿F(xiàn)計時器開始和結(jié)束整個演示代碼過程：

　　1、首先，我們先看看微信小程序計時功能，點擊開始計時

　　2、wxml

　　<view class='tip'>計時器{{h}}:{{m}}:{{s}}</view>
　　<button class='but bg-blue on' bindtap="taskStart">任務(wù)開始</button>
　　<button class='but bg-blue on' bindtap="taskEnd">任務(wù)結(jié)束</button>

　　data:{
　　h:'00',
　　m:'00',
　　s:'00',
　　//存儲計時器
　　setInter:'',
　　num:1,
　　},
　　/**
　　* 生命周期函數(shù)--監(jiān)聽頁面加載
　　*/
　　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)
　　},

　　本篇內(nèi)容已全部講述完畢，歡迎大家繼續(xù)關(guān)注。

云服務(wù)器 GPU云服務(wù)器微信小程序功能微信小程序的功能微信小程序有什么功能微信小程序技術(shù)實現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/128399.html

相關(guān)文章

指尖一點歌聲來--微信小程序之仿網(wǎng)易云音樂心得

摘要：為了提高自己，最近在學(xué)習(xí)微信小程序，選題是仿網(wǎng)易云音樂。查文檔發(fā)現(xiàn)，小程序中圖片加載完成后，有一個加載完成事件。前者在微信客戶端版本就不開始維護(hù)了，后者低版本需做兼容處理。目前還有一些功能暫未實現(xiàn)，會在以后繼續(xù)完善項目，繼續(xù)學(xué)習(xí)。為了提高自己，最近在學(xué)習(xí)微信小程序，選題是仿網(wǎng)易云音樂。期間踩過了大把的坑，bug出現(xiàn)的難受和解決bug歡喜，一直是伴隨我階段性學(xué)習(xí)這個項目的心情。初步完成...

KitorinZero 2019-08-22 11:18 評論0 收藏0
基于微信小程序的投票系統(tǒng)開發(fā)經(jīng)驗分享

摘要：由于最近在幫學(xué)校做開發(fā)一個基于微信小程序的投票系統(tǒng)項目，開發(fā)時也遇到很多坑，有一些心得，所以想分享給大家，一起討論和進(jìn)步。用戶進(jìn)入微信小程序后不需登錄即可直接投票。 ** 一、前言 **第一次在社區(qū)發(fā)文章，作為一個大學(xué)未畢業(yè)的前端菜鳥，自己平常也經(jīng)常逛各種技術(shù)社區(qū)，今天終于要發(fā)表自己的處女文章了，還是有點小激動的。由于最近在幫學(xué)校做開發(fā)一個基于微信小程序的投票系統(tǒng)項目，開發(fā)時也遇到很多...

learn_shifeng 2019-08-02 11:40 評論0 收藏0
基于微信小程序的投票系統(tǒng)開發(fā)經(jīng)驗分享

摘要：由于最近在幫學(xué)校做開發(fā)一個基于微信小程序的投票系統(tǒng)項目，開發(fā)時也遇到很多坑，有一些心得，所以想分享給大家，一起討論和進(jìn)步。用戶進(jìn)入微信小程序后不需登錄即可直接投票。 ** 一、前言 **第一次在社區(qū)發(fā)文章，作為一個大學(xué)未畢業(yè)的前端菜鳥，自己平常也經(jīng)常逛各種技術(shù)社區(qū)，今天終于要發(fā)表自己的處女文章了，還是有點小激動的。由于最近在幫學(xué)校做開發(fā)一個基于微信小程序的投票系統(tǒng)項目，開發(fā)時也遇到很多...

leonardofed 2019-08-23 12:17 評論0 收藏0
記一次微信小程序在安卓的白屏問題

摘要：在做小程序的時候，做到了一個限時商品售賣，用到了倒計時，因為這個原因?qū)е铝税沧渴謾C(jī)上使用小程序時，將小程序放入后臺運行一段時間后，再次進(jìn)入小程序后出現(xiàn)了頁面白屏或者點擊事件失效的情況，這里記錄下相關(guān)代碼文件我這里是使用了自定義組件的形式來渲在做小程序的時候，做到了一個限時商品售賣，用到了倒計時，因為這個原因?qū)е铝税沧渴謾C(jī)上使用小程序時，將小程序放入后臺運行一段時間后，再次進(jìn)入小程序后...

Hydrogen 2019-08-23 14:13 評論0 收藏0