HTML实现获取验证码功能

最新推荐文章于 2024-06-16 23:04:02 发布

cledwyn

最新推荐文章于 2024-06-16 23:04:02 发布

阅读量3.5w

点赞数 21

分类专栏： JavaWeb 文章标签： HTML 验证码

本文链接：https://blog.csdn.net/cledwyn/article/details/88372605

版权

JavaWeb 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML实现获取验证码功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
	width: 160px;
	height: 36px;
	background-color: #f40;
	line-height: 36px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	margin: 30px auto;
	cursor: pointer;
	-webkit-user-select: none; /*禁止用户选中文字*/
}
</style>
</head>
<body>
	<div id="code_box">Af3D</div>

	<script>
    var code_box = document.getElementById("code_box");
 
    function refreshCode() {
 		
    	//62个字符 随机选择4位
        var code = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM',
            char = '',
            result = '';
 
        for (var i = 0; i < 4; i++) {
 
            //随机选择一位  （0,61） 写出0到61的随机的索引数字
            var code_index = Math.round(Math.random()*61);
            //得到随机的索引  取出随机地字符
            var char = code[code_index];
            //随机取出的字符 存在几个相同重复的问题 ，而且对于字母，不能区分大小写。
            // 避免重复的思路是：取出字符之后,和最后的result对比一下，看看里边是不是已经存在了，如果存在本次循环就终止，进行下一次
            if (result.toUpperCase().indexOf(char.toUpperCase()) > -1)
            //indexOf() == -1 说明结果里边没有要找的字符 那么 > -1 就是 里边有重复的字符
            {	
            	i --;
                //为什么会 --？ 因为如果条件成立，那么本轮循环就结束进行下一轮循环（自然i就加1了），那么本轮本应该取出的字符就没有了
                //到最后会少一个字符 缺席
                continue;//终止本轮循环 进行下一轮
            }
            result += char;
        }
        code_box.innerHTML = result;
    }
    //点击事件
    code_box.onclick = refreshCode;
</script>

</body>
</html>

在这里插入图片描述

登录界面

在这里插入图片描述

cledwyn

关注

21
点赞
踩
71

收藏

觉得还不错? 一键收藏
2
评论
HTML实现获取验证码功能

HTML实现获取验证码功能 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt;div { width: 160px; height: 36px;
复制链接

扫一扫

专栏目录