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


Posted in Javascript onNovember 01, 2020

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

实现的效果如下:

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

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

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

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

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

<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>

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

Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
利用 JavaScript 构建命令行应用
Nov 17 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 #Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 #Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 #Javascript
微信小程序实现星星评分效果
Nov 01 #Javascript
Express 配置HTML页面访问的实现
Nov 01 #Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 #Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 #Javascript
You might like
php简单获取文件扩展名的方法
2015/03/24 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
网站上面有这种切换效果
2006/06/26 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
跟老齐学Python之用while来循环
2014/10/02 Python
windows下python安装pip图文教程
2018/05/25 Python
django 自定义过滤器的实现
2019/02/26 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
Python模块常用四种安装方式
2020/10/20 Python
python中xlutils库用法浅析
2020/12/29 Python
python wsgiref源码解析
2021/02/06 Python
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
2014年党员自我评议总结
2014/09/23 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Pillow图像处理库安装及使用
2022/04/12 Python