发送验证码60秒倒计时

最新推荐文章于 2022-04-15 15:15:18 发布
最新推荐文章于 2022-04-15 15:15:18 发布
阅读量246 收藏 1
点赞数 1
分类专栏： 基础 文章标签： css css3 jquery javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43732592/article/details/109564100
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-image: url(./img/pic7.jpg);
				background-size: 100%;
			}
			
			#outter{
				width: 50%;
				
			}
			#inner{
				width: 550px;
				height: 650px;
				position: absolute;
				right: 130px;
				top: 60px;
				background-color: rgba(255,255,255,0.8);
				border-radius: 15px;
			}
			h1{
				position: relative;
				top: 30px;
				left: 30px;
			}
			
			form{
				display: block;
				position: relative;
				width: 90%;
				left: 30px;
				top: 60px;
				
			}
			
			.normalInput{
				width: 75%;
				position: relative;
				height: 38px;
				margin-right: -100px;
				border-radius: 3px;
				outline: none;
				border: none;
			}
			.normalTxt{
				display: inline-block;
				width: 20%;
				
				margin-right: 5px;
			}
			.item{
				font-size: 20px;
				margin-top: 20px;
			}
			
			#age{
				width: 143px;
				height: 30px;
			}
			
			select{
				width: 411px;
				height: 30px;
				font-size: 18px;
			}
			
			#submitBtn{
				color: #fff;
				width: 80%;
				margin: auto;
				height: 39px;
				background-color: #3580eb;
				font-size: 25px;
				border: none;
				margin-top: 20px;
				margin-left: 65px;
				border-radius: 10px;
				
			}
			
			.msg{
				font-size: 10px;
				color: red;
				margin-left: 110px;
				position: absolute;
			}
			
			#fasong{
				width: 150px; height: 40px; margin-left: 110px;
				border-radius:20px;
				border-color: #3580eb ;
				background-color:  #3580eb;
				font-size: 18px;
				color: #fff;
				font-family:YouYuan;
				font-weight: 5px;
				line-height: 30px;
				margin-left: 300px;
				
			}
			#fasong:hover{
				background-color: royalblue;
			}
			.yanzheng{
				width: 35%;
				position: relative;
				height: 38px;
				margin-left: 110px;
				border-radius: 3px;
				outline: none;
				border: none;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="outter">
			<div id="inner">
				<h1>欢迎注册</h1>
			<form action="" method="post">
							
					<div class="item" >
						<div  class="normalTxt"><label>账 号</label></div>
						<input class="normalInput" type="text" name="account" id="account"  placeholder="请设置用户名" onblur="check(this);"/>
						<div id="msgAccount" class="msg"></div>
					</div>
					
					<div class="item">
						<div  class="normalTxt"><label>密 码</label></div>
						<input class="normalInput" type="text" name="account" id="pwd" placeholder="请设置密码" onblur="checkPass(this);" />
						<div id="msgPwd" class="msg"></div>
					</div>
					<div class="item">
						<div  class="normalTxt"><label>确认密码</label></div>
						<input class="normalInput" type="text" name="account" id="" placeholder="确认密码" onblur="confirmPassword(this);"/>
						<div id="msgPwdAgain" class="msg"></div>
					</div>
					
					<div class="item">
						<div  class="normalTxt"><label>年 龄</label></div>
						    <input  class="normalInput" type="text" name="age" id="age" placeholder="请输入合法年龄" onblur="ageC(this);" />
							<div id="ages" class="msg"></div>
					</div>
					<div class="item">
						<div  class="normalTxt"><label>邮箱</label></div>
						<input class="normalInput" type="text" name="account" id="" placeholder="请设置用户名"  onblur="email1(this);" />
						<div id="msgEmail" class="msg"></div>
					</div>
					<div class="item">
						<div  class="normalTxt"><label>手机号</label></div>
						<input class="normalInput" type="text" name="account" id="" placeholder="请设置用户名" onblur="phoneNumber(this);"/>
						<div id="msgPhone" class="msg"></div>
					</div>
					
					<div class="item"><!-- 
						<a id="fasong" href="#" οnclick="settime(this);" >发送验证</a> -->
						<input class="yanzheng" type="text" name="account" id="tt" placeholder="请输入验证码" />
						 <input type="button" id="fasong" value="免费获取验证码" onclick="settime(this)" />
						 <div id="tishi" class="msg"></div>
					</div>
					<div class="item">
						来自： <select style="margin-left: 48px;width: 365px;">
							<option value ="" >上海</option>
							<option value ="">北京</option>
							<option value ="">广州</option>
							<option value ="">深圳</option>
						</select>
					</div>
					<input type="submit" value="注册" id="submitBtn" disabled="disabled" />
				</form> 
				
			</div>
		</div>
		
		<script type="text/javascript">
			
			// 为每一项定义一个标识   是否合法 ， 默认不合法
			var accountFlag = false;
			var pwdFlag = false;
			var pwdAgain = false;
			var emailZ =false;
			var numberP=false;
			var ageCheng=false;
			var yanZheng=false;
			/*发送验证*/
			/*
			  1.拿到手机号的11位数，开始倒计时，改变发送验证的状态，获取60秒倒计时函数方法，
			  2.到零的时候改变为重新验证，
			*/
		   
			   function a(){
				var vertify = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
				//0-vertify.length-1  suiji abcdefghijklmnopqrstuvwxyz
				var sd = '';
				for (var i = 0; i < 6; i++) {
					//向下取整 
					var random = Math.floor( Math.random() * (vertify.length));
					//1：初始化验证码 空字符  res长度为6
					sd += vertify[random];
					var msgList = document.getElementById("tishi");
					/*  将内容用p标签包裹 */
					
				}
				var vstr = "<p>" + sd + "</p>";
				msgList.innerHTML = vstr + msgList.innerHTML;
				console.log(sd);
				//2:获取vertify中每一个字符
			   }
		   //倒计时
			var countdown = 60;
			function settime(obj) {
				
				if (countdown == 0) {
					obj.removeAttribute("disabled");
					obj.value="免费获取验证码";
					countdown = 60;
					return;
				} else {
					obj.setAttribute("disabled", true);
					obj.value="重新发送(" + countdown + ")";
					countdown--;
					if(countdown==59){
						a();
					}
					yanZheng=true;
				}
				setTimeout(function() {settime(obj) },1000)
			
			    submitFunc();
			}
			
			/* 账号验证 */
			// 长度在[6，18]之间
			function check(t){
				var v = t.value;
				var msg = document.getElementById("msgAccount");
				if(!(v.length>=6 && v.length<=18)){
					// 给出提示
					msg.innerText = "账号长度在 6~18 个字符之间";
					accountFlag=false;
				}else{
					//抹掉提示
					msg.innerText = "";
					accountFlag=true;
				}
				submitFunc();
			}
			/*密码验证*/
			//密码：密码的长度在[6,30],不能包含账号
			function checkPass(t){
				var account = document.getElementById("account").value;
				var msgPassword = document.getElementById("msgPwd");
				
				var pass=t.value;
				
				if((pass.length>=6 && pass.length<=30) && pass.indexOf(account)==-1){
					//合法年龄 抹掉提示
					msgPassword.innerText = "";
					pwdFlag=true;
					
				}else{
					//抹掉提示
					msgPassword.innerText = "密码长度在 [6,30] 个字符之间,不能包含账号";
					pwdFlag=false;
				}
				submitFunc();
			}
			
			/* 确认密码 */
			function confirmPassword(t){
				// 和上一次密码相同即可
				var pwdv = document.getElementById("pwd").value;
				var msg = document.getElementById("msgPwdAgain");
				
				var v = t.value;
				if(pwdv==v){
					msg.innerText = "";
					pwdAgain = true;
				}else{
					// 不合法
					msg.innerText = "两次密码不一致";
					pwdAgain = false;
				}
				submitFunc();
			}
			/*邮箱:必须出现@*/
			
			function email1(t){
				var emails = document.getElementById("msgEmail");
				var e=t.value;
				if(e.indexOf("@")==-1){
					emails.innerText="不合法邮箱！";
					emailZ=false;
				}else{
					emails.innerText=" ";
					emailZ=true;
				}
				submitFunc();    
			}
			
			/*手机号:必须要11位数字*/
			
			function phoneNumber(t){
				var msgPhone1 = document.getElementById("msgPhone");
				var p=t.value;
				if(p.length==11){
					msgPhone1.innerText=" ";
					numberP=true;
				}else{
					
					msgPhone1.innerText="手机号,必须要11位数字";
					numberP=false;
				}
				submitFunc();    
			}
			
			/*必须是成年人，才能注册*/
			
			function ageC(t){
				var ages1 = document.getElementById("ages");
				var a=t.value;
				if(a>=18){
					ages1.innerText=" ";
					ageCheng=true;
				}else{
					
					ages1.innerText="必须满18周岁注册";
					ageCheng=false;
				}
				submitFunc();    
			}
			
			
			
			/*注册*/
			function submitFunc(){
				if(accountFlag && pwdFlag && pwdAgain && emailZ && numberP && ageCheng && yanZheng){
					document.getElementById("submitBtn").disabled = false;
				}else{
					document.getElementById("submitBtn").disabled = true;
				}
			}
		

		</script>
	</body>
</html>

在这里插入图片描述

Tit先生
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【uni-app】发送验证码60s倒计时
得意小门生的博客
07-23 2083
<view class="item flex align-items-center"> <view class="title">新手机号</view> <view class="newPhone"><input type="text" value="" v-model="newPhone" /></view> <view v-if="showText == true" class="sendCodeBtn" @click..
jQuery手机号码获取验证码60秒倒计时表单代码
01-01
jQuery手机号码获取验证码60秒倒计时表单代码，简单实用的用户注册输入手机号码接收验证码功能，这是移动端的界面，也可以改成电脑端的。
jQuery实现发送验证码并60秒倒计时功能
10-21
主要介绍了jQuery实现发送验证码并60秒倒计时功能，非常不错，代码简单易懂，需要的朋友参考下吧
js实现发送验证码后的倒计时功能
10-24
本文解决方案的基本思路是点击就将按钮设为disabled,然后根据cookie判断是否设置过期时间,将手机利用ajax提交到后台的发短信接口，就可以了
jquery实现手机发送验证码的倒计时代码
10-26
主要介绍了jquery实现手机发送验证码的倒计时代码,需要的朋友可以参考下
获取验证码倒计时60秒
qq_42859450的博客
06-03 293
data() { return { oldMobile:"", flag:1, time:60, codeText:‘获取验证码’ } }, // 倒计时方法 countDown() { let that = this this.time = this.time - 1; console.log( this.time) this.codeText = this.time+“秒后重新发送” if (this.time== 0) { this.codeText = “重新发送” this.flag = 1..
获取验证码
weixin_34060741的博客
02-10 549
获取验证码倒计时： <!DOCTYPE html> <html> <head> <title>获取验证码倒计时</title> </head> <body> <input id="btn" value="获取验证码" onclick="time(this);"> <s...
30秒学会 —— 《获取验证码基本操作》
热门推荐
技术前端，忠于热爱 @0.活在风浪里
03-27 3万+
前期回顾 懒人必备 —— 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用，及其好使的插件，开发懒人必整，就算是自己可以写，一大堆代码，真的要写吗？https://blog.csdn.net/m0_57904695/article/details/123767269?spm=1001.2014.3001.5501 先说先验证码思路，其实很简单， 1、前端触发获取验证码,同步显示有效验证倒计时; 2、后台通过代理平台发送验证短信; 解释：你在页面触发验证码请求后，后台接...
验证码的获取与验证
寻常的博客
04-15 7053
前端vue部分： /** * 获取uuid */ export function getUUID () { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16) }) } 根据生成的uuid从后端获取验证码 crea
发送短信验证码，实现60秒倒计时
nanj的专栏
08-23 330
html: <inputtype="button"class="form-controlinpt4"id="fsyzm"value="发送验证码"onclick="settime(this)">js: varcountdown=60; functionsettime(obj){ if(countdown==0){ obj.removeAttribute("disabled"); obj.value="发送验证码"...
发送验证码60s的时间限制
weixin_51415327的博客
09-06 381
例如：哔哩哔哩网站上每次登录有一个验证码输入，且每次发送时间为60s的限制 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" ..
免费获取验证码实现倒数60秒
weixin_34409741的博客
04-25 568
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var countdown=60; fu...
实现点击按钮发送短信验证码后60秒倒计时
weixin_42615523的博客
07-26 7787
&lt;button id="numbtn"&gt;获取验证码&lt;/button&gt;   // 获取验证码倒计时 var countdown = 60; $('#numbtn').on('click',function(){ var obj = $("#numbtn"); settime(obj); }) function settime(obj) { //发送验证码倒计时...
验证码60秒发送（获取验证码）demo效果示例（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
01-27 1万+
获取验证码 var countdown=60; function send(){ var obj = $("#btn"); settime(obj); } function settime(obj) { //发送验证码倒计时 if (countdown == 0) { obj.attr('disabled',
js实现发送短信验证码后60秒倒计时
free_Light16的博客
05-09 3821
1、input[type=‘button’]按钮 js方法实现 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt; var countdown=60; function settime(obj) {     if (countdown == 0) {         obj.remov...
发送验证码，60秒倒计时
qq_42180156的博客
02-21 1134
在做项目中肯定会遇到发送验证码的倒计时，此篇记录我做项目中发送验证码倒计时的代码。  //发送短信验证码 var currentTimer = null; function sendSmsCode(phonedata) { if ($("#sencodebutton").html() == "获取验证") { //这个是获取验证码按钮 var loginphone =...
JS 发送验证码60秒后重试
℡メ㏑╭ァ小凯
12-04 852
效果图 页面刷新之后，60秒也还是会记录。 由于点击时间是存前端localstroe里的，若事把这个禁用之后还是可以无限发， 看自己的用法了，可以把时间记录到后端 var djs = 60; $(function () {     debugger;     if (window.localStorage.newIndexCurTime != undefined) {         ...
selenium实现定位截图----获取验证码图片
狼性书生
05-26 1万+
获取验证码的步骤： 浏览器最大化，截取整个网页，并保存 定位验证码（通过id或class元素实现定位） 获取验证码的x,y坐标轴，以及长宽，形成我们需要获取的位置坐标 打开之前保存的网页截图，从中截取验证码 保存验证码，等待识别 这里我们以搜狗微信公众号的验证页为例，实现验证码的定位截取。 # encoding:utf-8 from PIL import Image from sel...
使用Jquery发送验证码倒计时60秒限制
最新发布
06-09
好的，以下是一个简单的示例代码，可以使用jQuery发送验证码并倒计时60秒： HTML: ```html 请输入手机号码"/> 获取验证码 ``` JavaScript: ```javascript $(document).ready(function() { var count = 60; //倒...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值