JavaScript实现点击切换验证码及校验

本文实例为大家分享了JavaScript实现点击切换验证码及校验的具体代码，供大家参考，具体内容如下

效果：

代码：

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 div {
 width: 100px;
 height: 40px;
 background-color: red;
 color: #fff;
 text-align: center;
 line-height: 40px;
 font-size: 30px;
 font-weight: 900;
 user-select: none;
 }

 .show {
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 width: 200px;
 height: 100px;
 background-color: pink;
 text-align: center;
 line-height: 100px;
 font-size: 40px;
 font-weight: 900;
 display: none;
 }
 </style>
</head>

<body>

 <div></div>
 <input type="text" value="请输入上图的验证码" />
 <button>注册</button>
 <div class="show">等待中。。。。</div>
 <script type="text/javascript">

 //1000-9999
 var div = document.getElementsByTagName("div");
 var inp = document.getElementsByTagName("input")[0];
 var btn = document.getElementsByTagName("button")[0];
 div[0].innerHTML = ranFun(1000, 9999);

 inp.onclick = function () {
 this.value = ""
 }

 div[0].onclick = function () {
 this.innerHTML = ranFun(1000, 9999)
 }

 btn.onclick = function () {
 if (inp.value == div[0].innerHTML) {
 div[1].style.display = "block";
 setTimeout(function () {
  location.href = "register.html"
 }, 3000)
 } else {
 alert('验证码错误')
 div[0].innerHTML = ranFun(1000, 9999);
 inp.value = ""
 }
 }

 function ranFun(a, b) {
 return Math.floor(Math.random() * (b - a + 1) + a)
 }
 </script>
</body>

</html>

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

赞 (0)

相关推荐

  • AngularJS 实现点击按钮获取验证码功能实例代码

    html :样式采用了sui框架的样式,请自行引入查看,AngularJS,自己引入, <div ng-controller="forGetPassword" ng-app="routingDemoApp"> <form novalidate name="forget"> <header class="bar bar-nav"> <a href="javascript:his

  • js点击文本框后才加载验证码实例代码

    经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的.而是在点击验证码输入框之后才会显示出来验证码的.下面作者也总结了一篇关于如何利用js实现点击文本框然后再加载验证码的效果的. 废话不多说了,下面是具体的实现代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title

  • JavaScript点击按钮生成4位随机验证码

    JavaScript点击按钮生成4位随机验证码

    本文实例为大家分享了js实现点击按钮生成4位随机验证码的具体代码,供大家参考,具体内容如下 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&

  • javascript点击才出现验证码

    alert('请输入验证码!');history.go(-1);" Session("GetCode")=empty response.End() elseif lcase(code)lcase(Session("GetCode")) then response.write "alert('您输入验证码出错!');history.go(-1);" Session("GetCode")=empty response.E

  • JS实现点击发送验证码 xx秒后重新发送功能

    用于一些注册类的场景,点击发送验证码,xx秒后重新发送. 利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<scrip

  • js实现点击获取验证码倒计时效果

    js实现点击获取验证码倒计时效果

    网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

  • JavaScript实现点击切换验证码及校验

    JavaScript实现点击切换验证码及校验

    本文实例为大家分享了JavaScript实现点击切换验证码及校验的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 40px; background-color: red; color: #ff

  • vue3.0实现点击切换验证码(组件)及校验

    本文实例为大家分享了vue3.0实现点击切换验证码(组件)及校验的具体代码,供大家参考,具体内容如下 先看效果 父组件 <template> <div class="login"> <van-field center clearable label="验证码" placeholder="输入验证码" v-model="verify" > <template #button> &l

  • JavaScript实现点击切换功能

    JavaScript实现点击切换功能

    本文实例为大家分享了JavaScript实现点击切换功能的具体代码,供大家参考,具体内容如下 在实际应用中,点击或者移入某一元素上,弹出下拉菜单或者页面,是网页设计的常见操作. 下面我们实现一种点击菜单实现菜单切换,使用js提供三种方式实现该功能. 1.使用html设计基本结构 <body> <h2>多Tab点击切换</h2> <ul id="tab"> <li id="tab1" value="1&q

  • JavaScript实现随机生成验证码及校验

    JavaScript实现随机生成验证码及校验

    本文实例为大家分享了JavaScript实现随机生成验证码及校验的具体代码,供大家参考,具体内容如下 输入验证码(区分大小写)点击确认,进行校验.出错就弹框提示 点击 看不清 重新随机生成验证码 当验证码输入错误时进行提示 <body> <div class="v_code"> <div class="code_show"> <span class="code" id="checkCode&qu

  • JavaScript实现点击按钮切换网页背景色的方法

    JavaScript实现点击按钮切换网页背景色的方法

    本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript用按钮随意变换背景颜色,每点击一下按钮,就可以随机改变一种网页背景颜色.颜色值事先是保存在JS的数组里,你在代码里会发现他们,若不想要某个颜色,就替换掉即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/ 具体代码如下: <!DOCTYPE HTML

  • JavaScript实现点击文字切换登录窗口的方法

    本文实例讲述了JavaScript实现点击文字切换登录窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款动画切换层窗口的特效,点击不同的登录用户会切换到不同的登录窗口,窗口内的内容可以是不一样的,是比较实用的一款代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JAVASC

  • JavaScript 实现 Tab 点击切换实例代码

    JavaScript 实现 Tab 点击切换实例代码

    Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换.滑动切换.延迟切换.自动切换等多种效果,在这篇博文里,我们是通过原生 JavaScript 来实现 Tab 点击切换的效果 1. 功能实现 html 部分 <button style="background-color:#f60; color: #fff;">按钮1</button> <button>按钮2</button> <button>按钮3<

  • JavaScript实现多个重叠层点击切换效果的方法

    本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • 使用JavaScript实现点击循环切换图片效果

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <script> var i = 1; function nextImg(){ i++; //步骤2:获取页面元素 var next = document.getElementById("

  • JavaScript实现的开关灯泡点击切换特效示例

    本文实例讲述了JavaScript实现的开关灯泡点击切换特效.分享给大家供大家参考,具体如下: 准备 首先要准备两张图片,一张是灯泡亮的图片,取名为on.jpg,另一张是灭的图片,取名为off.jpg,都放置到当前的目录下. 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont

随机推荐