Javascript通过Math.random()随机生成验证码。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机验证码</title>
<style>
.p1{
width:100px;
height:30px;
border:1px solid black;
}
</style>
</head>

//onload页面加载完成后立即触发函数
<body onload="sj()">
<input class="p1">
<p style="font-size:30px;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</input>

//通过onlick（点击事件）触发函数
<button style="width:80px;height:30px;" onclick="sj()">换一波</button>

//引入js外部文件（封装函数）
<script type="text/javascript" src="../js/sj_fzhs.js"></script>
<script type="text/javascript">
//定义随机字符串
var array="1234567890ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwsyz";

//获取到span标签
var span=document.getElementsByTagName('span');

//定义一个函数
function sj(){
var code="";

//进行for循环
for(var i=0;i<=6;i++){

//首先随机数组的长度
var zm=parseInt(Math.random()*array.length);

//然后取出随机数组中的真正的值

code=array[zm];

//将上面取到的<span>元素通过innerHTML赋值给code
span[i].innerHTML=code;

//最后随机出的值通过style.color赋予随机颜色,这里我用到了一个封装函数randomColor()

span[i].style.color=randomColor();
}
}
</script>

</body>
</html>

//封装函数（随机颜色）

function randomColor(){
var r=parseInt(Math.random()*256);
var g=parseInt(Math.random()*256);
var b=parseInt(Math.random()*256);
var rgb="rgb("+r+","+g+","+b+")";
return rgb;
}

//效果图如下：

js随机生成验证码以及随机颜色的更多相关文章

  1. 随机生成验证码（JS）

    效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所 ...

  2. Python随机生成验证码的两种方法

    Python随机生成验证码的方法有很多,今天给大家列举两种,大家也可以在这个基础上进行改造,设计出适合自己的验证码方法方法一:利用range Python随机生成验证码的方法有很多,今天给大家列举两种 ...

  3. Android锁定EditText内容和随机生成验证码

    昨天写了个小Demo,实现了随机生成验证码,和锁定EditText两个小功能,先看一下效果图: 锁定EditText在我们不须要用户编辑EditText内容的时候能够用到,实现还是非常easy的,一行 ...

  4. 随机生成验证码及python中的事务

    1.随机生成验证码 # import random # print(random.random()) #-1的小数 # print(random.randint(,)) #包括1和3 # print( ...

  5. js随机生成验证码及其颜色

    今天迎来了2018年第一场雪,这个美好的日子,总的写点什么纪念一下,在这里写了一个在js中使用Math.random()函数,随机生成四位数的验证码及其验证码换颜色. js代码如下: var arra ...

  6. php随机生成验证码代码

    <?php session_start(); //产生一个随机的字符串验证码 $checkcode=""; for ($i=0;$i<4;$i++){ $checkco ...

  7. Django随机生成验证码图片

    PIL简介 什么是PIL PIL:是Python Image Library的缩写,图像处理的模块.主要的类包括Image,ImageFont,ImageDraw,ImageFilter PIL的导入 ...

  8. Djaingo 随机生成验证码(PIL)

    基础: https://www.cnblogs.com/wupeiqi/articles/5812291.html 实例: https://www.cnblogs.com/6324TV/p/88112 ...

  9. .Net (MVC) 随机生成验证码

    以前一直对C#的GDI画图部分知识点不怎么用所以忘得差不多了,这两天正好公司要做一个博客系统,其中一个需求就是留言时为了防止恶意攻击必须填写验证码,正好借着这个机会复习了一下,以下是实现代码,写的比较 ...

随机推荐

  1. 亮剑.NET学习札记

    学习前提要: 因为书的版本过老,有些章节不学了,要学的包括以下章节 暂定:1,2,4,5,6,7,9,10,11,12,13,14,15,16,17,18,附录A 第一章:主要是介绍.NET,包括面向 ...

  2. CDH5.16.1离线集成Phoenix

    1.安装环境 Centos 7.6 CDH 5.16.1 2.下载Phoenix所需的parcel包 3.上传parcel包到ClouderaManager server所在的节点上 /opt/clo ...

  3. 关于SP优化

    SET STATISTICS PROFILE ON;SET STATISTICS TIME ON;SET STATISTICS IO ON;--打开三个开关SET STATISTICS PROFILE ...

  4. js屏蔽地区

    其实不需要后台代码也可以获取地区信息的,就算是后台代码,也得需要引用一些第三方库提供免费的api接口才可以,最后还是反序列化才能得到想要的数据,那干嘛不直接找,提供好json格式的api接口,拿来js ...

  5. Spring Boot + WebSocket 学习笔记

    首先需要了解一下背景,什么是WebSocket以及为什么要用WebSocket. 在常见的Web应用中,客户端与服务器通信,都是通过HTTP协议进行通信,客户端一次请求,服务端一次响应.而WebSoc ...

  6. List之ConcurrentModificationException异常

    一.前言 Java开发工作中,集合类ArrayList应该是使用非常频繁了.在使用过程中,可能会遇到迭代删除的需求场景,此时如果代码书写不当,就会抛出 java.util.ConcurrentModi ...

  7. RabbitMQ的六种工作模式总结

    最近学习RabbitMQ的使用方式,记录下来,方便以后使用,也方便和大家共享,相互交流. RabbitMQ的六种工作模式: 1.Work queues2.Publish/subscribe3.Rout ...

  8. 【linux】查看系统内存占用

    1.查看内存情况 free -h 解释下基本概念 Mem 内存的使用信息Swap 交换空间的使用信息total 系统总的可用物理内存大小used 已被使用的物理内存大小free 还有多少物理内存可用s ...

  9. 月光宝盒之时间魔法--java时间的前生今世

    月光宝盒花絮 “曾经有一份真诚的爱情摆在我的面前,但是我没有珍惜,等到了失去的时候才后悔莫及,尘世间最痛苦的事莫过于此.如果可以给我一个机会再来一次的话,我会跟那个女孩子说我爱她,如果非要把这份爱加上 ...

  10. 第八届蓝桥杯java b组第一题

    1,标题: 购物单    小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞.    这不,XX大促销又来了!老板夫人开出了长长的购 ...