利用vue做一个倒计时抢购的组件

需求就是如上图,我也是看见朋友在做这个需求,所以想着用vue也实现一下

其实这里主要就是用到了定时器

用vue实现的话还是比较简单的

以下是我实现的结果,倒计时结束,点击抢购按钮,弹出开始抢购的alert

实现代码如下

<template><div><div class="container"><div class="left"><span class="title1">杭州市通用5元券</span><span>杭味面馆</span></div><button class="right" :disabled="isTrue" @click="btnCick()">{{ time }}</button></div></div>
</template><script>
export default {data() {return {time: 10, //倒计时timer: null, //定时器isTrue: true, //控制按钮是否可用}},methods: {daoJiShi() {this.timer = setTimeout(() => {this.time = this.time - 1if (this.time == 0) {this.time = '开始抢购'}}, 1000)},btnCick() {alert('可以开始抢购啦')},},mounted() {setInterval(() => {if (this.time == '开始抢购') {this.isTrue = falseclearInterval(this.timer)}this.daoJiShi()}, 1000)},
}
</script><style lang="scss" scoped>
.container {height: 136px;width: 430px;border-radius: 12px;background-color: #fff0f1;display: flex;justify-content: space-around;align-items: center;.left {display: flex;flex-direction: column;align-items: flex-start;.title1 {padding-bottom: 5px;font-size: 24px;font-weight: bold;}}.right {width: 108px;height: 45px;border-radius: 8px;font-size: 20px;background-color: #f00;color: white;border: none;}
}
</style>

利用vue做一个倒计时抢购的组件相关推荐

html5倒计时秒杀怎么做,vue 设计一个倒计时秒杀的组件
HTML CSS HTML5 CSS3 vue 设计一个倒计时秒杀的组件简介: 倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的核心思路:1.时间 ...
VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
vue 设计一个倒计时秒杀的组件
简介: 倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的核心思路:1.时间不能是本地客户端的时间必须是服务器的时间这里用一个settimeout ...
使用JSAPl来做一个倒计时的效果
今天的小案例需要做一个倒计时的效果我们的时分秒需要一直进行倒计时,然后我们的页面颜色需要根据定时器的操作来进行更换,首先我们还是可以来分析一下我们的HTML步骤 <div class=&quo ...
python自己做个定时器_技术图文：如何利用 Python 做一个简单的定时器类？
原标题:技术图文:如何利用 Python 做一个简单的定时器类? 背景今天在B站上看有关 Python 最火的一个教学视频 -- "零基础入门学习 Python",这也是我们 P ...
利用pgzero做一个接球的小游戏
利用pgzero做一个接球的小游戏说明 pgzero为python的一个用于游戏制作的库,它基于pygame模块可用如下命令去安装 pip install pygame pip install p ...
html倒计时10s,vue做30s倒计时，在最后10s倒数的时候有个放大的效果
题目描述 vue做30s倒计时,在最后10s的时候有个放大的效果题目来源及自己的思路相关代码 // 请把代码文本粘贴到下方(请勿用图片代替代码) {{second}} export default ...
使用vue做一个“淘宝“项目——3
做出分类页面前言:做出首页,详细请看前两篇文章 1.使用vue做一个"淘宝"项目(做出首页) 2.使用vue做一个"淘宝"项目(显示商品栏) 目录: 创建项目 ...
利用Python做一个简单的对战小游戏
利用Python做一个简单的文字对战小游戏一.游戏介绍 1.大体介绍:文字版的对战小游戏,可以利用Python随机生成两个角色,角色带有各自的血量和攻击值两个指标.两人在对战时同时攻击对方,同时造成 ...

利用vue做一个倒计时抢购的组件

利用vue做一个倒计时抢购的组件相关推荐

最新文章

热门文章