加入收藏 | 设为首页 | 会员中心 | 我要投稿 安阳站长网 (https://www.0372zz.cn/)- 高性能计算、分布式云、混合云存储、云计算、视频终端!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

js点击切换验证码功能怎样写?

发布时间:2022-03-24 14:05:50 所属栏目:语言 来源:互联网
导读:我们日常上网的时,登录注册账号往往都需要输入验证码,但是如果一些验证码干扰项太多,那么用户看不清,就需要有切换验证码及校验的功能,那么这要怎样做呢?下面就给大家分享js实现简单点击切换验证码的代码,需要的朋友可以参考学习。 效果: 代码: !DOC
       我们日常上网的时,登录注册账号往往都需要输入验证码,但是如果一些验证码干扰项太多,那么用户看不清,就需要有切换验证码及校验的功能,那么这要怎样做呢?下面就给大家分享js实现简单点击切换验证码的代码,需要的朋友可以参考学习。
 
       效果:
 
 
 
       代码:
 
<!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>

(编辑:安阳站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读