为了账号安全,请及时绑定邮箱和手机立即绑定

javascript--验证码

标签:
JavaScript

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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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是能够刷新随机到最后一个元素的,如果不希望刷新随机到最后一个元素,就直接建议就行了。

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

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消