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 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
Bootstrap table使用方法总结
May 10 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 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
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
新浪的图片新闻效果
2007/01/13 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
详解js的六大数据类型
2016/12/27 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python类属性的延迟计算
2016/10/22 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
python全栈知识点总结
2019/07/01 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
八项规定整改措施
2014/02/12 职场文书
教师师德承诺书
2014/03/26 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
初三毕业评语
2014/12/26 职场文书
客服专员岗位职责
2015/02/10 职场文书
施工安全保证书
2015/05/09 职场文书