uniapp组件-uni-countdown倒计时

缺乏、安全感 2021-07-25 20:11 1392阅读 0赞

官方示例：[https://ext.dcloud.net.cn/plugin?id=25][https_ext.dcloud.net.cn_plugin_id_25]

倒计时组件主要用于促销商品剩余时间，发送短信验证等待时间等场景

## 效果图： ##

![20210302125955844.gif][]

## 代码实现： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<template>
    	<view>
    		<uni-countdown :day="1" :hour="1" :minute="12" :second="40" :show-colon="false"/>
    		<uni-countdown :day="1" :hour="1" :minute="12" :second="40" :show-colon="true"/>
    		<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" border-color="#007AFF" />
    		<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12" />
    		<uni-countdown :show-day="false" :second="5" @timeup="timeup" />
    		<uni-countdown :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" />
    	</view>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				testHour: 1,
    				testMinute: 1,
    				testSecond: 0
    			}
    		},
    		methods: {
    			timeup() {
    				uni.showToast({
    					title: '时间到'
    				})
    			}
    		}
    	}
    </script>

[https_ext.dcloud.net.cn_plugin_id_25]: https://ext.dcloud.net.cn/plugin?id=25
[20210302125955844.gif]: https://img-blog.csdnimg.cn/20210302125955844.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210302130018882.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，1392人围观）

还没有评论，来说两句吧...

相关阅读

相关倒计时纯js插件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

红太狼/ 2023年06月12日 09:06/ 0 赞/ 223 阅读

相关 uniapp倒计时

<template> <view> <view class=""> { { countdown_time}} </vie

墨蓝/ 2023年01月04日 11:47/ 0 赞/ 246 阅读

相关 vue组件 - 实现时间倒计时效果（多数据、多个倒计时处理）

Ⅰ- 壹 - 效果展示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

待我称王封你为后i/ 2023年01月02日 08:25/ 0 赞/ 1003 阅读

相关 uniapp实现获取验证码倒计时

获取验证码倒计时 <view class="getNum" @click="getNum" v-show="numShow"> 获取验证码

╰半夏微凉°/ 2022年11月24日 11:21/ 0 赞/ 281 阅读

相关倒计时插件与函数

（1）使用倒计时函数 const countDown = (current, ends) => { const leftTime = ends -

谁借莪１个温暖的怀抱￠/ 2022年09月15日 12:47/ 0 赞/ 206 阅读

相关倒计时插件

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 当想下载某个文件的之前，会有三到五秒的等待时间，

我会带着你远行/ 2022年01月14日 14:01/ 0 赞/ 314 阅读

相关倒计时

js代码 var EndTime= new Date('2017/2/18 00:00:00'); //设置到期时间 var NowTime = ne

- 日理万妓/ 2021年12月23日 08:41/ 0 赞/ 587 阅读

相关 vue-倒计时控件

好久木有来更新了，最近几个月把精力都花费在了加班上~ 最近用vue整前端有个倒计时控件的需求，用element-ui满足不了需求，便模仿常见的倒计时效果，写了一个控件，有需要

素颜马尾好姑娘i/ 2021年09月24日 06:18/ 0 赞/ 541 阅读

相关 uniapp组件-uni-countdown倒计时

官方示例：[https://ext.dcloud.net.cn/plugin?id=25][https_ext.dcloud.net.cn_plugin_id_25] 倒计时

缺乏、安全感/ 2021年07月25日 20:11/ 0 赞/ 1393 阅读

相关 uniapp 电商app支付倒计时处理

电商app支付倒计时所有电商app支付页面都是有倒计时的，一来可以促进消费，二来可以减少恶意减库存的问题发生。因为创建订单的时候，除了预售的商品外，实际销售的商品

喜欢ヅ旅行/ 2021年07月25日 16:40/ 0 赞/ 820 阅读