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 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
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配置心得包含MYSQL5乱码解决
2006/11/20 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
javascript 动态添加表格行
2006/06/22 Javascript
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
详解python数据结构和算法
2019/04/18 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
python如何运行js语句
2020/09/09 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
html5的localstorage详解
2017/05/09 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
一套Java笔试题
2016/08/20 面试题
十八大报告观后感
2014/01/28 职场文书
安全生产责任书范本
2014/04/15 职场文书
计算机系本科生求职信
2014/05/31 职场文书
市场调查策划方案
2014/06/10 职场文书
招标承诺书
2014/08/30 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
催款律师函范文
2015/05/27 职场文书
暂住证证明
2015/06/19 职场文书
超市员工管理制度
2015/08/06 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS