HTML
——————————————————————————————————————————————
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪验证码</title>
<link rel="stylesheet" href="../css/Job08_08_03.css" type="text/css">
</head>
<body>
<div>
<!--文本框及按钮-->
<label>
<input type="text" value="" placeholder="输入验证码" id="tex"><br>
<input type="button" value="提交" onclick="subm()">
<small>区分大小写，点击验证码刷新</small>
</label>
<!--验证码-->
<div id="verDiv" onclick="refresh()"></div>
</div>
<script type="text/javascript" src="../js/Job08_08_03.js"></script>
</body>
</html>
 CSS
——————————————————————————————————————————————
/*文本按钮样式区域*/
label{
float: left;
}
/*验证码样式区域*/
div>div{
width: 100px;
height: 23px;
float: left;
margin-left: 10px;
padding: 2px;
color: red;
letter-spacing: 3px;
}
 JavaScript
—————————————————————————————————————————————— 
//获取验证码标签
var verDiv = document.getElementById("verDiv");
//页面载入验证码
verDiv.innerHTML=verify();
//验证码提交入口
function subm() {
//获取文本框内容
var tex = document.getElementById("tex");
// var tex1 =tex.value;
if(tex.value==verDiv.innerHTML){
alert("恭喜，验证成功。");
}else {
alert("请输入正确的验证码！");
//错误重新生成验证码
var newVer =verify();
verDiv.innerHTML = newVer;
}
}
// 随机获取6位验证码方法
function verify() {
//声明包含0-9,A-z的数组
var arr=['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z', 'a', 'b', 'c', 'd', 'e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
//存放验证码
var ver="";
//取数组六位随机元素
for(i=0;i<6;i++){
var num=parseInt(Math.random()*arr.length);
ver += arr[num];
}
return ver;
}
//验证码刷新入口
function refresh(){
var newVer =verify();
verDiv.innerHTML = newVer;

伪验证码（含随机验证码方法）js+css的更多相关文章

  1. Django---登录（含随机生成图片验证码）、注册示例讲解

    登录(验证码).注册功能具体代码 # urls.py from django.contrib import admin from django.urls import path from app01 ...

  2. Django登录(含随机生成图片验证码)注册实例

    登录,生成随机图片验证码 一.登录 - 随机生成图片验证码 1.随机生成验证码 Python随机生成图片验证码,需要使用PIL模块,安装方式如下: pip3 install pillow 1)创建图片 ...

  3. js用正则表达式验证用户和密码的安全性，生成随机验证码

    制作了一个表单,表单验证用户.密码.随机验证码 html页面

  4. python的内置模块random随机模块方法详解以及使用案例（五位数随机验证码的实现）

    1.random(self): Get the next random number in the range [0.0, 1.0) 取0到1直接的随机浮点数 import random print( ...

  5. js随机生成验证码以及随机颜色

    Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...

  6. js随机验证码

    随机验证码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  7. python笔记-20 django进阶 （model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）

    一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...

  8. php实现动态随机验证码机制（CAPTCHA）

    php实现动态随机验证码机制 验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computers and Humans Ap ...

  9. Django框架登录验证及产生随机验证码的实例

    1:views视图代码 # 登录验证 def login(request): # 使用ajax请求可以使用判断 # if request.is_ajax(): if request.method == ...

随机推荐

  1. SQL 中 decode()函数

    文本转自 FreeSpider的微博 今天看别人的SQL时看这里面还有decode()函数,以前从来没接触到,上网查了一下,还挺好用的一个函数,写下来希望对朋友们有帮助哈! decode()函数简介: ...

  2. Unrooted Tests错误

    使用Junit4做测试,遇到如下问题: 条件如下: Eclipse里的Maven工程. 使用JUnit4(这个是否必须不知,反正我的工程用的4) 修改某个Test类里的方法名,或者增加一个Test方法 ...

  3. if else 与switch case判断

    基础数据类型(四类八种 ) 不能为null. 整数型 byte 取值范围2的8次方 short 取值范围2的16次方 int 取值范围2的32次方 一般用int long 取值范围2的64次方 浮点型 ...

  4. 2-用EasyNetQ连接RabbitMQ(黄亮翻译)

    如果你连接过关系数据库,例如SQL Server.你会发现EasyNetQ处理connections有点奇怪.和关系数据库通讯一直都是通过client开始的.Client 打开一个连接, 发出一个SQ ...

  5. hdu 3926 hands in hands

    https://vjudge.net/problem/HDU-3926 题意:有n个小朋友,他们之间手拉手,但是一只手只能拉一只手或者不拉,现在给出两个图,表示拉手关系,问这两个图是否同构.思路:一开 ...

  6. 针对Oracle数据库中SCOTT方案的多表查询一个例子

    查询出每个员工的姓名.职位.月薪.所属部门名.月薪等级及其领导的姓名.职位.所属部门名.月薪等级.select e.ename 员工姓名,e.job 员工职位,e.sal 员工月薪,d.dname 员 ...

  7. 使用JavaScript开发跨平台的桌面应用

    任何可以使用JavaScript来编写的应用,最终会由JavaScript编写.--Atwood定律 Atwood's Law是Jeff Atwood在2007年提出的:"any appli ...

  8. （转）CentOS 7.0关闭默认防火墙启用iptables防火墙

    场景:在本地虚拟机上使用ftp软件需要进行相应的端口设置,不可避免要访问Cnetos的防火墙,默认firewall操作不方便,所以需要进行相应的替换. 1 配置防火墙,开启80端口.3306端口 1. ...

  9. [javascript] visible － 待写

    摘要 jquery 有个筛选器 visible , 一般用于选择 可见元素 $('p:visible') 就是选择可见的 p 元素. 但发现有时候不可用.!!

  10. 阿里云服务器Windows Server 2008/2012部署Office Web Server 2013

    以前成功将Office Web Server 2013部署在了本地服务器上,此次是将Office Web Server 2013部署在阿里云服务器Windows Server 2008和2012上,中 ...