【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 ...
随机推荐
- SignalR简单Demo
我们实现一个简单的消息通知的Demo 在NuGet中添加SignalR引用 install-package Microsoft.AspNet.SignalR 然后我们创建一个类来引用Hub类 name ...
- 对Spring与SpringMVC的理解
Spring 在我的Spring --简介及环境搭建跑通Hello提到关于Spring的基本结构与功能 SpringMVC 先上一张SpringMVC的流程图 Spring MVC 是一个模型 - 视 ...
- ABP 用swagger UI测试API报401无权限访问问题
问题描述: 当我们用swagger UI对Web API 进行测试时报401错误 我们点开GET /api/services/app/Role/GetAll,输入参数 点击Try it out!按钮, ...
- akka-stream与actor系统集成以及如何处理随之而来的背压问题
这几天上海快下了五天的雨☔️☔️☔️☔️,淅淅沥沥,郁郁沉沉. 一共存在四个api: Source.actorRef,返回actorRef,该actorRef接收到的消息,将被下游消费者所消费 ...
- php iconv 函数参数的区别
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/57 用户输入:英特尔® 酷睿™ i7处理器大显身手 case1 ...
- 平方根的C语言实现(二) —— 手算平方根的原理
版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7220506.html 作者:窗户 Q ...
- gitlab 远程 定时备份
=============================================== 2017/11/1_第2次修改 ccb_warlock 更新 ...
- Linux(CentOS6.5)下Nginx注册系统服务(启动、停止、重启、重载等)&设置开机自启
本文地址http://comexchan.cnblogs.com/ ,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢! 完成了Nginx的编译安装后,仅仅是能支持Nginx最基本的功能, ...
- 轻量级quill富文本编辑器
因为公司产品需要在移动端编辑文本,所以发现了这个轻量级的好东西,网上也没找到比较好的案例,就自己总结了下,有兴趣的直接复制代码运行看看就知道啦! 下面是quill.js的CDN加速地址: <!- ...
- PS字体倾斜、变形
整体效果: 学习地址:http://www.wzsky.net/html/Photo/psjc/psc/125890_1.html 第一步新建画布,这个大家必须会,输入文字"基"基 ...