【微信小程序】15分钟倒计时(附带天数和时钟的实现方法在文章中)

这是制作的订单支付前倒计时,如果客户在规定时间内没能 支付,则系统自动删除,这样就以便有些商品冗余,当然了,这里只有分钟和秒钟,天数和时钟我写在了最底下,最后代码的显示第七行,可以看一下,然后带入到相应的地方。

这是实现的效果,每秒钟都在onload()里面被调用,然后自动动态倒计时。

在这里插入图片描述
其实难度不是很大,有一些代码防止你们看不懂,我会在下面注解出来的。

首先还是wxml

<view class='demo-text2'>
   <text>倒计时:{{countdown}}</text>
</view>

其次是wxss:

.demo-text2 {
  font-size: 28rpx;
  color: #ff7ba8;
}

我就加了一个颜色,哈哈哈哈~,你们可以根据自己的意思加字和东西,很好加的。

最后就是最重要的js里,注释我会写在最下面的。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    that.countDown();
  },

  //倒计时
  countDown() {
    var that = this

    var starttime = '2019/07/30 09:04:19'

    var start = new Date(starttime.replace(/-/g, "/")).getTime()
    var endTime = start + 15 * 60000

    var date = new Date(); //现在时间
    var now = date.getTime(); //现在时间戳

    var allTime = endTime - now
    var m, s;
    if (allTime > 0) {
      m = Math.floor(allTime / 1000 / 60 % 60);
      s = Math.floor(allTime / 1000 % 60);
      that.setData({
        countdown: m + ":" + s,
      })
      setTimeout(that.countDown, 1000);
    } else {
      console.log('已截止')
      that.setData({
        countdown: '00:00'
      })
    }
  },
}

首先,是开始的时间,注意,千万不要是现在时间,不然一直是15分钟,无法改变的。
如果你想要用获取的时间,把我上面的时间改成在onload()里获取的时间就好了,this.data.你的时间属性。
var starttime = ‘2019/07/30 09:04:19’
var start = new Date(starttime.replace(/-/g, “/”)).getTime() //时间转时间戳

这里有个重点,replace(/-/g, "/") 里面的/符号是根据starttime 的日期时间的符号改变的,
如果是 “—” ,就把里面 / 改成 — 就好了。
var endTime = start + 15 * 60000 表示之前的时间加15分钟,如果想30分钟,改一下就好了,随你们用。

第二点,如果获取到了时间就不用使用上面的时间转时间戳了。
因为后面是用时间戳计算的,如果是用时间计算,比较麻烦,建议用时间戳。

第三点,因为我这里只有分钟和秒钟,如果你需要时钟和天数的话,d代表day(天数),h代表(时钟)加入下面代码。

  var d,h,m, s;
  d = Math.floor(allTime/ 1000 / 60 / 60 / 24);
  h = Math.floor(allTime/ 1000 / 60 / 60 % 24);
  countdown: d + ":" +  h + ":" + m + ":" + s,
  countdown: '00:00:00:00'

加在对应的位置一看就知道吧,哪里相同加哪里。
setTimeout(that.countDown, 1000);指定的毫秒数后调用函数,后面的数字是指定毫秒。

注:如果需要小时显示几天的倒计时,请勿除于24,否则会显示为当天的24小时,此代码需要改为
h = Math.floor(allTime/ 1000 / 60 / 60);

好了,这就是倒计时的所有代码了,有问题的请留言。

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

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

相关文章

C++:引用

目录 概念&#xff1a; 引用的使用格式&#xff1a; 引用特性&#xff1a; 常引用 使用场景&#xff1a; 1、做参数 二级指针时的取别名 一级指针取别名 一般函数取别名 2、做返回值 函数返回值的原理&#xff1a; 引用的返回值使用&#xff1a; 引用和指针的对比&…

搭建AI问答和AI绘画小程序都需要做什么?

1、注册和认证小程序 在微信公众平台 注册&#xff0c;选择小程序类别即可。根据提示提交企业相关资质文件即可&#xff0c;注册后进行认证小程序&#xff0c;官方会收取300元认证费用。也可以私信我可以免掉300元认证费。 2、开通微信商家支付 认证通过后&#xff0c;在“功…

uniapp 使用echarts做折线图条形图。

提前10天把中烟活动做完了&#xff0c;以为能打酱油到除夕那天&#xff0c;结果又要做什么数据看板&#xff0c;方便烟草领导过年查看数据&#xff0c;还只给5天时间&#xff0c;真实压榨剥削啊&#xff0c;下辈子再也不‘拍黄片’了&#xff0c;不&#xff01;下份工作我就转前…

MySQL:函数

基本介绍 在MySQL中&#xff0c;为了提高代码重用性和隐藏实现细节&#xff0c;MySQL提供了很多函数。函数可以理解为别人封装好的模板代码。 在MySQL中&#xff0c;函数非常多&#xff0c;主要可以分为五类&#xff1a;聚合函数、数学函数、字符串函数、日期函数、控制流函数、…

Maven讲解

介绍 Maven是一个流行的构建工具和项目管理工具&#xff0c;它主要用于Java项目的构建、依赖管理和项目报告生成。Maven通过提供一致的项目结构、自动化的构建过程和强大的依赖管理&#xff0c;简化了项目的开发和维护过程。 下面是一些Maven的主要特点和用途&#xff1a; 项…

【算法】Knuth-Morris-Pratt 算法(KMP算法):一种在字符串中查找子串的算法

