uni-app使用countdown插件实现倒计时
作者:Laladoge 时间:2024-05-10 14:15:14
本文实例为大家分享了使用countdown插件实现倒计时的具体代码,供大家参考,具体内容如下
实现的效果如下:
这里实现的是一个活动倒计时,获取当前时间和活动开始时间,相减得出的时间差就是我们需要的倒计时。使用插件很方便。
首先新建一个项目,选择uni-app,模板选择hello-uniapp,里面有官网的组件可以直接使用。创建之后将components整个文件夹复制到自己的项目中。
在需要使用倒计时的页面引入组件
<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>
来源:https://blog.csdn.net/Laladoge/article/details/106761926
标签:uni,app,倒计时
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
将DataTable作为存储过程参数的用法实例详解
2024-01-27 14:23:24
![](https://img.aspxhome.com/file/2023/7/126367_0s.jpg)
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2024-01-16 07:02:33
Python Web App开发Dockerfiles编写示例
2023-02-01 12:47:19
将ASP记录集输出成n列的表格形式显示的方法
2011-04-08 10:51:00
简单了解pytest测试框架setup和tearDown
2022-09-12 07:26:56
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2023-06-13 09:12:06
python访问系统环境变量的方法
2023-06-16 00:30:39
返回首页的链接地址写法
2008-10-22 13:38:00
网页广告 Banner 设计图文手册
2007-10-18 19:56:00
![](https://img.aspxhome.com/file/UploadPic/up/2007101820293575.jpg)
django数据模型on_delete, db_constraint的使用详解
2023-02-16 04:48:06
SQL Server数据转换服务基本概念介绍
2009-01-20 15:52:00
扫盲大讲堂:SQL查询结果集对注入的影响及利用
2009-09-05 09:49:00
SQL进行排序、分组、统计的10个新技巧分享
2024-01-17 22:44:12
eWebEditor不支持IE,IE8,IE7,火狐,遨游的解决方法
2011-06-06 07:57:00
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2023-02-13 23:39:27
![](https://img.aspxhome.com/file/2023/3/121893_0s.png)
互联网一家之言(一):叫用户为你买单
2009-06-09 11:32:00
![](https://img.aspxhome.com/file/UploadPic/20096/9/qqe688aae59bbee69caae591bde5908d1-49s.jpg)
Oracle中的分析函数汇总
2024-01-20 05:59:38
![](https://img.aspxhome.com/file/2023/1/67031_0s.jpg)
PowerDesigner中如何导入SQL Server数据库
2024-01-17 08:38:46
![](https://img.aspxhome.com/file/2023/5/102075_0s.jpg)
解析SQL2005中如何使用CLR函数获取行号
2024-01-12 14:18:35
五种Python转义表示法
2021-12-22 03:24:01
![](https://img.aspxhome.com/file/2023/3/128593_0s.jpg)