微信小程序实现倒计时

 更新时间:2022年05月22日 07:30:36   作者:挣扎的工程师  
这篇文章主要为大家详细介绍了微信小程序实现倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

直接上代码吧

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

如图所示:

结语

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

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

相关文章

  • 微信小程序scroll-view组件实现滚动动画

    微信小程序scroll-view组件实现滚动动画

    这篇文章主要为大家详细介绍了微信小程序scroll-view组件实现滚动动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • js生成验证码并直接在前端判断

    js生成验证码并直接在前端判断

    众所周知,js是客户端的,那么把验证都做在客户端有意义吗?还是必须从服务器生成的验证码安全啊?前端生成的验证码安全吗?x下面我们来看个例子
    2015-05-05
  • 详解Javascript中document.execCommand()的用法以及指令参数列表

    详解Javascript中document.execCommand()的用法以及指令参数列表

    execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令。在HTML5中,execCommand可以通过JavaScript代码来调用,使得开发者可以在网页中实现一些复杂的文本操作。在HTML编辑器中这个命令用得很多,酷炫的强大功能。
    2023-07-07
  • JS实现多选框的操作

    JS实现多选框的操作

    这篇文章主要为大家详细介绍了JS实现多选框的操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • axios拦截器、ElementUI组件的使用方法

    axios拦截器、ElementUI组件的使用方法

    大家都知道ElementUI是"饿了么"公司推出的基于Vue2.0的组件库,这篇文章主要介绍了axios拦截器、ElementUI组件的使用方法,需要的朋友可以参考下
    2023-01-01
  • JavaScript中Number.isNaN 和 isNaN 的区别详解

    JavaScript中Number.isNaN 和 isNaN 的区别详解

    本文和大家分享一个前几天写代码踩的坑,笔者在业务逻辑中需要对一个值进行NaN的判断,由于笔者的不严谨,使用了isNaN,从而引起Bug,也正是因为这个,笔者才知道了isNaN和Number.isNaN的区别,所以本文就和大家聊聊它们的区别
    2023-09-09
  • IE和Firefox的Javascript兼容性总结[推荐收藏]

    IE和Firefox的Javascript兼容性总结[推荐收藏]

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬
    2011-10-10
  • kindeditor修复会替换script内容的问题

    kindeditor修复会替换script内容的问题

    这里给大家分享的是个人修改的kindeditor的代码,主要是修复了一些BUG,添加了些常用功能,推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • {}与function(){}选用空对象{}来存放keyValue

    {}与function(){}选用空对象{}来存放keyValue

    虽说js里面什么都能当对象,也能用填鸭式方法任意给对象添加属性,属性赋值.但是有些js内置的对象,类型属性也是没办法覆盖的
    2012-05-05
  • js转html实体的方法

    js转html实体的方法

    下面小编就为大家带来一篇js转html实体的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论