微信小程序展示倒计时

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.mzph.cn/web/1332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue项目多语言配置

1. 安装 Vue I18n&#xff1a;首先安装 Vue I18n 库&#xff0c;我这里使用 npm 进行安装&#xff1a; npm install vue-i18n2. 创建语言文件&#xff1a;在你的项目中创建一个文件夹用于存放多语言文件&#xff0c;例如 locales&#xff0c;然后在这个文件夹中创建每种语言的…

【CSAPP/计组】#1 数的存储与表示方法、机器中浮点数加减法详解

文章目录 前言一、定点格式定点整数 二、浮点数的表示方法2.1 浮点数存储2.2 浮点数加减法a. 操作数检查b. 对阶c. 尾数相加与检查溢出d. 结果规格化与溢出处理e.舍入处理 Some tips: 为什么进位/双符号判断法有效的通俗解释&#xff1f;Some tips:符号位拓展 前言 计算机中常…

【归并】Leetcode 排序数组

题目讲解 912. 排序数组 算法讲解 使用归并算法排序数组&#xff0c;我们先在数组中寻找一个mid点&#xff0c;然后把数组分成了两部分&#xff0c;我们先排左部分&#xff0c;排左边部分的时候有需要将当前的子数组分成两部分&#xff0c;继续循环&#xff0c;直到当前子数组…

【结构型模式】装饰器模式

​一、装饰器模式概述 装饰器模式&#xff08;装饰者模式&#xff09;定义&#xff1a;装饰器模式动态地将责任附加到对象上。若要拓展功能&#xff0c;装饰者提供了比继承更有弹性地替代方案。&#xff08;对象结构型模型&#xff09;通俗点来说&#xff1a;动态的给一个对象增…

淘宝购物更智能:taobao.item_search API接口实现关键字精准匹配

随着电子商务的飞速发展&#xff0c;淘宝作为中国最大的网络购物平台之一&#xff0c;为亿万消费者提供了便捷、丰富的购物体验。然而&#xff0c;在海量商品中快速找到符合自己需求的商品&#xff0c;一直是消费者面临的挑战。为了提升购物体验&#xff0c;淘宝开放平台提供了…

【JS】js数字转k、w结尾 | 1000 = 1k

问题 数字转k、w结尾 如&#xff1a;10001k 100001w 码 /*** 数字转k,w* param {Number} num * returns String*/ const numberTokw num > {if (num < 1000) return numlet endStr w,numVal 10000;if (num > 999 && num < 10000) {endStr knumVal …

使用python socket搭建Client测试平台

目录 概述 1 背景 2 Client功能实现 2.1 何谓Client 2.2 代码功能介绍 2.3 代码实现 2.3.1 代码介绍 2.3.2 代码内容 3 测试 3.1 PC上创建Server 3.2 同一台PC上运行Client 3.2.1 建立连接 3.2.2 测试数据交互 3.3 Linux 环境下运行Client 3.3.1 建立连接 3.3.…

ElasticSearch实战之项目搜索高亮

文章目录 1. 前情配置2、数据操作2.1 操作API2.2 数据入库 3. 高亮搜索3.1 方法封装3.2 高亮搜索 1. 前情配置 为满足ElasticSearch可在项目中实现搜索高亮&#xff0c;我们需要先做一些前情配置 导入ElasticSearch依赖 <dependency><groupId>org.springframewor…

Linux网络实战(三)- Samba服务器搭建

Linux网络实战&#xff08;三&#xff09;- Samba服务器搭建 1 安装Samba服务软件编程要求输出输入 2 Samba服务器启动/关闭编程要求输出输入 3 Samba客户端编程要求输出输入 1 安装Samba服务软件 编程要求 本关任务是学会如何在线安装samba软件。 具体编程要求如下&#xf…

两个表归并为有序表

先排序&#xff0c;在逐个比较插入&#xff0c;最坏时间复杂度为表1长度表2长度-1 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> #include<stdlib.h>typedef struct List {int* elem;//存储空间地址int length;//表长 }List;void sortList(List* p, int …

第3章 决策树

