随机验证码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
#auth_code{width:200px;
height:100px;
border:1px solid #ccc;
margin:200px auto 0;
text-align:center;
line-height:100px;
font-size:50px;
letter-spacing:5px;
cursor:pointer;}
</style>
</head>
<body>
<div id="auth_code" onclick="auth_code()"></div>
<script>
//验证码内需要字符个数
var num=4;
//点击更换验证码
function auth_code(){
//获取id为box元素
var box=$("auth_code");
//随机改变字符
box.innerHTML=randstr();
//获取box里span元素,并换颜色
for(var i=0;i<num;i++){
var span=box.getElementsByTagName("span")[i];
span.style.color=randcolor16();
}
}
//获取元素通过ID-----------函数-----------
function $(IdName){
return document.getElementById(IdName);
}
//字符随机选取---------------函数------------
function randstr(){
var all = ['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 words="";
for(var i=0;i<num;i++){
var word=all[parseInt(Math.random()*all.length)];
words+="<span>"+word+"</span>";
}
return words;
}
//随机颜色rgb------------函数----------------
function randcolor(){
var color= parseInt(Math.random()*255);
var color1= parseInt(Math.random()*255);
var color2= parseInt(Math.random()*255);
return "rgb("+color+","+color1+","+color2+")"
}
//随机颜色十六进制-----------函数------------------
function randcolor16(){
var color="#";
var color16num = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
for(var i=1; i<=6;i++){
color+=color16num[parseInt(Math.random()*color16num.length)]
}
return color;
}
window.onload = auth_code();
</script>
</body>
</html>

js随机验证码的更多相关文章

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

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

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

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

  3. js编写验证码

    这是一个简单的js编写的验证码,自己已经亲自验证,没有问题了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  4. canvas实现随机验证码

    canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...

  5. js简单验证码的生成和验证

    如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div> <table border="0" cellspacing="5&qu ...

  6. php实现动态随机验证码机制(CAPTCHA)

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

  7. django-生成随机验证码

    Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 1   1 pip3 install pillow 基本使用 1.创建图片 from PIL impo ...

  8. vue实现随机验证码功能

    效果图: 1.html代码 <div class="form-group" style="display: flex;"> <div> ...

  9. python笔记-20 django进阶 (model与form、modelform对比,三种ajax方式的对比,随机验证码,kindeditor)

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

随机推荐

  1. 洛谷P2482 [SDOI2010]猪国杀——题解

    猪国杀,模拟题的一颗耀眼的明珠,成长大牛.锻炼码力必写题! 模拟题没什么思维难度.只要按部就班地去做就是.模拟简单在这,难也在这.因为题面巨长,条件巨多,忽疏一点都有可能全盘皆输.故推荐考试时碰见了, ...

  2. StringTokenizer工具类的使用

    package stringtokenizer.java; import java.util.StringTokenizer; public class stringtokenizer { publi ...

  3. Spark 2.1.1 源码编译

    Spark 2.1.1 源码编译 标签(空格分隔): Spark Spark 源码编译 环境准备与起因 由于线上Spark On Yarn Spark Streaming程序在消费kafka 写入HD ...

  4. excel里面匹配部分字符的问题

                如上图所示,有两个表,前者存的是区号电话号连起来的电话号,后者存的是世界各地的区号,怎么把第一个表里分成两列,一列单独存区号,一列单独存电话号. ps:电话号码长度和区号长度都 ...

  5. Servlet的常见错误

    Servlet常见的错误: 1.404错误:资源未找到 原因一:在请求地址中的servlet的别名书写错误. 原因二:虚拟机项目名称拼写错误. 2.500错误:内部服务器错误 错误一: java.la ...

  6. 【Spark机器学习速成宝典】基础篇02RDD常见的操作(Python版)

    目录 引例入门:textFile.collect.filter.first.persist.count 创建RDD的方式:parallelize.textFile 转化操作:map.filter.fl ...

  7. 九、SpringBoot集成Thymeleaf模板引擎

    Thymeleaf咋读!??? 呵呵,是不是一脸懵逼...哥用我的大学四级英文知识告诉你吧:[θaimlif]. 啥玩意?不会音标?...那你就这样叫它吧:“赛母李府”,大部分中国人是听不出破绽的.. ...

  8. python - Tkinter 模块 - python 自带的gui模块

    Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口,位Python的内置模块,直接import tkinter即可使用. 1.创建窗口 from Tk ...

  9. Spring 初识

    一.Spring是什么? 首先可以进入Spring官网 https://spring.io/ 看一下相关介绍. Spring为开发者提供了一站式的轻量级应用开发平台.简单来说,Spring为开发者提供 ...

  10. Matlab——图形绘制——二维平面图形

    二维平面图形 hold on ————在已画好的图形上添加新的图形 plot 是绘制一维曲线的基本函数,但在使用此函数之前,我们需先定义曲线上每一点的x 及y 座标.下例可画出一条正弦曲线: > ...