验证码倒计时的注册页面

最新推荐文章于 2021-01-06 16:32:03 发布
最新推荐文章于 2021-01-06 16:32:03 发布
阅读量61 收藏
点赞数
原文链接：http://www.cnblogs.com/ting6/p/9725794.html
版权
5640239-a6052c69eac9c725.png
原型图

需求：手机号验证
发送验证码之后开始60S倒计时
60s以后如果没有填写验证码，可重新发送

<!doctype html>
<html>
      <head>
            <meta charset="utf-8">
            <title>注册</title>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <meta name="format-detection" content="telephone=no">
            <meta name="renderer" content="webkit">
            <meta http-equiv="Cache-Control" content="no-siteapp" />
            <script src="http://code.jquery.com/jquery-latest.js";></script>
      </head>
      <body>
            <input type="text" id="phone" class="am-form-field  my-radius" placeholder="请输入手机号" style="">
            <div style="height:2rem;">
                  <font id="errMsg1" color="red" style=""></font>
            </div>
            <div>
                  <input id="rpcode" type="text" placeholder="请输入验证码">
                  <input id="getCode" type="button" value="获取验证码" onclick="sendMessages()"></input>
                  <font id="errMsg2" color="red" style="display:none; position:absolution; top:2rem;"></font>
            </div>
            <p id="start">
                  <span>开始</span>
            </p>
            <!-- 保存验证码  -->
            <input type="text" id="code" hidden="true">
            <script>
                  var InterValObj; //timer变量，控制时间 
                  var count = 60; //间隔函数，1秒执行 
                  var curCount; //当前剩余秒数 
                  var code = ""; //验证码 
                  var codeLength = 6; //验证码长度 
                  function sendMessages() {
                        curCount = count;
                        var phone = $("#phone").val()
                        if(validatePhone(phone)) {
                              return;
                        }
                        if(phone != "") {
                              //设置button效果，开始计时 
                              $("#getCode").attr("disabled", "true");
                              $("#getCode").val("请在" + curCount + "秒内输入");
                              InterValObj = window.setInterval(SetRemainTimes, 1000); //启动计时器，1秒执行一次 
                              //向后台发送处理数据 
                              $.ajax({
                                    url: "getCode.action",
                                    dataType: "json",
                                    type: "get",
                                    data: "phone=" + phone,
                                    success: function(data) {
                                          //保存验证码
                                          $("#code").val(data);
                                    }
                              });
                        } else {
                              alert("手机号码不能为空！！！！！！");
                        }
                  }
                  //timer处理函数 
                  function SetRemainTimes() {
                        if(curCount == 0) {
                              window.clearInterval(InterValObj); //停止计时器 
                              $("#getCode").removeAttr("disabled"); //启用按钮 
                              $("#getCode").val("重新发送验证码");
                              code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效     
                        } else {
                              curCount--;
                              $("#getCode").val("请在" + curCount + "秒内输入");
                        }
                  }
                  //开始按钮点击事件
                  $("#start").click(function() {
                        window.location.href = "regafter.html?phone=" + $("#phone").val();
                  })
                  //验证手机号
                  function validatePhone(phone) {
                        if(phone == '') {
                              $("#errMsg1").html("&nbsp;&nbsp;&nbsp;&nbsp;请先填写手机号");
                              $("#errMsg1").show();
                              return true;
                        }
                        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                        if(!myreg.test(phone)) {
                              $("#errMsg1").html("&nbsp;&nbsp;&nbsp;&nbsp;请输入有效的手机号");
                              $("#errMsg1").show();
                              return true;
                        }
                        return false;
                  }
                  //验证码非空和错误验证
                  function validateCode() {
                        var phone = $("#phone").val();
                        var code = $("#code").val();
                        var rpcode = $("#rpcode").val();
                        if(validatePhone(phone)) {
                              return true;
                        }
                        if(code == '') {
                              $("#errMsg2").html("&nbsp;&nbsp;&nbsp;&nbsp;请先获取验证码");
                              $("#errMsg2").show();
                              return true;
                        }
                        if(rpcode == '' || code != rpcode) {
                              $("#errMsg2").html("&nbsp;&nbsp;&nbsp;&nbsp;请正确输入验证码");
                              $("#errMsg2").show();
                              return true;
                        }
                        alert(code != rpcode);
                        return false;
                  }
                  $("#phone").on("focus", function() {
                        $("#errMsg1").hide();
                  })
                  $("#rpcode").on("focus", function() {
                        $("#errMsg2").hide();
                  })
            </script>
      </body>
</html>

原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

文末福利：关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群

转载于:https://www.cnblogs.com/ting6/p/9725794.html

