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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
html向js方法传递参数具体实现
2013/08/08 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
教学评估实施方案
2014/03/16 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
人力资源部岗位职责
2015/02/11 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android