微信小程序展示倒计时

html
 

  <view class="countdown">  
    <text>倒计时:</text>  
    <text wx:for="{{countdown}}" wx:key="index">{{item}}</text>  
  </view>

ts
 

 data: {
    countdown: [], // 存放倒计时数组  
    targetTime: '', // 目标时间戳  
    intervalId: null, // 定时器ID 
}
startCountdown () {  
  const that = this;  
  // 每秒更新一次倒计时  
  this.data.intervalId = setInterval(function () {  
    const now = new Date().getTime();  
    const diff = that.data.targetTime - now;  
      
    if (diff <= 0) {  
      // 倒计时结束,清除定时器  
      clearInterval(that.data.intervalId);  
      that.setData({  
        countdown: ['倒计时结束'],  
      });  
    } else {  
      // 计算剩余的天、时、分、秒  
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));  
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));  
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));  
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);  
        
      that.setData({  
        countdown: [days, '天', hours, '时', minutes, '分', seconds, '秒'],  
      });  
    }  
  }, 1000);     
  },
  onLoad: function (options) {   
  this.setData({  
    targetTime: new Date('2024-04-28 16:53:10').getTime(),  
  });  
  this.startCountdown();  


}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/551825.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【个人博客搭建】(8)全局异常处理

1、net 8 webapi 全局异常处理: 在 .NET 8 WebAPI 中&#xff0c;全局异常处理可以通过实现**IExceptionHandler接口或使用IAsyncExceptionFilter接口来完成**。 首先&#xff0c;关于IExceptionHandler接口&#xff0c;它是ASP.NET Core中用于全局异常处理的新抽象。这个接口有…

从小到大输出四个整数(C语言)

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int a, b, c, d;int t 0;//提示用户&#xff1b;printf("请输入四个整数a b c d&…

C语言趣味代码(一)

C语言相关知识点的博客和大家分享完了&#xff0c;接下来我想开始数据结构相关的博客&#xff0c;在此之前呢&#xff0c;有的小伙伴问过我学完C语言的相关知识&#xff0c;我能干些什么呢&#xff1f;只有刷题吗&#xff1f;这不禁让我反思&#xff1a;在我们学习的过程中&…

【RSGIS数据资源】2001-2022年中国玉米种植分布数据集

文章目录 数据介绍精彩截图2001&#xff5e;2020年中国玉米种植频率分布2001年至2020年研究区域融合数据的平均填充百分比。 数据介绍 2001-2022年中国玉米种植分布数据集&#xff08;CCD-Maize&#xff09;&#xff0c;涵盖中国22个省、市的玉米种植分布图&#xff0c;文件格…

一文搞定 EventLoop、宏任务、微任务

面试官&#xff1a;你了解JavaScript事件循环吗&#xff0c;掌握多少&#xff0c;把你知道的都说一下。 今天我们就来说一下&#xff0c;JavaScript作为一门单线程语言&#xff0c;如何通过事件循环&#xff08;Event Loop&#xff09;和任务队列&#xff08;Task Queue&#…

CTFHUB-技能树-Web前置技能-文件上传(无验证,JS前端验证,前端验证)

CTFHUB-技能树-Web前置技能-文件上传&#xff08;无验证&#xff0c;JS前端验证&#xff0c;前端验证—.htaccess&#xff09; 文章目录 CTFHUB-技能树-Web前置技能-文件上传&#xff08;无验证&#xff0c;JS前端验证&#xff0c;前端验证—.htaccess&#xff09;文件上传无验…

关联规则挖掘(二)

目录 三、FP-增长算法&#xff08;一&#xff09;算法的背景&#xff08;二&#xff09;构造FP-树&#xff08;三&#xff09;生成频繁项集 四、关联规则的评价&#xff08;一&#xff09;支持度和置信度的不足&#xff08;二&#xff09;相关性分析 三、FP-增长算法 &#xf…

C++内存管理——new/delete、operator new/operator delete

内存管理 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int* ptr1 (int*)malloc(sizeof(int) * 4);int* pt…

tcp三次握手和四次断开以及tcpdump的基本使用

前言 最近工作中会发现有超时的问题&#xff0c;还有就是在面试的时候很多都要求深入理解TCP/IP协议。突然感觉TCP/IP协议是一个既熟悉&#xff0c;又陌生的技术。又想到上大学的时候&#xff0c;老师说过 网络的圣经&#xff1a;“TCP/IP详解” 卷一 卷二 卷三&#xff0c;三…

