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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
JS数组的赋值介绍
Mar 10 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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与javascript的两种交互方式
2006/10/09 PHP
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHPCMS的使用小结
2010/09/20 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
css图片自适应大小
2007/11/28 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
Python多线程实例教程
2014/09/06 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Python定义函数实现累计求和操作
2020/05/03 Python
Keras实现DenseNet结构操作
2020/07/06 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
2014年党员发展工作总结
2014/12/02 职场文书
辞职信标准格式
2015/02/27 职场文书
质检员岗位职责范本
2015/04/07 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
bat批处理之字符串操作的实现
2022/03/16 Python