uni-app使用countdown插件实现倒计时

本文实例为大家分享了使用countdown插件实现倒计时的具体代码，供大家参考，具体内容如下

实现的效果如下：

这里实现的是一个活动倒计时，获取当前时间和活动开始时间，相减得出的时间差就是我们需要的倒计时。使用插件很方便。

首先新建一个项目，选择uni-app，模板选择hello-uniapp，里面有官网的组件可以直接使用。创建之后将components整个文件夹复制到自己的项目中。

在需要使用倒计时的页面引入组件

<script>
 import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
 export default {
 data() {
  return {
  d:'',
  h:'',
  m:'',
  n:''
  }
 },

 components:{
  uniCountdown
 }
 }
</script>

在页面中放置定时器的位置

<view class="created" v-if="myData.stat == '未拍卖'">
 <span>距开始剩</span>
 <span class="timer">
    <uni-countdown :day="d" :hour="h" :minute="m" :second="s"></uni-countdown>
  </span>
</view>

计算定时器中绑定的时间d,h,m,s

var date = new Date();
  var now = date.getTime();
  var star = this.myData.startTime
  var endDate = new Date(star);
  var end = endDate.getTime();
  var leftTime = end-now;
  if (leftTime >= 0) {
 this.d = Math.floor(leftTime/1000/60/60/24);
 this.h = this.myData.validTime+Math.floor(leftTime/1000/60/60%24);
 this.m = Math.floor(leftTime/1000/60%60);
 this.s = Math.floor(leftTime/1000%60);
 console.log(this.d+'天'+this.h+'时'+this.m+'分'+this.s+'秒')
}

完整代码：

<template>
  <view class="created">
 <span>距开始剩</span>
 <span class="timer">
      <uni-countdown :day="d" :hour="h" :minute="m" :second="s"></uni-countdown>
    </span>
 </view>
</template>
<script>
 import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
 export default {
 data() {
  return {
  d:'',
  h:'',
  m:'',
  n:'',
  }
 },
 onLoad(option){
  this.init()
 },

 methods: {
  init(){
        var date = new Date();
  var now = date.getTime();//获得当前时间与1970年1月1日时间相差的毫秒数
  var star = this.myData.startTime
  var endDate = new Date(star);
  var end = endDate.getTime();//结束时间与1970年1月1日时间相差的毫秒数
  var leftTime = end-now;//计算两日期之间相差的毫秒数
  if (leftTime >= 0) {
   this.d = Math.floor(leftTime/1000/60/60/24);
   this.h = Math.floor(leftTime/1000/60/60%24);
   this.m = Math.floor(leftTime/1000/60%60);
   this.s = Math.floor(leftTime/1000%60);
   console.log(this.d+'天'+this.h+'时'+this.m+'分'+this.s+'秒')
  }
      }
    },
 components:{
  uniCountdown
 }
 }
</script>

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

赞 (0)

相关推荐

  • uni-app实现获取验证码倒计时功能

    本文实例为大家分享了uni-app实现获取验证码倒计时的具体代码,供大家参考,具体内容如下 实现的效果 页面部分是一个三目运算,codeTime是倒计时的时间. <template> <view> <view class="three"> <view class="get" @tap="getCheckNum()"> <text>{{!codeTime?'获取验证码':codeTime+

  • uniapp电商小程序实现订单30分钟倒计时

    本文实例为大家分享了uniapp实现订单30分钟倒计时的具体代码,供大家参考,具体内容如下 倒计时函数如下: // cm 参数是截至时间-当前时间 // 截至时间是后台返回的数据,当前时间通过new Date() 的方式进行获取 runBack(cm) { if (cm > 0) { // 如果时间是超过1分钟,则需要展示的样式是: x分x秒,如果是小于1分钟,则是 00分x秒 cm > 60000 ? (this.rocallTime = (new Date(cm).getMinutes()

  • uni-app使用countdown插件实现倒计时

    本文实例为大家分享了使用countdown插件实现倒计时的具体代码,供大家参考,具体内容如下 实现的效果如下: 这里实现的是一个活动倒计时,获取当前时间和活动开始时间,相减得出的时间差就是我们需要的倒计时.使用插件很方便. 首先新建一个项目,选择uni-app,模板选择hello-uniapp,里面有官网的组件可以直接使用.创建之后将components整个文件夹复制到自己的项目中. 在需要使用倒计时的页面引入组件 <script> import uniCountdown from '@/co

  • uni app仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • jquery插件jquery倒计时插件分享

    复制代码 代码如下: $(document).ready(function () {            /* 延迟函数  */            jQuery.fn.delay = function (time, func) {                return this.each(function () {                    setTimeout(func, time);                });            };          

  • JavaScript使用小插件实现倒计时的方法讲解

    CountDown.js 一个用来实现简单页面倒计时的轻量级工具 API CountDown.openTimeCountBySeconds()根据要计时的秒数打开一个显示剩余时间的倒计时 参数: Ele: 放置倒计时的元素 CountDownSeconds: 要计时的秒数 Sign: 用于给倒计时设置标记 (可以给多个倒计时设置同一个标记) Divider: 分割时分秒的分割符 EndFunc: 倒计时结束时执行的方法 ps:以上均为可选参数 示例 CountDown.openTimeCount

  • 利用jQuery实现漂亮的圆形进度条倒计时插件

    利用jQuery实现漂亮的圆形进度条倒计时插件

    jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件.该倒计时插件可以显示倒计时的秒.分钟.小时和天数.它采用圆形进度条来作为倒计时的动画,非常的时尚大方. 在线预览    源码下载 使用方法 该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库.使用是要将它们引入. <script type="text/javascript" src="js/jquery.min.js"><

  • 基于jquery插件编写countdown计时器

    基于jquery插件编写countdown计时器

    废话不多说,直接上代码: 先展示一下插件调用方式:  1. 需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jquery countdown倒计时插

  • 基于jQuery倒计时插件实现团购秒杀效果

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

  • js实现网页倒计时、网站已运行时间功能的代码3例

    1.jQuery.countdown插件 显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义.目前最新版v2.0.2,官方地址http://hilios.github.io/jQuery.countdown/例如: 复制代码 代码如下: <div id="getting-started"></div><script src="

  • 基于vue2的canvas时钟倒计时组件步骤解析

    今天给大家介绍一款基于vue2的canvas时钟倒计时组件,这个时钟倒计时组件采用canvas动画的炫酷动画效果形式,根据剩余时间的多少变换颜色和旋转扇形的速度,适合抢购.拍卖.下注等业务场景,且对移动端友好. 具体步骤分析: 假如设定倒计时总时间为15s, 变黄色时机为10s,变红色时机为5s. 1.开始倒计时后颜色为绿色.绿色含义是:倒计时的时间离结束时间还很长. 2.10s后变黄色.黄色的含义是:倒计时的时间离结束时间挺近了,起警告作用.动画中,出现快速旋转的扇形. 3.5s后变红色.红色

  • 微信小程序实现倒计时调用相机自动拍照功能

    本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下 在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照. 一.首先是视图层index.wxml,视图层主要负责显示组件和图片. <!--index.wxml--> <view class="userinfo-login"> <view class="page-body"> <view class="page-

随机推荐