js实现网页随机验证码


Posted in Javascript onOctober 19, 2020

本文实例为大家分享了js实现网页随机验证码的具体代码,供大家参考,具体内容如下

1、现在全选网站为了防止用户利用机器人自动注册、登录、灌水,采用了验证码技术。所谓验证码,就是系统将一串随机产生的数字或符号,生成一幅图片,图片里加入一些千扰象素(防止OCR)的验证信息。这验证码信息由用户肉眼识别后,将其输入到表单中并提交网站验证,只有验证成功后用户才能使用系统提供的某项功能。
随机产生一个由n位数字和字母组成的验证码(本例题为4位),单击[刷新]按钮,重新产生验证码。

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>随机验证码练习</title>
<script type="text/javascript">
var s="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";//验证码中可能包含的字符
function creat(n){
 var b="";//保存生成的验证码,验证码是一个字符串类型
 for(var i=0;i<n;i++)
 { 
 var index=Math.floor(Math.random()*62)//随机产生0-62个之间随机数
 b=b+s.charAt(index);//将随机产生的数字当做字符串的下标,然后用charAt函数将它取出来然后放入b中
 }
 return b;//返回随机产生的验证码
}
function show()
{
 document.getElementById("yzm").innerHTML=creat(4);
 
};
window.onload=show;
</script>
</head>
<body>
<span id="yzm"></span>
<input type="button" value="刷新" onClick="show()">
</body>
</html>

刷新前随机码

js实现网页随机验证码

刷新后的随机码

js实现网页随机验证码

2.全选事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全选练习</title>
<script type="text/javascript">
window.onload=function()
{
 
 //将四个多选框,以及全选/全不选设置为全局变量
 var it=document.getElementsByName("ites");
 var q=document.getElementById("checkallbox");
 //全选按钮(点击按钮以后四个多选框全都被选中)
 //第一步选中事件
 var all=document.getElementById("checkall");
 //第二步绑定事件
 all.onclick=function()
 {
 
 //第三步书写事件驱动程序(设置四个多选框为选中状态)
 //遍历四个多选框
 for(var i=0;i<it.length;i++)
 {
 it[i].checked=true;//通过checked的属性来设置是否被选中(true选中,false不选)
 }
 q.checked=true;//全选后将全选/全不选设置为true
 };
 //全不选按钮(点击按钮以后四个多选框全不被选中)
 //第一步选中事件
 var no=document.getElementById("checkno");
 //第二步绑定事件
 no.onclick=function()
 {
 
 //遍历四个多选框
 for(var i=0;i<it.length;i++)
 {
 it[i].checked=false;//通过checked的属性来设置是否被选中(true选中,false不选)
 }
 q.checked=false;//全不选后将全选/全不选设置为false
 };

 //反选
 //第一步选中事件
 var fx=document.getElementById("checkreverse");
 //第二步绑定事件
 fx.onclick=function()
 {
 q.checked=true;//默认是全选/全不选是选中状态
 //遍历四个多选框
 for(var i=0;i<it.length;i++)
 {
 if(it[i].checked)
  it[i].checked=false;//如果是选中状态则改成不选中
 else
  it[i].checked=true; //否则相反(也可以if-else改写成it[i].checked=!it[i].checked)

 //判断四个多选框是否是全选,只要一个没选中就不是全选
 if(it[i].checked==false)
 {
 q.checked=false;
 
 }
 
 }
 
 };
 //提交
 var tj=document.getElementById("checksend");
 tj.onclick=function()
 {
 
 for(var i=0;i<it.length;i++)
 {
 if(it[i].checked)
  alert(it[i].value);
 }
 
 };
 q.onclick=function()
 {
 for(var i=0;i<it.length;i++)
 {
 it[i].checked=q.checked;
 }
 };
 //如果四个多选框全都被选中,则全选/全不选按钮也应该选中
 //如果四个多选框全都没被选中,则全选/全不选按钮也应该不选中
 //为四个多选框分别绑定点击响应事件
 //遍历四个多选框
 for(var i=0;i<it.length;i++)
 {
 //为四个多选框绑定点击事件
 it[i].onclick=function()
 { q.checked=true;//初始默认状态为选中状态
 for(var j=0;j<it.length;j++)
 //判断四个多选框是否是全选,只要一个没选中就不是全选
 if(it[j].checked==false)
 {
 q.checked=false;
 break;//一旦为假就退出
 
 }
 };
 }
 
};
</script>
</head>
<body>
<form method="post" action="">
你喜欢的明星有?<input type="checkbox" id="checkallbox">全选/全不选
<br/>
<input type="checkbox" name="ites" value="赵丽颖">赵丽颖
<input type="checkbox" name="ites" value="杨幂">杨幂
<input type="checkbox" name="ites" value="杨洋">杨洋
<input type="checkbox" name="ites" value="易烊千玺">易烊千玺
<br/>
<input type="button" value="全选" id="checkall">
<input type="button" value="全不选" id="checkno">
<input type="button" value="反选" id="checkreverse">
<input type="button" value="提交" id="checksend">
</form>
</body>
</html>

效果图如下(可以将每一个按钮都试一下呦)

js实现网页随机验证码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
js快速排序的实现代码
Dec 08 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
js友好的时间返回函数
Aug 24 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
解析vue中的$mount
Dec 21 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
JS实现4位随机验证码
Oct 19 #Javascript
如何编写一个 Webpack Loader的实现
Oct 18 #Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 #Javascript
vuex刷新后数据丢失的解决方法
Oct 18 #Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 #Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 #Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
XENON基于JSON变种
2010/07/27 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python3.x实现发送邮件功能
2018/05/22 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python实现反转部分单向链表
2018/09/27 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
django从后台返回html代码的实例
2020/03/11 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
PyTorch安装与基本使用详解
2020/08/31 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
普天C++笔试题
2016/03/20 面试题
入党积极分子半年考察意见
2015/06/02 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript