广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现倒计时
  • 717
分享到

微信小程序实现倒计时

2024-04-02 19:04:59 717人浏览 独家记忆
摘要

本文实例为大家分享了微信小程序实现倒计时的具体代码,供大家参考,具体内容如下 大家好,今天我们来学习一下倒计时的实现,好好看,好好学,超详细的。 直接上代码吧 <view cl

本文实例为大家分享了微信小程序实现倒计时的具体代码,供大家参考,具体内容如下

大家好,今天我们来学习一下倒计时的实现,好好看,好好学,超详细的。

直接上代码吧

<view class="title-item">倒计时</view>
<view class="countdown-item">
  <view class="countdown-title">
    <block>
      <text class='tui-conutdown-box'>{{days}}</text>
      <text class="countdown-text">天</text>
      <text class='tui-conutdown-box'>{{hours}}</text>
      <text class="countdown-text">时</text>
      <text class='tui-conutdown-box'>{{minutes}}</text>
      <text class="countdown-text">分</text>
      <text class='tui-conutdown-box'>{{seconds}}</text>
      <text class="countdown-text">秒</text>
    </block>
  </view>
</view>
.countdown-item {
  width: 100%;
  height: 100rpx;
  border: 0rpx solid red;
}

.countdown-title {
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 40rpx;
  color: #fff;
}

.tui-conutdown-box {
  display: inline-block;
  line-height: 50rpx;
  text-align: center;
  background-color: red;
  color: #fff;
  margin: 0 4rpx;
  padding: 10rpx 20rpx;
}

.tui-countdown-bg {
  background-color: #DF0101;
}

.countdown-text{
  color: #000;
}
Page({
    data: {
        nowDate: '2021-12-22 18:00:00', //结束时间
        countdown: '', //倒计时
        days: '00', //天
        hours: '00', //时
        minutes: '00', //分
        seconds: '00', //秒
    },
    
 countTime() {
    let days,hours, minutes, seconds;
    let nowDate = this.data.nowDate;
    console.log(nowDate)
    let that = this;
    let now = new Date().getTime();
    let end = new Date(nowDate).getTime(); //设置截止时间
    // console.log("开始时间:" + now, "截止时间:" + end);
    let leftTime = end - now; //时间差                         
    if (leftTime >= 0) {
      days = Math.floor(leftTime / 1000 / 60 / 60 / 24);
      hours = Math.floor(leftTime / 1000 / 60 / 60 % 24);
      minutes = Math.floor(leftTime / 1000 / 60 % 60);
      seconds = Math.floor(leftTime / 1000 % 60);
      seconds = seconds < 10 ? "0" + seconds : seconds
      minutes = minutes < 10 ? "0" + minutes : minutes
      hours = hours < 10 ? "0" + hours : hours
      that.setData({
        countdown: days+":"+hours + ":" + minutes + ":" + seconds,
        days,
        hours,
        minutes,
        seconds
      })
      // console.log(that.data.countdown)
      //递归每秒调用countTime方法,显示动态时间效果
      setTimeout(that.countTime, 1000);
    } else {
      that.setData({
        countdown: '已截止'
      })
    }
 },
 onLoad: function (options) {
    this.countTime();
 },
})

如图所示:

结语

关于微信小程序实现倒计时就介绍到这里 ,欢迎大家多多指教,互相交流,一起学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序实现倒计时

本文链接: https://www.lsjlt.com/news/149372.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现倒计时
    本文实例为大家分享了微信小程序实现倒计时的具体代码,供大家参考,具体内容如下 大家好,今天我们来学习一下倒计时的实现,好好看,好好学,超详细的。 直接上代码吧 <view cl...
    99+
    2022-11-13
  • 微信小程序实现答题倒计时
    想做一个答题的计时器效果,本文为大家分享了微信小程序实现答题倒计时的具体代码,供大家参考,具体内容如下 思路 利用canvas不停的画弧线 效果 代码 wxml <view...
    99+
    2022-11-13
  • 微信小程序如何实现倒计时
    这篇文章主要介绍“微信小程序如何实现倒计时”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序如何实现倒计时”文章能帮助大家解决问题。直接上代码吧<view class=&quo...
    99+
    2023-06-30
  • 微信小程序实现验证码倒计时
    本文实例为大家分享了微信小程序实现验证码倒计时的具体代码,供大家参考,具体内容如下 wxml代码: <view class='container'>   <form...
    99+
    2022-11-13
  • 微信小程序实现短信验证码倒计时
    本文实例为大家分享了微信小程序实现短信验证码倒计时的具体代码,供大家参考,具体内容如下 初始效果 当点击按钮时候设置禁止点击效果:如下图 话不多说,直接上代码 1.wxml部分 ...
    99+
    2022-11-13
  • 微信小程序实现简单倒计时功能
    本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下 任务描述: 计时器 任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白...
    99+
    2022-11-13
  • 微信小程序实现验证码倒计时效果
    本文实例为大家分享了微信小程序验证码倒计时效果的具体代码,供大家参考,具体内容如下 如果写过js的倒计时,那么小程序中使用也是差不多的; 代码: data: {       daoj...
    99+
    2022-11-13
  • 微信小程序电商常用倒计时实现实例
    微信小程序电商常用倒计时实现实例wxml文件放个text<text>second: {{second}} micro second:{{micro_second}}</text>在js文件中调用function co...
    99+
    2023-05-31
    微信小程序 倒计时 信小
  • 微信小程序实现发送短信验证码倒计时
    本文实例为大家分享了微信小程序发送短信验证码倒计时的具体代码,供大家参考,具体内容如下 效果图 WXML文件 <view class="container"> ...
    99+
    2022-11-12
  • 微信小程序如何实现短信验证码倒计时
    这篇文章主要讲解了“微信小程序如何实现短信验证码倒计时”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序如何实现短信验证码倒计时”吧!初始效果当点击按钮时候设置禁止点击效果:如下图话不...
    99+
    2023-06-30
  • 微信小程序如何实现简单倒计时功能
    本篇内容介绍了“微信小程序如何实现简单倒计时功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!任务描述:计时器任务要求:案例描述:设计一个实...
    99+
    2023-06-30
  • 微信小程序实现获取手机号60s倒计时
    本文实例为大家分享了微信小程序实现获取手机号60s倒计时的具体代码,供大家参考,具体内容如下 1.效果:点击获取》60s倒计时》重新获取 2.wxml <view class...
    99+
    2022-11-13
  • 微信小程序中如何显示倒计时
    这篇文章主要为大家展示了“微信小程序中如何显示倒计时”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序中如何显示倒计时”这篇文章吧。wxml文件中:&nb...
    99+
    2022-10-19
  • 微信小程序倒计时组件怎么用
    这篇文章主要介绍“微信小程序倒计时组件怎么用”,在日常操作中,相信很多人在微信小程序倒计时组件怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序倒计时组件怎么用”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-26
  • 微信小程序如何实现验证码倒计时效果
    这篇文章主要介绍了微信小程序如何实现验证码倒计时效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序如何实现验证码倒计时效果文章都会有所收获,下面我们一起来看看吧。如果写过js的倒计时,那么小程序中使用...
    99+
    2023-06-30
  • 微信小程序中如何实现发送短信倒计时功能
    这篇文章主要介绍微信小程序中如何实现发送短信倒计时功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!点击后代码<form bindsubmit="formS...
    99+
    2022-10-19
  • 微信小程序实现计时器
    本文实例为大家分享了微信小程序实现计时器的具体代码,供大家参考,具体内容如下 微信小程序点击事件触发计时器 1.wxml <view class="button" bindt...
    99+
    2022-11-13
  • Android中微信小程序支付倒计时功能
    看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全...
    99+
    2022-06-06
    小程序 倒计时 程序 微信小程序 Android
  • 微信小程序实现手机获取验证码倒计时60s
    本文实例为大家分享了微信小程序实现手机获取验证码倒计时的具体代码,供大家参考,具体内容如下 功能展示: WXML: <view class="all">   <!...
    99+
    2022-11-13
  • 微信小程序中如何动态显示项目倒计时
    这篇文章给大家分享的是有关微信小程序中如何动态显示项目倒计时的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下1、展示的效果如下2、wxml代码:<!--倒计时&n...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作