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

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

直接上代码吧

<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();
 },
})

如图所示:

结语

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

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

微信小程序实现倒计时的更多相关文章

  1. 微信小程序之html5 canvas绘图并保存到系统相册

    这篇文章主要介绍了微信小程序之html5 canvas绘图并保存到系统相册,需要的朋友可以参考下

  2. 微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. 微信小程序多项选择器checkbox

    这篇文章主要为大家详细介绍了微信小程序多项选择器checkbox,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 微信小程序实现收缩式菜单

    这篇文章主要为大家详细介绍了微信小程序实现收缩式菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. 微信小程序自定义状态栏

    这篇文章主要为大家详细介绍了微信小程序自定义状态栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. 微信小程序实现简单的购物车功能

    这篇文章主要为大家详细介绍了微信小程序实现简单的购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. 微信小程序实现手机号码验证

    这篇文章主要为大家详细介绍了微信小程序实现手机号码验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. 解决Android-RecyclerView列表倒计时错乱问题

    这篇文章主要介绍了解决Android-RecyclerView列表倒计时错乱问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  9. 微信小程序预览二进制流文件的方法

    这篇文章主要为大家详细介绍了微信小程序预览二进制流文件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. 微信小程序实现滚动条功能

    这篇文章主要为大家详细介绍了微信小程序实现滚动条功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部