weixin_30915951
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js设置手机获取验证码后按钮倒计时
09-29
js设置手机获取验证码后按钮倒计时，页面发送验证码后显示倒计时60秒demo，逻辑很简单，参考后可以自己设置 称需要的倒计时间，及显示内容
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
10-21
主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
原生js实现倒计时页面刷新不重新加载
weixin_34252090的博客
03-07 2266
有时候注册登录时会有倒计时，页面刷新不会重置，闲来无事随手敲了敲 时间不多.废话不说 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
页面刷新倒计时不消失
zw_sunking的博客
01-06 414
在vuex定义了个倒计时方法，页面刷新后在mounted引用 //html代码 <el-butto @click="getVerifyCode":disabled="disabled"> {{ disabled ? `${count}s` : '点击发送验证码' }} </el-button> //倒计时秒数 computed: { count() { return this.$store.state.paymentRunTime; }, }, /
JS实现验证码倒计时的注册页面
10-18
下面详细解释一下实现验证码倒计时注册页面的关键知识点。 ### HTML结构 在HTML结构中，一个典型的注册页面至少包含如下元素： - 一个用于输入手机号的文本框（`<input type="text" id="phone">`）。 - 一个用于...
WEB开发之注册页面验证码倒计时代码的实现
12-29
近期因为开发一个新的H5+backbone 项目,验证输入手机号 验证码倒计时功能。 #如上图所示 要实现验证码的倒计时的效果 首先做页面的布局 理清楚页面效果需要实现的逻辑思路 对手机号及验证码和密码做正则的规则...
手机注册发送验证码倒计时的简单实例
12-29
如下所示： ()这里用的是input做的点击发送验证码 <input type=number class=input name=mobile placeholder=...//页面初始化获取倒计时数字（避免在倒计时时用户刷新浏览器导致倒计时归零） var $getCodeInput =
倒计时（刷新和页面关闭不受影响）
起风了
01-14 1728
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;倒计时&lt;/title&gt; &lt;script src="http://static.wanlianjin.com/
ajax获取验证码后倒计时不受页面关闭及刷新影响
前端开发
11-17 1590
前端小白一只，前段时间做的项目中要求实现验证码的功能，初次接触以为单纯的倒计时而已，后来被告知功能会受到浏览器关闭及页面刷新影响，体验不好，容易被利用进行短信轰炸，要求进行倒计时不受其他因素影响。
WEB小案例之JS实现验证码倒计时页面刷新或关闭，倒计时正常递减无影响
lk1848621002的专栏
11-21 1005
很多网站登录或则注册时，都会做一个利用手机号获取验证码证明为本人操作的选项。当然为了网站的web网站安全和防止信息炸弹等恶意操作，都会对再次获取验证码做一个倒计时，一般都为60s。而正常情况下只需利用JS定时函数很容易实现，这种情况下用户一旦刷新页面，页面dom中我们定义的js变量都会初始化，造成倒计时中断，而且未等倒计时结束又能发送短信。 上面的那种清空就涉及到数据持久性的问题，当然关于解决数...
考试倒计时jquery+cookie（防止刷新）
木子金丰的博客
10-22 1431
基于jquery+cookie实现在线考试倒计时，关闭浏览器后重新打开后依然可以计时。一下代码在本地测试，由于chrome浏览器只支持web的cookie。在实际中倒计时的总时长应从后台获取。 $(function() { var _minute = parseInt("1");//"1" 倒计时 多长时间，分钟为单位 var _expiresHours = _min
JS获取验证码后倒计时不受页面刷新及关闭影响
qq_40341311的博客
11-17 7985
小白一只，最近开发项目里面要实现的功能如标题。一开始只是单纯的写出了倒计时的功能，后来被告知刷新及关闭会导致页面重置，容易发生被利用进行短信轰炸的隐患。所以要求在倒计时基础上保证刷新，关闭浏览器不受影响。特意找了相关文章进行研究。
JS获取验证码后倒计时不受刷新及关闭影响
weixin_30879833的博客
06-26 122
HTML部分 <input type="button" id="code_btn" value="获取验证码"> JS部分 //获取验证码 $(function() { $("#code_btn").on("tap", function() { if(!rex.test($("#tel").val())) { ...
JQuery---点击获取验证码后倒计时，刷新页面倒计时不失效
hjy1821的博客
01-16 1430
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;采用通过添加Cookie的方式实现页面刷新后倒计时仍有效，亲测有效！ 1.Html部分： //导入JS文件 &lt;script type="text/javascript" src="../js/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javasc
60s倒计时关闭网页
ypuzhiyuan的博客
04-30 196
```JavaScript `````
js实现发送短信验证码后的倒计时功能(无视页面刷新)
小七的博客
04-21 2142
 cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的.[代码]这是页面上的发送验证码按钮1&lt;inputid="second"type="button" value="免费获取验证码" /&gt;2. [代码]js对cookie的操作  ...
表单验证--手机号，身份证，银行卡号
binglong180
03-20 4131
1、表单信息&lt;body style="background:#fafafa"&gt; &lt;div class="container"&gt; &lt;!-- 头部 --&gt; &lt;header class="header"&gt; 绑定银行卡&lt;/header&gt; &lt;!-- 内容 --&gt; &am
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习
最新发布
08-25
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习 简历是展示个人经历、技能和能力的重要文档，以下是一个常见的简历格式和内容模板，供您参考： 简历格式： 头部信息：包括姓名、联系方式（电话号码、电子邮件等）、地址等个人基本信息。 求职目标（可选）：简短描述您的求职意向和目标。 教育背景：列出您的教育经历，包括学校名称、所学专业、就读时间等。 工作经验：按时间顺序列出您的工作经历，包括公司名称、职位、工作时间、工作职责和成就等。 技能和能力：列出您的专业技能、语言能力、计算机技能等与职位相关的能力。 实习经验/项目经验（可选）：如果您有相关实习或项目经验，可以列出相关信息。 获奖和荣誉（可选）：列出您在学术、工作或其他领域获得的奖项和荣誉。 自我评价（可选）：简要描述您的个人特点、能力和职业目标。 兴趣爱好（可选）：列出您的兴趣爱好，展示您的多样性和个人素质。 参考人（可选）：如果您有可提供推荐的人员，可以在简历中提供其联系信息。 简历内容模板： 姓名: 联系方式: 地址: 求职目标: （简短描述您的求职意
写一个web作业，登陆注册页面，实时显示时间，轮播图、手风琴效果图、数据删除提示、登陆验证码、鼠标跟随动画、活动倒计时、背景加鼠标移动时的变化，包含背景音乐自动播放
06-07
好的，这个任务比较复杂，需要用到多种技术。您可以按照以下步骤来实现： 1. 创建一个 HTML 文件，包含登陆注册表单、轮播图、手风琴效果图、数据删除提示、登陆验证码、鼠标跟随动画、活动倒计时、背景加鼠标移动时的变化和背景音乐自动播放。 ```html <!DOCTYPE html> <html> <head> <title>登陆注册页面</title> <style> /* 样式 */ </style> </head> <body> <h1>登陆</h1> <form> <!-- 表单内容 --> </form> <h1>注册</h1> <form> <!-- 表单内容 --> </form> <div id="slider"> <!-- 轮播图内容 --> </div> <div id="accordion"> <!-- 手风琴效果图内容 --> </div> <div id="data-table"> <!-- 数据表格内容 --> </div> <div id="login-captcha"> <!-- 登陆验证码内容 --> </div> <div id="mouse-follow"> <!-- 鼠标跟随动画内容 --> </div> <div id="countdown"> <!-- 活动倒计时内容 --> </div> <div id="background"> <!-- 背景音乐自动播放内容 --> </div> </body> </html> ``` 2. 在 HTML 文件中添加 CSS 样式，可以设置表单的样式、轮播图的样式、手风琴效果图的样式、数据删除提示的样式、登陆验证码的样式、鼠标跟随动画的样式、活动倒计时的样式、背景加鼠标移动时的变化的样式和背景音乐自动播放的样式。 ```css /* 表单样式 */ #slider { /* 轮播图样式 */ } #accordion { /* 手风琴效果图样式 */ } #data-table { /* 数据表格样式 */ } #login-captcha { /* 登陆验证码样式 */ } #mouse-follow { /* 鼠标跟随动画样式 */ } #countdown { /* 活动倒计时样式 */ } #background { /* 背景音乐自动播放样式 */ } ``` 3. 在 HTML 文件中添加 JavaScript 代码，实现实时显示时间、轮播图、手风琴效果图、数据删除提示、登陆验证码、鼠标跟随动画、活动倒计时、背景加鼠标移动时的变化和背景音乐自动播放的功能。 ```javascript // 实时显示时间 function updateTime() { const now = new Date(); const timeEl = document.getElementById("time"); timeEl.innerText = now.toLocaleString(); } setInterval(updateTime, 1000); // 实现轮播图 // ... // 实现手风琴效果图 // ... // 实现数据删除提示 // ... // 实现登陆验证码 // ... // 实现鼠标跟随动画 // ... // 实现活动倒计时 // ... // 实现背景加鼠标移动时的变化 // ... // 实现背景音乐自动播放 const audio = new Audio("background-music.mp3"); audio.play(); ``` 这样就完成了一个包含多种功能的登陆注册页面。但是，这个任务比较复杂，需要用到多种技术，需要花费一些时间和精力来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值