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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
梳理一下vue中的生命周期
Dec 30 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
php跨站攻击实例分析
2014/10/28 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python打印斐波拉契数列实例
2015/07/07 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
WxPython实现无边框界面
2019/11/18 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
生物学学生自我评价
2014/01/17 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
家长寄语大全
2014/04/02 职场文书
产品包装策划方案
2014/05/18 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python