引言 KMP&#xff08;Knuth-Morris-Pratt&#xff09;算法是一个在字符串中查找子串的算法&#xff0c;由 Donald Knuth、Vaughan Pratt 和 James H. Morris 共同发明。这个算法的特点是在查找过程中&#xff0c;不会回溯主串&#xff0c;也不会重复扫描已经比较过的子串&…

2024年上海高考数学最后四个多月的备考攻略,目标140+

亲爱的同学们&#xff0c;寒假已经来临&#xff0c;春节即将到来&#xff0c;距离2024年上海高考已经余额不足5个月了。作为让许多学子头疼&#xff0c;也是拉分大户的数学科目&#xff0c;你准备好了吗&#xff1f;今天&#xff0c;六分成长为您分享上海高考数学最后四个多月的…

2024 高级前端面试题之 JS 「精选篇」

该内容主要整理关于 JS 的相关面试题&#xff0c;其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 JS模块精选篇 1. 数据类型基础1.1 JS内置类型1.2 null和undefined区别1.3 null是对象吗&#xff1f;为什么&#xff1f;1.4 1.toString()为什么可以调用&#xff1…

燃烧的指针(三)

&#x1f308;个人主页&#xff1a;小田爱学编程 &#x1f525; 系列专栏&#xff1a;c语言从基础到进阶 &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于c语言的优质内容&#xff01;&#x1f3c6;&#x1f3c6; &#x1f600;欢迎来到小田代码世界~ &#x…

为什么需要使用线程池来创建线程?

当我们使用new Thread无限创建线程的时候 因为频繁的创建线程和销毁线程&#xff0c;cpu利用率会非常高 当cpu利用率达到100%的时候 那么没有可用的资源 让其他进程使用 那么其他进程访问就会导致卡顿 访问速度变慢 当我们使用线程池的时候 &#xff0c;cpu利用率就会降低&…

市场复盘总结 20240126

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 昨日主题投资 连板进级率 27/105 25.7% 二进三&#xff1a; 进级率低 50% 最常用的二种方法&#xff1a; 方…

2024最新版Visual Studio Code安装使用指南

2024最新版Visual Studio Code安装使用指南 Installation and Usage Guide for the Latest Visual Studio Code in 2024 By JacksonML Visual Studio Code最新版1.85已经于2023年11月由其官网 https://code.visualstudio.com正式发布&#xff0c;这是微软公司2024年发行的的最…

vs2019报错MSB4019 找不到导入的项目“BuildCustomizations\CUDA 9.2.props”

在VS中执行生成&#xff0c;报错如下&#xff1a;严重性 代码 说明 项目 文件 行 禁止显示状态 错误 MSB4019 找不到导入的项目“D:\Microsoft Visual Studio\2019\Community\MSBuild\Microsoft\VC\v160\BuildCustomizations\CUDA 9.2.props”。请确认 Import 声明“D:\Microso…

Mybatis----分页

1.什么是分页 分页&#xff08;Pagination&#xff09;是指将大量数据划分为多个页面进行展示的一种技术手段。在数据量较大的情况下&#xff0c;将所有数据一次性显示在页面上会导致加载时间过长和页面过于庞大&#xff0c;影响用户体验和系统性能。分页技术通过划分数据为多…

Mac Monitor:一款为macOS安全研究量身定制的高级独立系统监控工具

关于Mac Monitor Mac Monitor是一款功能强大的高级独立系统安全监控工具&#xff0c;该工具专为macOS安全研究、恶意软件分类和系统故障排除而设计&#xff0c;主要基于Apple Endpoint Security&#xff08;ES&#xff09;实现其功能。 Mac Monitor能够收集各种类型的系统事件…

量化交易学习2(因子研究)

因子有效性检验 参考1 参考2 在多因子研究框架中&#xff0c;因子的有效性检验是不可避免的工作&#xff0c;其本质是衡量一个因子的选股能力。 目前学术界和业界普遍使用的两种方法&#xff1a; 相关性检验 因子的相关性检验即检验单因子和收益率之间是否存在相关性 IC值 计…

搜狐新闻客户端使用Kotlin之后对JSON解析框架的探索

本文字数&#xff1a;7488字 预计阅读时间&#xff1a;45分钟 01 引言 自2017年Google发布Kotlin语言之后&#xff0c;Android开发由原来的Java开始向Kotlin过度&#xff0c;目前绝大部分Android开发岗位基本要求就是熟练使用Kotlin。事实上&#xff0c;很多有着多年历史的项目…

单片机学习笔记---矩阵键盘

目录 矩阵键盘的介绍 独立按键和矩阵按键的相同之处&#xff1a; 矩阵按键的扫描 代码演示 代码模块化移植 Keil自定义模板步骤&#xff1a; 代码编写 矩阵键盘就是开发板上右下角的这个模块 这一节的代码是基于上一节讲的LCD1602液晶显示屏驱动代码进行的 矩阵键盘的介…

主成分分析(PCA)Python

实际问题研究中&#xff0c;常常遇到多变量问题&#xff0c;变量越多&#xff0c;问题往往越复杂&#xff0c;且各个变量之间往往有联系。于是&#xff0c;我们想到能不能用较少的新变量代替原本较多的旧变量&#xff0c;且使这些较少的新变量尽可能多地保留原来变量所反映的信…

Idea Community社区版如何添加Run Dashboard

最近在学习spring cloud&#xff0c;跟着视频添加run dashboard&#xff0c;发现里面介绍的方法无法适用于idea community(社区版)。 然后自己研究了一下&#xff0c;成功添加&#xff0c;下面分享自己的方法。 如图&#xff0c;我的项目里添加了两个module&#xff0c;我想通…