vue按钮倒计时

最新推荐文章于 2024-05-27 22:58:54 发布
最新推荐文章于 2024-05-27 22:58:54 发布
阅读量784 收藏
点赞数
分类专栏： Vue HTML 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43868692/article/details/85717485
版权
HTML 同时被 2 个专栏收录
31 篇文章 0 订阅
订阅专栏
Vue
26 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
        <style type="text/css">
            .Tim{
                width: 100px;
                height: 30px;
                background: #2AABD2;
                border: 0;
                border-radius:4px ;
                color: #FFFFFF;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <button @click="tap()" class="Tim">{{ content }}</button>
        </div>
    </body>
    <script type="text/javascript">
        const app = new Vue({
            el:"#box",
            data:{
                content:'发送验证码',
                totalTime:60,
                canClick: true
            },
            methods:{
                tap () {
                    if (!this.canClick) return   //改动的是这两行代码
                        this.canClick = false
                        this.content = this.totalTime + 's重新发送'
                        let clock = window.setInterval(() => {
                            this.totalTime--
                            this.content = this.totalTime + 's重新发送'
                            if (this.totalTime < 0) {
                                window.clearInterval(clock)
                                this.content = '重新发送验证码'
                                this.totalTime = 60
                                this.canClick = true   //这里重新开启
                            }
                        },1000)
                        }
                }
        })
    </script>
</html>

 

初来乍到到
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue写一个简单的倒计时按钮功能
08-27
主要介绍了基于Vue写一个简单的倒计时按钮功能，在项目开发的过程，经常会遇到发送验证码，点击之后有60秒倒计时的按钮，今天小编就给大家分享实例代码，需要的朋友参考下吧
vue写按钮倒计时
LHH201016的博客
10-25 279
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title&...
Vue实现倒计时
最新发布
pt
05-27 193
【代码】Vue实现倒计时。
vue实现按钮倒计时功能
m0_51079637的博客
09-24 2762
今天突发奇想写个手机号注册的功能。当我可以通过前端的按钮发送短信之后，想起了网爆的最基础方式，疯狂发送验证码短信。于是乎为了保护我那少的可怜的几条短信(还是白嫖的腾讯云的)，需要做到前端的按钮只能够一分钟点一下(有人说我完全可以通过F12直接查看请求，然后postman疯狂发送。那种情况再说，今天就做一个在前端限制点击的按钮)。 <el-form-item label="验证码" prop="verificationCode" > <el-input type="text" v-mod
vue实现按钮倒计时
qq_39905409的博客
05-31 6242
效果如下，倒计时完了再成为蓝色状态 实现代码： <el-button type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{getCode}}</el-button> export default { name: "demo",...
vue实现验证码按钮倒计时功能
08-27
最近项目结束，空闲时间比较多，今天小编抽时间给大家使用vue写一个小例子，就决定做验证码倒计时功能，具体实例代码大家参考下本
简单实现vue验证码60秒倒计时功能
08-29
简单实现Vue验证码60秒倒计时功能 本文主要介绍了如何简单实现Vue验证码60秒倒计时功能，具有实践价值的参考价值。下面将逐步详细解释该功能的实现过程。 标题解释 简单实现Vue验证码60秒倒计时功能是指在Vue项目...
点击实现倒计时,按钮变成不可点击,倒计时结束,按钮重新可点击
10-07
在移动应用开发中，如React或Vue.js，上述逻辑会封装成组件，状态管理（如useState或Vuex）将用于处理倒计时状态和按钮的禁用/启用状态。在Android或iOS原生开发中，倒计时功能可以通过系统提供的定时器（如Java的`...
vue-倒计时控件
清风自来
07-05 592
最近用vue整前端有个倒计时控件的需求，用element-ui满足不了需求，便模仿常见的倒计时效果，写了一个控件： <template> <div class="main ml20"> <el-tabs type="border-card" v-model="editableTabsValue" @tab-remove="remov...
Vue 实现倒计时按钮功能
grootbaby
03-08 678
data() { return { isAvailable: true, totalTime: 2, // 倒计时时间 btnContent: '下一步', btnDefault: '下一步', clock: null, }; }, countDown() { if (!this.isAvailable) return; this.isAvailable = true; this.btnContent = `${this.btnDef..
vue获取验证码倒计时组件
10-16
主要为大家详细介绍了vue获取验证码倒计时组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js代码实现点击按钮出现60秒倒计时
11-26
比如，一些网站上的手机短信认证的功能，有类似实现点击按钮后，倒计时60秒才能再次点击发送的效果。 此例子用Javascript实现点击按钮后，倒计时60秒才能再次点击发送验证码的功能。 例子1：Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> [removed] var wait=60; function time(o) { if (wait == 0) { o.removeAttribute("disabled");
前端开发：在vue中实现按钮倒计时功能
软贱开发攻城狮
02-28 3792
前言 在vue中开发中，关于计时器的使用也是比较常见的知识点，如基于移动端的短信60秒倒计时按钮、阅读协议40秒等实际需求，很常见的需求也不复杂，主要是有些细节需要注意。那么本篇博文就来分享一下关于vue中实现倒计时功能的方法，方便查阅使用，如有问题请指正。 使用场景 在前端开发中基于移动端的短信验证码发送60s倒计时使用，用户协议阅读30s倒计时提示等等。 核心原理 主要要处理的是倒计时按钮提示的数字以及倒计时结束之后的提示文字，以及计时器来进行倒计时使用，以及标签层面和js中按钮触
vue 倒计时功能实现详解，快来 get 灵感
热门推荐
Shids_的博客
05-28 1万+
vue 倒计时功能实现详解，快来 get 灵感
VUE：el-button里面的倒计时显示，验证码发送后两分钟倒计时
YiDabing9的博客
07-05 707
sendDisabled ：代表该button被禁用了，当它禁用和未禁用的时候有两种样式。sendDisabledStyle ：这是禁用的样式，就是灰色+120s倒计时的组合样式。发送验证码后，2分钟内不可以在发送，button置灰，120s后可以点击重新发送验证码。verificationScanCode-closeBtn：这是未禁用的样式。具体样式要根据当前布局调整。
倒计时按钮
poisonous_02的博客
03-28 385
​ ​ ​ ​ ​ ​ ​ 打算记录一下实习半个月以来所遇见的一些小问题，其实都是一些很简单的东西，由于都是一次做相关的功能，难免不能得心应手，以此来记住这些功能是如何实现。其中第一个小问题就是要我做一个常见的发送验证码弹窗中倒计时的按钮如何来做，简单做个弹窗样式，具体如下。 ​ ​ ​ ​ ​ ​ ​ ​公司用的技术是vue加elementui，原本我是打算写一个按
element 按钮倒计时
zykwblx的博客
03-07 2973
el-button :disabled="disabled" @click="startCountDown">{{countDown}}秒后重新发送Element UI提供了el-button组件，但是它没有直接支持倒计时的功能。// 重置倒计时时间。countDown: 60 // 倒计时时间（单位：秒）disabled: false, // 按钮是否可用。在显示倒计时的文本中，使用插值语法显示剩余倒计时时间。
实现button按钮上的倒计时
酷拼车的博客
11-17 1075
创建一个buttonUIButton *button = [UIButton buttonWithType:(UIButtonTypeCustom)];设置位置button.frame = CGRectMake(100, 100, 100, 100); 设置一个标签 为了后面便于获取buttonbutton.tag = 1000;设置背景颜色button.backgroundColor = [UI
vue按钮倒计时5秒后可用
06-02
您可以通过以下步骤实现Vue按钮倒计时5秒后可用： 1. 定义一个变量`countdown`来表示倒计时的秒数，初始值为5。 2. 在按钮的`@click`事件中，将按钮禁用，并启动一个定时器`timer`，每隔1秒将`countdown`减1。 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值