vue.js获取手机验证码倒计时

最新推荐文章于 2024-06-11 07:57:19 发布

羽筠

最新推荐文章于 2024-06-11 07:57:19 发布

阅读量460

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_16494241/article/details/107288992

版权

vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue.js获取手机验证码倒计时

test：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=750, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>yzm_test</title>
<style>
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
html{ max-width:750px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"; font-size:32px; line-height:1.6em; color:#303030;  background-color:#fff;
    -webkit-user-select:none;
			user-select:none;
    -webkit-touch-callout:none;
			touch-callout:none;
}
 
.send_li{ padding: 50px 50px 0 50px;
	display: flex; justify-content: space-between; align-items: center;
}
.send_li input{ width: 430px; height: 60px; padding: 15px; font-size: 32px; border-radius: 10px; border: #2D9FFF solid 1px;}
.yzm{ width: 200px; height: 60px; line-height: 60px; text-align: center; color: #fff; border-radius: 10px; background-color: #2D9FFF;}
 
[v-cloak]{ display: none;}
</style>
</head>
 
<body>
	
<section id="app" v-cloak>
	<div class="send_li">
		<input type="tel" v-model.trim="mobile" :disabled="inputDisabled" placeholder="请输入您的手机号" maxlength="11" />
	</div>
	<div class="send_li">
		<input type="text" v-model.trim="yzm" placeholder="请输入验证码" maxlength="11" />
		<span v-if="countdown" class="yzm" style="background-color: #ccc;">{{timeText}}s后重试</span>
		<span v-else v-on:click="getYzm" class="yzm">获取验证码</span>
	</div>
</section>	

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<script type="text/javascript">
var vm = new Vue({
	el:"#app",
	data:{
		countdownStartTime: 60, //倒计时的初始时间 - 显示数字

		countdown: null, //是否获取验证进行倒计时
		timeText: 60, //倒计时显示数字
		mobile: null, //手机号
		yzm: null, //验证码
		
		inputDisabled: false, //input是否禁用
	},
	created() {
		
	},
	mounted() {
		
	},
	watch() {
		
	},
	methods:{
		//获取验证码
		getYzm() {
			if (!this.mobile) {
				alert('请输入手机号'); return false;
			}
			if (!/^1\d{10}$/.test(this.mobile)) {
				alert('请输入正确的手机号'); return false;
			}

			//发送短信中...
			
			let dataJson = {
				mobile: this.mobile,
			};
			
			//请求后台发送短信 => 返回res
			//...
			// 发送短信成功
			// if(res.status == 1){
				this.countDown(); //执行倒计时
				this.countdown = true;
				this.inputDisabled = true;
			// }
			//...
		},
		//倒计时
		countDown() {
			let nowTime = this.timeText - 1;
			if (nowTime >= 0) {
				this.timeText = nowTime;
				timer = setTimeout(this.countDown, 1000);
			} else {
				this.countdown = false;
				this.timeText = this.countdownStartTime;
				clearTimeout(timer);
			}
		},
		
	}
})
</script>
	
</body>
</html>

羽筠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js获取手机验证码倒计时

vue.js获取手机验证码倒计时test：<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=750, user-scalable=no"><meta http-eq
复制链接

扫一扫

专栏目录