脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js点击切换验证码及校验

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

 更新时间：2021年01月10日 09:08:21   作者：栋栋很优秀啊  
这篇文章主要为大家详细介绍了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>

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

您可能感兴趣的文章:

相关文章

  • JavaScript简单修改窗口大小的方法

    JavaScript简单修改窗口大小的方法

    这篇文章主要介绍了JavaScript简单修改窗口大小的方法,涉及javascript中moveTo与resizeTo方法的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 微信小程序实现多个按钮的颜色状态转换

    微信小程序实现多个按钮的颜色状态转换

    这篇文章主要为大家详细介绍了微信小程序实现多个按钮的颜色状态转换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-02-02
  • JS 实现复制到剪贴板的几种方式小结

    JS 实现复制到剪贴板的几种方式小结

    本文主要介绍了JS 实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的可以了解一下
    2025-02-02
  • JavaScript中7种位运算符在实战的妙用

    JavaScript中7种位运算符在实战的妙用

    位运算是在数字底层(即表示数字的 32 个数位)进行运算的,下面这篇文章主要给大家介绍了关于JavaScript中7种位运算符在实战的妙用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • typescript路径别名问题详解与前世今生的故事

    typescript路径别名问题详解与前世今生的故事

    我们都知道只有正确引用路径,Typescript才不会提示报错,这篇文章主要给大家介绍了关于typescript路径别名问题详解与前世今生的故事,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • layui动态设置单选按钮选中效果实例

    layui动态设置单选按钮选中效果实例

    最近在使用layui前端框架,在使用单选按钮、下拉菜单select、checkbox等控件的时候,往往遇到一些初始化的东西,下面这篇文章主要给大家介绍了关于layui动态设置单选按钮选中效果的相关资料,需要的朋友可以参考下
    2023-06-06
  • JS实现碰撞检测的方法分析

    JS实现碰撞检测的方法分析

    这篇文章主要介绍了JS实现碰撞检测的方法,结合实例形式分析了javascript碰撞检测的原理与相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • cocos2dx骨骼动画Armature源码剖析(二)

    cocos2dx骨骼动画Armature源码剖析(二)

    本篇主要给大家介绍cocos2dx骨骼动画Armature源码剖析之flash中数据与xml中数据关系，需要的朋友一起来学习吧
    2015-09-09
  • Bootstrap表格使用方法详解

    Bootstrap表格使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap表格使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js实现搜索提示框效果

    js实现搜索提示框效果

    这篇文章主要为大家详细介绍了js实现搜索提示框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09

最新评论