Vue验证码倒计时组件，如何改写为长尾？

本文共计468个文字，预计阅读时间需要2分钟。

原文示例：本文实例为大师分享了Vue获取验证码倒计时组件，供大师参考，具体内容如下：之前写过一个小计时函数，有计算误差，但验证码的60秒倒计时可以忽略这一点误差。

改写后：本文提供Vue获取验证码倒计时组件实例，供大家参考。内容概述：曾编写一个简单计时函数，存在计算误差，但对于60秒验证码倒计时而言，这些误差可以忽略不计。

本文实例为大家分享了vue获取验证码倒计时组件，供大家参考，具体内容如下

之前写过一个计时函数，有计算误差，但是验证码的60秒倒计时可以忽略这一点点误差。直接上代码。

<template> <div class="captcha-row"> <input class="captcha-input" placeholder="输入验证码" auto-focus /> <div v-if="showtime===null" class="captcha-button" @click="send"> 获取验证码 </div> <div v-else class="captcha-button"> {{showtime}} </div> </div> </template>

<script> export default { data() { return { // 计时器,注意需要进行销毁 timeCounter: null, // null 则显示按钮 秒数则显示读秒 showtime: null } }, methods: { // 倒计时显示处理 countDownText(s) { this.showtime = `${s}s后重新获取` }, // 倒计时 60秒 不需要很精准 countDown(times) { const self = this; // 时间间隔 1秒 const interval = 1000; let count = 0; self.timeCounter = setTimeout(countDownStart, interval); function countDownStart() { if (self.timeCounter == null) { return false; } count++ self.countDownText(times - count + 1); if (count > times) { clearTimeout(self.timeCounter) self.showtime = null; } else { self.timeCounter = setTimeout(countDownStart, interval) } } }, send() { this.countDown(60); } }, } </script>

<style lang="less" scoped> .captcha-row { display: flex; .captcha-button { background: #048fff; color: white; display: flex; justify-content: center; align-items: center; padding: 4rpx 8rpx; width: 320rpx; border-radius: 4rpx; } } </style>

更多关于倒计时的文章请查看专题：《倒计时功能》

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。