【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 ...
随机推荐
- 实现我博客旁边的线条效果 html canvas-nest.js 源码
canvas-nest.js 这个js文件可以用来实现炫酷的线条与鼠标进行交互的功能,具体效果如图所示 js具体源码如下: /** * Copyright (c) 2016 hustcc * Lice ...
- MVC系列——一个异常消息传递引发的思考
前言:最近在某个项目里面遇到一个有点纠结的小问题,经过半天时间的思索和尝试,问题得到解决.在此记录一下解决的过程,以及解决问题的过程中对.net里面MVC异常处理的思考.都是些老生常谈的问题,不多说, ...
- 小白的Python之路 day4 装饰器前奏
装饰器前奏: 一.定义: 1.装饰器本质是函数,语法都是用def去定义的 (函数的目的:他需要完成特定的功能) 2.装饰器的功能:就是装饰其他函数(就是为其他函数添加附加功能) 二.原则: 1. 不能 ...
- FormData自定义上传图片
由于前段时间的项目中 涉及到图纸的上传 前端大神很随意的扔给我一个页面 让我自己修修改改 找了好几个素材站都没有找到合适的上传插件 最后不得已 用formdata 写了一个 顺便记录下吧 html 代 ...
- 使用VMware安装linux虚拟机以及相关配置
前言 使用VMware安装虚拟机这个一般都知道,操作简单.而本文主要讲使用虚拟机的后续相关配置.并记录使用过程中遇到的问题以及一些技巧.本篇文章以后回持续更新的... 安装包准备 VM:12 Linu ...
- 7 Series GTP IP核使用总结 IP核配置篇
FPGA内嵌收发器相当于以太网中的PHY芯片,但更灵活更高效,线速率也在随着FPGA芯片的发展升级.本文对7系列FPGA内部高速收发器GTP IP核的配置和使用做些简单的总结,以备后续回顾重用.本文是 ...
- bzoj 2959: 长跑
Description 某校开展了同学们喜闻乐见的阳光长跑活动.为了能"为祖国健康工作五十年",同学们纷纷离开寝室,离开教室,离开实验室,到操场参加3000米长跑运动.一时间操场上 ...
- 利用VSTS跟Kubernetes进行CI/CD
准备VSTS管理环境 首先我们需要到www.visualstudio.com下申请好的VSTS账号,然后在账号下创建一个用Git作为代码管理的项目 创建好项目后我们就可以利用git clone将代码库 ...
- IT服务(运维)管理实施的几个要点--第一章 IT服务质量的标准
子曰"干的最好就是个60分,稍有纰漏就是不及格" 谈一个事情,最先要谈的就是统一标准,又或者这个标准已经约定俗成,广泛认可,所以就可以略过.对于IT服务质量来说,确实有一个统一的标 ...
- SpringMVC配置双数据源，一个java项目同时连接两个数据库
数据源在配置文件中的配置 请点击---> java架构师项目实战,高并发集群分布式,大数据高可用,视频教程 <pre name="code" class=" ...