【JavaScript随机生成验证码及其颜色】
css样式： <style type="text/css">
/*给验证码设一个盒子*/
#yzm{
width: 120px;
height: 50px;
text-align: center;
background: #ccc;
float: left;
}
span{
font-size: 20px;
line-height: 50px;
}
/*按钮*/
button{
width: 100px;
height: 50px;
}
</style>
html代码： <body onload='yanzhengma()'>
<!--在页面加载时就执行这个函数-->
<div id="yzm">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!--点击事件-->
<button onclick="yanzhengma()">刷新</button>
</body>
js代码： <script type="text/javascript">
//先写出一些需要随机的数字及字母
var shu = ('1234567890qwertyuioplkjhgfdsazxcvbnmQAZWSXEDCRFVTGBYHNUJMIKOLP');
//获取span
var span = document.getElementsByTagName("span");
//定义一个函数为yanzhengma()
function yanzhengma(){
var yzm=" ";
//想要几个循环几个数值
for(i=0;i<4;i++){
//随机Math.random()出的值乘以数组的长度，取出的值为数组的下标
var num = parseInt(Math.random() * shu.length);
//取出shu中的值,利用上面取出的下标num,此时取出的是数组中的值
yzm = shu[num];
//把随机取到的值通过innerHTML在页面上
span[i].innerHTML=yzm;
//把随机出的值通过style.color赋予颜色 ，Color()是自己封装的一个随机颜色函数
span[i].style.color=color();
}
}
</script>
颜色封装的代码： /*封装Color*/
function color(){
var color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
return color;
} 注意：封装在写完的时候千万千万记住要把它引入HTML中！！
效果：
【JavaScript随机生成验证码及其颜色】的更多相关文章
- js随机生成验证码及其颜色
今天迎来了2018年第一场雪,这个美好的日子,总的写点什么纪念一下,在这里写了一个在js中使用Math.random()函数,随机生成四位数的验证码及其验证码换颜色. js代码如下: var arra ...
- js随机生成验证码以及随机颜色
Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...
- JavaScript随机生成颜色以及十六进制颜色 与RGB颜色值的相互转换
/** * 随机生成颜色 * @return 随机生成的十六进制颜色 */ function randomColor(){ var colorStr=Math.floor(Math.random()* ...
- 随机生成验证码（JS）
效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所 ...
- Python随机生成验证码的两种方法
Python随机生成验证码的方法有很多,今天给大家列举两种,大家也可以在这个基础上进行改造,设计出适合自己的验证码方法方法一:利用range Python随机生成验证码的方法有很多,今天给大家列举两种 ...
- Android锁定EditText内容和随机生成验证码
昨天写了个小Demo,实现了随机生成验证码,和锁定EditText两个小功能,先看一下效果图: 锁定EditText在我们不须要用户编辑EditText内容的时候能够用到,实现还是非常easy的,一行 ...
- 随机生成验证码及python中的事务
1.随机生成验证码 # import random # print(random.random()) #-1的小数 # print(random.randint(,)) #包括1和3 # print( ...
- 使用JavaScript随机生成数字混合字母的验证码
<script> // 封装一个随机生成数字的函数 function random(a, b) { var n = Math.round(Math.random() * (a - b) ...
- php随机生成验证码代码
<?php session_start(); //产生一个随机的字符串验证码 $checkcode=""; for ($i=0;$i<4;$i++){ $checkco ...
随机推荐
- lua中怎么替换掉字符串中的$^特殊字符？
Lua 常规替换字符串如何替换 s = string.gsub("Lua is good", "good", "bad") print(s) ...
- mongodb命令行基础语法
首先是安装并配置mongodb,这个请自行百度,安装完成后打开cmd命令输入mongo.我们现在先做一个例子吧,假设有一个班级叫c1,里面有若干个人,里面的人有姓名.年龄.性别和班级,我们分别对他们进 ...
- Java I/O---添加属性和有用的接口—FilterlnputStream&FilterOutputStream
0.装饰器模式 Java I/O类库需要多种不同功能的组合,这正是使用装饰器模式的理由所在.这也是Java I/O类库里存在filter(过滤器)类的原因所在,抽象类filter是所有装饰器类的基类. ...
- Oracle数据库中插入日期型数据（to_date的用法）(转载)
往Oracle数据库中插入日期型数据(to_date的用法) INSERT INTO FLOOR VALUES ( to_date ( '2007-12-20 18:31:34' , 'YYY ...
- ADG监控
cx_Oracle环境配置 export ORACLE_BASE=/u01/app/oracle export ORACLE_HOME=$ORACLE_BASE/product/11.2.0/db_1 ...
- 1.Nginx服务应用
Nginx服务应用 Nginx的优点和作用 Nginx是一款高性能的HTTP和反向代理的服务器软件,还是一个IMAP/POP3/SMTP(邮件)代理服务器! Nginx在功能实现上都采用模块化结构设计 ...
- Extjs 取消backspace事件
Ext.getDoc().on('keydown',function(e){ if(e.getKey() == 8 && e.getTarget().type =='text' &am ...
- 在vim中使用zencoding/Emmet
zencoding在vim上的插件已经改名为Emmet.vim 1. 安装,推荐使用vundle插件管理器安装,在~/.vimrc中,添加:Bundle 'Emmet.vim',输入命令vim +Bu ...
- Jenkins 学习笔记（三）：我们的JAVA 项目是这么发布的
发布拓扑 1. 拓扑图 2. 流程说明: Git 插件从 Git Server 上面拉取源代码. Maven 插件将源代码安装我们设定的指令进行编译打包,存放于项目的 WorkSpace. Publi ...
- Netty之ProtoBuf(六)
Protocol Buffer的基本使用(六) 一.简介 Protocol Buffer(简称ProtoBuf)是google的一个语言中立,平台中立,可扩展的对结构化的数据进行序列化的一种机制,和X ...