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


Posted in Javascript onJanuary 10, 2021

本文实例为大家分享了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 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
javascript hashtable实现代码
Oct 13 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
jquery密码强度校验
Dec 02 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
JavaScript canvas实现雨滴特效
Jan 10 #Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
利用JS判断元素是否为数组的方法示例
Jan 08 #Javascript
JS实现页面侧边栏效果探究
Jan 08 #Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
详解Typescript里的This的使用方法
Jan 08 #Javascript
You might like
PHP中文汉字验证码
2007/04/08 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
python3获取当前目录的实现方法
2019/07/29 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
广告学毕业生求职信
2014/01/30 职场文书
创业大赛策划书
2014/03/01 职场文书
保护环境建议书100字
2014/05/13 职场文书
中华魂演讲稿
2014/05/13 职场文书
毕业生求职信
2014/06/10 职场文书
应用心理学专业求职信
2014/08/04 职场文书
节约用水广告语60条
2019/11/14 职场文书