【前端】解决用html，css，js 做”验证码“对应不上的情况，这个很好对应

最新推荐文章于 2024-03-19 09:02:10 发布

小源同学r

最新推荐文章于 2024-03-19 09:02:10 发布

阅读量838

点赞数

分类专栏： web前端文章标签：其他 js css html 验证码

本文链接：https://blog.csdn.net/qq_43216714/article/details/121635422

版权

web前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

- - 代码资源
  - 图片资源

代码资源

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图形随机验证码</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
			background: #4b6cb7;  /* fallback for old browsers */
			background: -webkit-linear-gradient(to right, #182848, #4b6cb7);  /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to right, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
			font-size: 24px;
        }

        ul {
            width: 756px;
            margin: 100px auto;
            clear: both;
        }

        ul li {
            float: left;
            width: 250px;
            height: 100px;
            line-height: 100px;
            border: 1px solid #ccc;
            text-align: center;
        }

        span {
            display: inline-block;
            vertical-align: middle;
        }

        #wz {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var wz = document.getElementById("wz");
            var num;//随机数字
            var pic = "";//随机图片路径
            wz.onclick = function () {
                var img = "";
                for (var i = 0; i < 4; i++) {
                    num = Math.floor(Math.random() * 10);
                    pic = "<img src='images/" + num + ".png' />";
                    img = img + pic;
                }
                var oCode = document.getElementById('code');
                oCode.innerHTML = img;
            }
        }
    </script>
</head>
<body>
<ul>
    <li>验证码</li>
    <li><input name="textfield" type="text" id="textfield" size="10" style="height:35px; vertical-align:middle"/> &nbsp;
        <span id="code">
			<img src="images/1.png" alt=""/><img src="images/2.png" alt=""/><img src="images/3.png" alt=""/><img
                src="images/4.png" alt=""/>
		</span>
    </li>
    <li id="wz"><input type="button" value="看不清，换一张"/></li>
</ul>
</body>
</html>

图片资源

images/

在这里插入图片描述

小源同学r

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端】解决用html，css，js 做”验证码“对应不上的情况，这个很好对应

文章目录代码资源图片资源代码资源index.html<!doctype html><html><head> <meta charset="utf-8"> <title>图形随机验证码</title> <style type="text/css"> * { margin: 0; padding: 0;
复制链接

扫一扫