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

本文实例为大家分享了微信小程序实现计时器开始和结束的具体代码，供大家参考，具体内容如下

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>

js

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)
 
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现倒计时器自定义时间和暂停

    js实现倒计时器自定义时间和暂停

    js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时 分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释) css html,body{ width:100%;height:100%; } .content{ height:100%;width:100%; } .row-center{ display:flex;flex-direction:row;justify-content:center; align-items:center;

  • 原生js实现秒表计时器功能

    原生js实现秒表计时器功能

    本文实例为大家分享了带有开始.暂停.清除功能的js计时器,供大家参考,具体内容如下 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <script> var hour,minute,second;//时 分 秒 hour=minute=secon

  • javascript 秒表计时器实现代码

    javascript 秒表计时器 实例代码: <html lang="en"> <head> <meta charset="UTF-8"> <title>js计时器</title> </head> <body> <input type="text" value="00:00"> <input type="button

  • JavaScript分秒倒计时器实现方法

    JavaScript分秒倒计时器实现方法

    本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供大家参考.具体分析如下: 一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完成使按钮变成不可点击状态 具体效果如下图,为了说明问题,调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可. 在时间用完之前,按钮还是可以点击的. 时间用完之后,按钮就不能

  • js实现秒表计时器

    js实现秒表计时器

    本文实例为大家分享了js实现秒表计时器的具体代码,供大家参考,具体内容如下 秒表计时器的实现: 效果图如下: 附代码,已调试运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=

  • 易语言制作简单计时器小程序的方法

    易语言制作简单计时器小程序的方法

    简单计时器 易语言制作简单计时器用到以下几个功能: 编辑框 按钮 时钟 变量 如果命令 例程: 说明: 本方法是新手学习易语言制作的软件,深入学习易语言后你将会有更方便的写法 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

  • javascript实现计时器的简单方法

    javascript实现计时器的简单方法

    计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器. 计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面. 那现在我们来完成这个界面 <label>计时:</label> <input type="text" name="" id=&qu

  • javascript设计简单的秒表计时器

    javascript设计简单的秒表计时器

    本文实例讲述了javascript设计简单的秒表计时器的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0&q

  • Node.js中使用计时器定时执行函数详解

    如果你熟悉客户端JavaScript编程,你可能使用过setTimeout和setInterval函数,这两个函数允许延时一段时间再运行函数.比如下面的代码, 一旦被加载到Web页面,1秒后会在页面文档后追加"Hello there": 复制代码 代码如下: var oneSecond = 1000 * 1; // one second = 1000 x 1 ms setTimeout(function() { document.write('<p>Hello there.

  • JS 页面计时器示例代码

    复制代码 代码如下: <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value

随机推荐