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. Mycat在MySQL主从模式（1主1从）下读写分离和及自动切换模式的验证

    实验环境 两台Centos7  MySQL5.7.12 IP地址为:192.168.10.36  192.168.10.37 一台Centos7 Mycat IP地址为:192.168.10.31 一 ...

  2. es6知识总结--3

    es6知识总结--3 es6对咱们es3,es5的数据类型进行了升级下边说新APIs! js数据类型有Number.String .oject.Boolean.Null.Undefined六种数据类型 ...

  3. Logback 基础知识

    1.Logback使用logback 是log4j的替代者,其需要slf4j.其配置文件主要有以下三种1. logback.groovy2. logback-test.xml3. logback.xm ...

  4. 同一个sql在不同的oracle中执行时间不一样

    最近因为某些原因不得不重新配置服务器的环境,当然就是一些简单的程序运行环境,包括tomcat .oracle和其他的一些.原本觉得还蛮简单的东西,但是当我部署完成后在运行程序的过程中发现了一些隐性因数 ...

  5. 【Java IO流】File类的使用

    File类的使用 Java中的File类是在java.io.File中,Java.IO.File类表示文件或目录. File类只用于表示文件(目录)的信息(名称.大小等),不能用于文件内容的访问. 一 ...

  6. [Open Source] .NET 基于StackExchange.Redis的扩展

    目录 简介 主从复制 备份与恢复 API AddOrUpdate GetOrAdd DeleteByPattern SearchKeys TransExcute Subscribe/Publish T ...

  7. SpringMVC源码情操陶冶-AbstractHandlerExceptionResolver

    springmvc支持服务端在处理业务逻辑过程中出现异常的时候可以配置相应的ModelAndView对象返回给客户端,本文介绍springmvc默认的几种HandlerExceptionResolve ...

  8. （转）maven打包时跳过测试

    1 运行mvn install时跳过Test 1.1 方法一 <project> [...] <build> <plugins> <plugin> &l ...

  9. hadoop以及相关组件介绍以及个人理解

    前言 本人是由java后端转型大数据方向,目前也有近一年半时间了,不过我平时的开发平台是阿里云的Maxcompute,通过这么长时间的开发,对数据仓库也有了一定的理解,ETL这些经验还算比较丰富.但是 ...

  10. C++ STL 优先队列详解

    一.解释: 优先队列是队列的一种,不过它可以按照自定义的一种方式(数据的优先级)来对队列中的数据进行动态的排序,每次的push和pop操作,队列都会动态的调整,以达到我们预期的方式来存储. 例如,将元 ...