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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 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/10/23 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
原生js实现分页效果
2020/09/23 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
Django框架models使用group by详解
2020/03/11 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
银行金融服务方案
2014/06/11 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
个人总结格式范文
2015/03/09 职场文书
工作失职自我检讨书
2015/05/05 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
JavaScript实现音乐播放器
2022/08/14 Javascript