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. 新笔记tst

    这是测试文章 来自为知笔记(Wiz)

  2. 关于Lumen / Laravel .env 文件中的环境变量是如何生效的

    .env 文件包含默认环境变量,我们还可自定义其他任何有效的变量,并可通过  调用 env() 或 $_SERVER 或 $_ENV  来获取该变量.那么env()是如何加载到这些变量的呢?在Lume ...

  3. POJ 3126 math（BFS）

    Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 21581   Accepted: 11986 Desc ...

  4. Caused by: org.apache.catalina.LifecycleException: A child container failed during start

    错误提示: 严重: A child container failed during start java.util.concurrent.ExecutionException: org.apache. ...

  5. ES6中的Symbol类型

    前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型——Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个 ...

  6. App 组件化/模块化之路——Repository 模式

    什么是 Repository 模式 Repository 这个词直译过来仓库.仓储的意思.这个意思其实也能反应出 Repository 模式作用.App 开发中少不了对数据的操作,数据的来源可能有很多 ...

  7. RequireJs加载Codemirror，配合AngularJS的坑

    requireJS加载codemirror,并且配合angularJs一起使用的时候,高亮显示代码编辑器.要注意以下几点: 1:普通Js加载CodeMirror  代码如下: <!DOCTYPE ...

  8. global,$GLOBALS[' '] 全局, 浮动float跟margin的注意事项

    $a; global只能声明变量为全局,不能赋值,否则报错未定义:global $a; 相对于$GLOBALS['a'],写法是这样的,所有定义过的变量都存在这里: //浮动float跟margin的 ...

  9. 说一说Jquery中的empty()与remove()的区别和用法

    今天在改一个新人写的代码,好吧,我承认改代码比自己写代码要来的痛苦. 主要是在测试一个table.table中有一列是删除操作.我的删除功能是 这样的,当点击删除的时候,判断这个table中的tr行是 ...

  10. App 组件化/模块化之路——Android 框架组件(Android Architecture Components)使用指南

    面对越来越复杂的 App 需求,Google 官方发布了Android 框架组件库(Android Architecture Components ).为开发者更好的开发 App 提供了非常好的样本. ...