• 小程序制作(超详解!!!)第十四节 计时器


    1.案例描述

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

    2.index.wxml

    1. <view class="box" hidden="{{hidden}}">
    2. <view class="title">计数器view>
    3. <view class="time">{{num}}view>
    4. <view class="btnLayout">
    5. <button bindtap="start">开始计时button>
    6. <button bindtap="stop">停止计时button>
    7. view>
    8. view>

    3.index.wxss

    1. .time{
    2. width:90%;/*宽度*/
    3. line-height: 200px;/*设置高度并使文字垂直居中*/
    4. background-color: yellow;
    5. color: red;/*文字颜色*/
    6. font-size: 100px;
    7. text-align: center;
    8. border: 1px solid silver;/*边框*/
    9. border-radius: 30px;/*边框半径(圆角)*/
    10. margin: 15px;
    11. }
    12. .btnLayout{
    13. display: flex;
    14. flex-direction: row;/*水平方向*/
    15. }
    16. button{
    17. width: 45%;/*按钮宽度*/
    18. }

    4.index.js

    1. var num=60;//计时器显示的数字
    2. var timerID;//计时器的ID
    3. Page({
    4. data:{
    5. hidden:true,//小程序运行时不显示计时界面
    6. num:num//将全局变量赋值给绑定变量
    7. },
    8. onLoad:function(options){
    9. var that=this;
    10. setTimeout(()=>{//回调函数
    11. that.onShow()//2秒后调用函数
    12. },2000)//2秒后显示计时界面
    13. },
    14. show:function(){//显示计时界面函数
    15. var that=this;
    16. that.setData({
    17. hidden:false//显示计时界面
    18. })
    19. },
    20. start:function(){//开始计时函数
    21. var that=this;
    22. timerID=setInterval(()=>{
    23. that.timer()
    24. },1000)
    25. },
    26. stop:function(){//停止计时函数
    27. clearInterval(timerID)//清除计时器
    28. },
    29. timer:function(){//计时函数
    30. var that=thia;
    31. console.log(num)
    32. if(num>0){
    33. that.setData({
    34. num:num--//每次减一
    35. })
    36. }else{
    37. that.setData({
    38. num:0
    39. })
    40. }
    41. console.log(num)
    42. }
    43. })

    5.总结

    1)setTimeout()

    函数number setTimeout(function callback,number delay, any rest)。

    设定一个计时器在计时到期以后执行注册的回调函数。

    2)setInterval()

    函数number setInterval(function callback, number delay,any rest)。

    设定一个计时器,按照指定的周期 (以毫秒计) 来执行注册的回调函数。

    3)clearTimeout()

    函数clearTimeout(number timeoutID)

    取消由setTimeout 设置的计时器。参数 timeoutID为要取消的计时器的 ID

    4)clearInterval()

    函数clearInterval(number intervalID)。

    取消由 setInterval 设置的计时器。参数 intervalID为要取消的计时器的ID

  • 相关阅读:
    大数据:Hive简介及核心概念
    【JUC】ThreadLocal
    博客摘录「 MPLS/LDP原理介绍+报文分析+配置示例」2023年9月26日
    springboot+高校学生实习档案管理 毕业设计-附源码221508
    Python爬虫(入门版)
    【第46篇】RepVGG :让卷积再次伟大
    JS中什么是回调函数?
    【毕业设计】深度学习行人车辆流量计数系统 - 目标检测 python
    MySQL - Explain详解
    [附源码]计算机毕业设计springboot病房管理系统
  • 原文地址:https://blog.csdn.net/2201_76115387/article/details/134264358