继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

javascript--验证码

Rvie
关注TA
已关注
手记 20
粉丝 14
获赞 47

1.求小写字母a-z的范围随机字母

console.log(String.fromCharCode(Math.floor(Math.random()*26+97)));

解析:
这是利用了String类型的fromCharCode方法,可以把指定的unicode编码转化成字符打印输出,一共有26个字母,而本身random()方法的取值范围是0~1,加上有英语字母的个数,扩大范围到0-26的范围,就给Math.random()方法乘以26个就可以,另外的要求是必须是小写字母,根据unicode编码得知小写字母的十进制的范围是【97,122】,所以给
Math.random()*26+97就可以了,总结来的范围就是97-123。Math.floor本身有向下取整的作用,就不会取到最大的值123,正好范围【97,122】符合unicode小写字母的编码范围。

2.unicode编码范围的常见类型:
汉字 【u4e00,u9fa5】 十进制是【19968,40869】
数字【u30,u39】 十进制是【48,57】
小写字母【u61,u7a】 十进制是【97,122】
大写字母【u41,u5a】 十进制是【65,90】

3.正式说一下验证码:其本身的作用就是为了区分人和机器人的区别
如果是想做一个4个字符的验证码:

		//设定一个数组,必须包含3种:中英文和数字的数据的集合--数组
		var arr=[];
		//往里面放入中文字符,数字,字母
		//首先是中文,循环使用中文的unicode编码进行插入并且直接解码成文字的
		for(var i=20500;i<20520;i++){
			arr.push(String.fromCharCode(i));
		}
		for(var i=97;i<=122;i++){
			arr.push(String.fromCharCode(i));
		}
		console.log(arr);
		//以下同理
		for(var i=48;i<=57;i++){
			arr.push(String.fromCharCode(i));
		}
		console.log(arr);
		//重新建立新的数组
		var brr=[];
		//使用for循环随机抽取4个元素。因为是抽取4个元素,所以我们的for循环 可以进行4次循环
		for(var i=0;i<4;i++){
			brr.push(arr[Math.floor(Math.random()*(arr.length-1))]);
		}
		console.log(brr.join(""));

解析:
brr.push(arr[Math.floor(Math.random()*(arr.length-1))]);
因为下标是arr[0]开始的,到了结束就是arr.length-1结束,0~arr.length-1之间random任意选,所以直接用arr.length-1乘以random()的取值范围0-1 就可以了

4.完成了文字部分的验证码,可以做到随机图片的刷新

	<body>
		<div >
			<img src="img/pic23.jpg" id="myimg"/>
		</div>
	</body>
	<script type="text/javascript">
		var imgarr=[];
		imgarr.push("img/pic23.jpg","img/pic24.jpg","img/pic25.jpg","img/pic26.jpg","img/pic27.jpg");
		var img=document.getElementById("myimg");
		img.src=imgarr[Math.floor(Math.random()*(imgarr.length))];
	</script>

效果就是诶刷新一次就会切换一图片,只不过imgarr.length是能够刷新随机到最后一个元素的,如果不希望刷新随机到最后一个元素,就直接建议就行了。

图片描述讲到这里就结束了啦~

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP