例1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}

#code{
font-family:Arial;
font-style:italic;
font-weight:bold;
border:0;
letter-spacing:2px;
color:blue;
}

</style>
</head>
<body>

<div>
<input type = "text" id = "input" value="" />
<input type = "button" id="code" onclick="createCode()"/>
<input type = "button" value = "验证" onclick = "validate()"/>
</div>
<script type="text/javascript">

//设置一个全局的变量,便于保存验证码
var code;
function createCode(){
//首先默认code为空字符串
code = '';
//设置长度,这里看需求,我这里设置了4
var codeLength = 4;
var codeV = document.getElementById('code');
//设置随机字符,长度为36
var random = new Array(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');
// console.log(Math.floor(0.5)) //0
// console.log(Math.floor(3.7)) //3
// console.log(Math.floor(-0.4)) //-1
// console.log(Math.floor(-3.2)) //4
// console.log(Math.random()*36)
//循环codeLength 我设置的4就是循环4次
for(var i = 0; i < codeLength; i++){
//设置随机数范围,这设置为0 ~ 36,Math.floor对数字向下舍入
var index = Math.floor(Math.random()*36);
//字符串拼接 将每次随机的字符 进行拼接
code += random[index];
}
//将拼接好的字符串赋值给展示的Value
codeV.value = code;
}

//下面就是判断是否== 的代码,无需解释
function validate(){
var oValue = document.getElementById('input').value.toUpperCase();//value.toUpperCase()把字符窜转换为大写
if(oValue ==0){
alert('请输入验证码');
}else if(oValue != code){
alert('验证码不正确,请重新输入');
oValue = ' ';
createCode();
}else{
window.open('http://www.baidu.com','_self');
}
}

//设置此处的原因是每次进入界面展示一个随机的验证码,不设置则为空
window.onload = function (){

createCode();
}

</script>
</body>
</html>

例2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
<script>
//创建一个div
var div = document.createElement("div");
//将div写入body中
document.body.appendChild(div);
//为div设置样式
div.style.width="800px";
div.style.height="400px";
div.style.position="relative";
div.style.border="1px solid red";

//div的点击事件
div.onclick = function(){
//创建一个box
var box = document.createElement("div");
//随机颜色
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
//为box设置样式
box.style.width="20px";
box.style.height="20px";
box.style.borderRadius="50%";
box.style.position="absolute";
box.style.left="0px";
box.style.top="0px";
box.style.backgroundColor="rgb("+r+","+g+","+b+")";
//将box作为div的子集写入
div.appendChild(box);
//随机一个沿着x轴移动的初始值
var speedX=parseInt(Math.random()*10+1);
console.log(speedX);
//随机一个沿着y轴移动的初始值
var speedY=parseInt(Math.random()*10+1);
console.log(speedY);

//获得当前box的left值
var nowLeft = box.offsetLeft;
console.log(nowLeft);
//获得当前box的top值
var nowTop = box.offsetTop;
console.log(nowTop);
//获得小球x轴最大的移动距离
var maxWidth=div.offsetWidth-box.offsetWidth;
console.log(maxWidth);
//获得小球y轴最大的移动距离
var maxHeight=div.offsetHeight-box.offsetHeight;
console.log(maxHeight);

//计时器进入循环
setInterval(function(){
console.log(nowLeft);
//改变小球的left值
nowLeft+=speedX;
//当小球到达最右边时,获得的速度需要变为负值
if(nowLeft>=maxWidth){
speedX=parseInt(Math.random()*10+1);
speedX=-speedX;
}
//当小球再次到达最左边的时候,获得的速度是正值
if(nowLeft<=0){
speedX=parseInt(Math.random()*10+1);
}
//为小球设置left值
box.style.left=nowLeft+"px";

//改变小球的top值
nowTop+=speedY;
//当小球到达最底部的时候,速度变成负值
if(nowTop>=maxHeight){
speedY=parseInt(Math.random()*10+1);
speedY=-speedY;
}
//当小球再次到达最顶部小球的速度为正值
if(nowTop<=0){
speedY=parseInt(Math.random()*10+1);
}
//为小球设置top值
box.style.top=nowTop+"px";

},30);

}

</script>
</html>

js生成的验证码的更多相关文章

  1. js生成验证码并验证的登录页面

    <!Doctype html> <html> <head> <meta charset="utf-8"/> <title> ...

  2. js生成[n,m]的随机数

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...

  3. 使用JS来实现验证码功能

    最近想为自己的Django博客添加验证码功能,本来想使用第三方库来实现的,不过考虑到添加第三方库对性能的影响,以及第三方库是否安全可靠的问题,还是用自己的代码来实现吧.反正用JS来实现验证码功能又不是 ...

  4. js生成[n,m]的随机数,js如何生成随机数,javascript随机数Math.random()

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...

  5. JS生成URL二维码

    需求:项目中需要在UI界面有一个二维码,扫码后可以跳转到二维码包含的URL. 解决方案:在前端用js生成一个包含URL等信息的二维码. 实现: 方案一. <!DOCTYPE HTML PUBLI ...

  6. TP引用样式表和js文件及验证码

    TP引用样式表和js文件及验证码 引入样式表和js文件 <script src="__PUBLIC__/bootstrap/js/jquery-1.11.2.min.js"& ...

  7. JS生成指定范围内的随机数(支持随机小数)

    直接需要函数的话,直接到文章的最后面找. ============================================================= 转载:https://www.cn ...

  8. 利用python生成图形验证码

    validCode.py import random from io import BytesIO from PIL import Image, ImageDraw, ImageFont def ge ...

  9. jsp中生成的验证码和存在session里面的验证码不一致的处理

    今天在调试项目的时候发现,在提交表单的时候的验证码有问题,问题是这样的:就是通过debug模式查看得知:jsp页面生成的验证码和表单输入的页面输入的一样,但是到后台执行的时候,你会发现他们是不一样的, ...

随机推荐

  1. loj2353. 「NOI2007」 货币兑换

    loj2353. 「NOI2007」 货币兑换 链接 https://loj.ac/problem/2353 思路 题目不重要,重要的是最后一句话 提示 输入文件可能很大,请采用快速的读入方式. 必然 ...

  2. [CodeForces 1141A] Game 23

    题目链接:http://codeforces.com/problemset/problem/1141/A 首先,nn一定要是mm的倍数.否则就无法转换,输出-1: 然后令k=.\frac{m}{n} ...

  3. requests SSLError: hostname 'ccc.xxx.com' doesn't match '*.b0.upaiyun.com'

    证书不匹配问题 1.对于python自带的 urllib库  解决办法 import ssl ssl.match_hostname = lambda cert, hostname: True 2. 对 ...

  4. 揭示牌面使之升序 Reveal Cards In Increasing Order

    2019-03-27 14:10:37 问题描述: 问题求解: 模拟题.考虑角度是从结果来进行反推. input - [2,3,5,7,11,13,17] (just sort the input t ...

  5. Cookiecutter 使用

    1.需求 ①make ②gcc 4.7以上 ③python2.7 应用于Linux/Unix 或者OS X 系统 2.安装 ①减压缩 ②git clone http://github.com/ad30 ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 扩展编辑器

    jQuery EasyUI 数据网格 - 扩展编辑器 一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据. 所有的编辑器(editor)都定义在 $.fn.datag ...

  7. html缓存控制

  8. HDU4609 计数问题+FFT

    题目大意: 给出n(1e5)条线段(长度为整数,<=1e5),求任取3条线段能组成一个三角形的概率. 用cnt[i]记录长度为i的线段的个数,通过卷积可以计算出两条线段长度之和为i的方案数sum ...

  9. 颜色(color)透明

    颜色写法: 1.英文单词 backgroud-color:red: 2. #fff background-color:#fff; 3.#fefefe background-color:fefefe; ...

  10. 分布式监控系统(类zabbix)

    目录: 为什么要做监控? 监控系统业务需求分析: 监控系统架构设计: 监控系统表结构设计: 一.为什么要做监控系统? 市面上已经有很多成熟的监控系统,例如zabbix.nagios,为什么自己开发监控 ...