用vue写手机验证码的倒计时

最新推荐文章于 2024-07-25 08:14:42 发布

雪蛋不是蛋(^_−)☆

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量87

点赞数

文章标签： css vue.js html

本文链接：https://blog.csdn.net/qq_46291038/article/details/120506638

版权

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, ser-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="js/axios.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>

		<title></title>
		<style type="text/css">
			html { background: #efefef; }
			p { position: relative;height: 1rem;width: 90%; margin: 0 auto;border-bottom: 1px solid lightgray; }
			p input { outline: none;text-indent: 0.4rem;font-size: 0.3rem;height: 100%;width: 100%;background: rgba(0,0,0,0); }
			p span { display: inline-block;font-size: 0.3rem;color: gray;position: absolute;top: 0.35rem;right: 0.3rem; }
			.login { width: 80%;height: 1rem;line-height: 1rem;text-align: center;background: #D81E06;color: #fff;font-size: 0.3rem;margin: 0.5rem auto 0;border-radius: 0.1rem; }
			i { width: 100%;text-align: center;display: inline-block;color: gray;margin-top: 0.4rem; }
			i strong { color: blue; }
		</style>
	</head>
	<body>
		<div id="app">
		<form id="form1">
		<p style="padding-top: 2rem;">
			<input type="number" value=""  id="phone" name="phone" placeholder="请输入手机号"  v-model="phone" />
		</p>
		<p>
			<input type="number" id="code"  name="code" placeholder="请输入验证码" v-model="code"/>
			<span id="sendSms" @click="sendSms"  v-show="show">获取验证码</span> 
			<span  class="count"  v-show="!show">{{count}} 秒后可重新获取</span>
		</p>
		<div class="login" id="login" @click="login">登录</div>
		<i>点击登录，即表示已阅读并同意<strong>《车友援服务协议》</strong></i>
		</form>
	</div>
	 
	</body>
	
	<script>
		 var vm=new Vue({
			el:"#app",
			data:{
				phone:'',
				code:''
			},
			data(){
	  		return {
	   			show: true,
	   			count: '',
	   			timer: null,
	 		 	}
	 		},
			methods: {
				sendSms:function(){
					axios.get('验证码的后端网址', {
					  params: {
						  phoneNum:this.phone
					  }
					}).then((ret) => {
						if (ret.data.code == 0) {
							alert("验证码已发送到手机上");
							// 续上 作业2！！！ 让验证码 形成倒计时
	     				const TIME_COUNT = 120;
	     				if (!this.timer) {
	       				this.count = TIME_COUNT;
	       				this.show = false;
	       				this.timer = setInterval(() => {
	      					 if (this.count > 0 && this.count <= TIME_COUNT) {
	       				  		this.count--;
	        				} else {
	         					this.show = true;
	         					clearInterval(this.timer);
	         					this.timer = null;
	        				}
	       				}, 1000)
	     		 }

						}else{
							alert("发送失败")
						}
					})
				},
				login:function(){
					axios.post('登录的后端网址', {
						phoneNum:this.phone,
						codeNum:this.code
					}).then((ret) => {
						console.log(ret.data);
						if (ret.data.code == 0) {
							// 登录成功， 跳转到首页
							alert("登录成功，调转到 首页");
						}else{
							alert("验证码不对啊！")
						}
					});
				}
			}

		 });
		 
	</script>


	 
 
</html>

效果图：

雪蛋不是蛋(^_−)☆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用vue写手机验证码的倒计时

源码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, ser-scalable=no"> <link rel="stylesheet" type="text/
复制链接

扫一扫