IIC总线读取温度湿度传感器数据实验

iic.c #include "iic.h"extern void printf(const char* fmt, ...); /** 函数名 &#xff1a; delay_us* 函数功能&#xff1a;延时函数* 函数参数&#xff1a;无* 函数返回值&#xff1a;无* */ void delay_us(void) //微秒级延时 {unsigned int i 2000;while(i-…

性能工具之emqtt-bench BenchMark 测试示例

文章目录 一、前言二、典型压测场景三、机器准备四、典型压测场景1、并发连接2、消息吞吐量测试2.1 1 对 1&#xff08;示例&#xff09;2.2 多对1&#xff08;示例&#xff09;2.3 1对多&#xff08;示例&#xff09; 五、遇到的问题client(): EXIT for {shutdown,eaddrnotava…

java学习之路-多态

文章目录 目录 文章目录 前言 1.多态 1.1 多态的概念 1.2 多态实现条件&#xff08;重点&#xff09; 多态实现的栗子 1.3重写 重写的规则 重写和重载的区别 1.4静态和动态绑定 1.5向上转型和向下转型 1.向上转型 2.向下转型 1.6多态的优点 前言 本文内容&#xff1a;多…

DHCP是什么意思 路由器中DHCP服务器怎么设置?

概述 DHCP是什么意思&#xff1f;很多朋友在路由器设置中&#xff0c;都会看到有一项“DHCP服务器”设置功能&#xff0c;而很多朋友对这个功能不太了解&#xff0c;也不知道怎么设置。其实&#xff0c;对于普通用户来说&#xff0c;无需去单独设置路由器DHCP服务器功能&#…

李沐46_语义分割和数据集——自学笔记

语义分割 语义分割将图片中的每个像素分类到对应的类别。 实例分割&#xff08;目标检测的进化版本&#xff09; 如果有物体&#xff0c;会区别同一类的不同物体。 语义分割重要数据集&#xff1a;Pascal VOC2012 %matplotlib inline import os import torch import torch…

【强化学习的数学原理-赵世钰】课程笔记(九)策略梯度方法(Policy Gradient Method)

目录 一.policy gradient 的基本思路&#xff08;Basic idea of policy gradient&#xff09; 二.定义最优策略的 metrics&#xff0c;也就是 objective function 是什么 三.objective function 的 gradient 四.梯度上升算法&#xff08;REINFORCE&#xff09; 五.总结 上…

DevExpress WinForms中文教程 - 如何通过UI测试自动化增强应用可靠性?(二)

DevExpress WinForm拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForm能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜任…

数字工厂管理系统与MES系统有什么区别

随着工业4.0时代的到来&#xff0c;数字化转型已经成为制造企业发展的必然趋势。在这个过程中&#xff0c;数字工厂管理系统和MES管理系统都扮演者至关重要的角色。然而&#xff0c;尽管两者都致力于优化生产流程和提高生产效率&#xff0c;但它们在实际应用、功能定位和系统架…

Datapump数据迁移方案

环境准备 确认源数据库和目标数据库的版本 确保源数据库和目标数据库的Oracle版本兼容&#xff0c;以保证Datapump工具能够正常工作。 硬件资源检查 确认源数据库和目标数据库服务器的硬件资源&#xff08;如CPU、内存、存储空间&#xff09;能够满足数据迁移的需求。 网络连…

基于STM32的智能垃圾分类识别系统设计(论文)_kaic

摘 要 智能垃圾分类技术逐渐受到了政府的重视和支持&#xff0c;越来越多的城市开始推行垃圾分类政策。因此设计一款能够对垃圾进行识别并分类的控制系统具有一定的现实意义。本设计采用STM32单片机作为整个系统的控制核心&#xff0c;利用K210开发板作为图像识别控制系统&…

在Postgres中,如何有效地管理大型数据库的大小和增长

文章目录 一、定期清理和维护1. VACUUM和ANALYZE2. 删除旧数据和归档 二、分区表三、压缩数据四、配置优化1. 调整维护工作负载2. 监控和日志 五、使用外部存储和扩展1. 外部表和FDW2. 扩展和插件 六、定期备份和恢复测试结论 管理大型数据库的大小和增长是数据库管理员&#x…
最新文章