决策树经常处理分类问题&#xff0c;近来的调查表明决策树也是经常使用的数据挖掘算法。 决策树的流程图&#xff1a; 长方形代表判断模块(decision block)&#xff0c;椭圆形代表中止模块(terminating block),表示已经得出结论&#xff0c;可以中止运行。 从判断模块引出左右箭…

EPSON晶振应用到汽车电子产品上的型号有哪些?

EPSON品牌应用在汽车电子产品上的晶振.&#xff0c;当然也少不了晶振可能最熟悉的就是32.768K系列和26MHZGPS晶振用的多。 在汽车里每一个部件都应有的不一样,甚至多次使用到同一尺寸,不同频率的晶振.爱普生品牌晶振型号就有几百种,很容易混淆,要想记住汽车里所应用到的不是件…

模型实战(19)之 从头搭建yolov9环境+tensorrt部署+CUDA前处理 -> 实现目标检测

从头搭建yolov9环境+tensorrt部署实现目标检测 yolov9虚拟环境搭建实现训练、推理与导出导出onnx并转为tensorrt模型Python\C++ - trt实现推理,CUDA实现图像前处理文中将给出详细实现源码python、C++效果如下:output_video_1 1. 搭建环境 拉去官方代码根据配置下载虚拟环境所…

【JAVA】检查两个字符串是否一致的几种方法

1.使用equals()方法&#xff1a; String str1 "Hello"; String str2 "Hello";boolean areEqual str1.equals(str2); // true 注意&#xff0c;如果有可能遇到null值&#xff0c;使用Objects.equals()方法更为安全&#xff0c;因为它可以避免空指针异常…

B树(B-tree)

B树(B-tree) B树(B-tree)是一种自平衡的多路查找树&#xff0c;主要用于磁盘或其他直接存取的辅助存储设备 B树能够保持数据有序&#xff0c;并允许在对数时间内完成查找、插入及删除等操作 这种数据结构常被应用在数据库和文件系统的实现上 B树的特点包括&#xff1a; B树为…

oracle快速定位数据库瓶颈

oracle快速定位数据库瓶颈 –数据库巡检或性能优化方法各异&#xff0c;但首要的是要发现数据库性能瓶颈&#xff0c;系统自带的statspack,或awr太耗时. 查询数据库等待事件top10,关注前前几个等待事件&#xff0c;关注前三个等待事件是否有因果或关联关系–oracle 9i select…

学习空间转换-3D转换

1.什么是空间转换&#xff1f; 使用的是transform属性实现元素在空间内的位移&#xff0c;旋转&#xff0c;缩放等效果。 空间&#xff1a;是从坐标轴角度定义的。x,y,z三条坐标轴构成的一个立体空间&#xff0c;Z轴位置与视线方向相同。 所以空间转换也被叫做3D转换 语法&a…

PICkit 3 v3.10中的 Device Family 识别不到芯片

1&#xff1a;现象描述 在使用 PICkit3烧写hex文件的时候&#xff0c;Device Family只有默认芯片&#xff0c;识别不到当前使用的芯片&#xff0c;导致报错“Device Error - hex file not loaded”&#xff0c;我当前使用的是 PIC16F1826芯片&#xff0c;默认不支持&#xff1…

快速开发部署平台Replit

Replit 是可以快速搭建开发、部署环境的平台。能够快速将原型进行部署&#xff0c;代码编辑器支持协同开发&#xff0c;他的在线编辑器做的不错&#xff0c;相当于云上提供了一个 vscode&#xff0c;代码实时更新。Replit 底层是基于容器技术的&#xff0c;可以安全的隔离多个用…

html、css、QQ音乐移动端静态页面,资源免费分享,可作为参考,提供InsCode在线运行演示

CSDN将我上传的免费资源私自变成VIP专享资源&#xff0c;且作为作者的我不可修改为免费资源&#xff0c;不可删除&#xff0c;寻找客服无果&#xff0c;很愤怒&#xff0c;&#xff08;我发布免费资源就是希望大家能免费一起用、一起学习&#xff09;&#xff0c;接下来继续寻找…