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 相关文章推荐
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
javascript实现动态标签云
Oct 16 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JS实现打字游戏
Dec 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下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
详解react-redux插件入门
2018/04/19 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
python复制与引用用法分析
2015/04/08 Python
python与php实现分割文件代码
2017/03/06 Python
python取代netcat过程分析
2018/02/10 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
2014年情人节活动方案
2014/02/16 职场文书
《穷人》教学反思
2014/04/08 职场文书