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. 平板点餐软件编程体会---记我的Android编程之路

    前言 想开发一个平板点餐系统,研究下陈江根大侠分享的一个很高水准的实例,只是个单机版无实用意义. (如需运行源码请回复联系邮箱) 实现 Mysql 数据库+Tomcat WEb服务器,使用Servle ...

  2. WPF制作带明细的环形图标

    效果 明细用Popup实现的,录gif时,Popup显示不出来,不知道为什么,所以静态图凑合看吧 大体思路 图表使用Arc+Popup实现 图表分为两部分,一是环形部分,一是标注的明细部分. 环形部分 ...

  3. Java8 in action(1) 通过行为参数化传递代码--lambda代替策略模式

    [TOC] 猪脚:以下内容参考<Java 8 in Action> 需求 果农需要筛选苹果,可能想要绿色的,也可能想要红色的,可能想要大苹果(>150g),也可能需要红的大苹果.基于 ...

  4. SQl去获取相同记录

    以name字段为例 select * from table where name in(select name from table group by name having count(name)& ...

  5. 51nod_1677:treecnt

    题目是求一棵n节点树中对于C(n,k)颗子树,每棵子树为在n个节点中选不同的k个节点作为树的边界点,这样的所有子树共包含多少条边. 问题可以转化一下,对每一条边,不同的子树中可能包含可能不包含这条边, ...

  6. bzoj2038: [2009国家集训队]小Z的袜子(hose) [莫队]

    Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命……具体来说,小Z把这N只袜 ...

  7. 【SignalR学习系列】2. 第一个SignalR程序

    新建项目 1.使用VisualStudio 2015 新建一个Web项目 2.选择空模板 3.添加一个新的SignalR Hub Class (v2)类文件,并修改类名为ChatHub 4.修改Cha ...

  8. ML（1）--概念理解

    机器是如何模拟人来学习的? 人:  observations===>learning===>skill 人从出生开始经过大量的观察(也可能经过身边的的指导)进行学习然后得到相应的技能(比如 ...

  9. mongodb中limit与skip方法

    Mongodb Limit()方法 如果需要在mongodb中获取指定数量的数据记录,这时候就要用到limit()方法,该方法需要接收一个数字参数 基本语法:  DB.COLLECTION_NAME. ...

  10. html超级简单实现点赞（收藏）和取消赞效果

    1.前言 我们经常会遇到对一些列表呀进行点赞呀收藏数据等效果呀.今天就用html+css实现超级简单易上手的点赞和取消赞的demo展示. 2.详情 1.css样式 .like{ font-size:6 ...