很好对应"/>
【前端】解决用html，css，js 做”验证码“对应不上的情况，这个很好对应
文章目录
- 代码资源
- 图片资源
代码资源
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"/> <span id="code"><img src="images/1.png" alt=""/><img src="images/2.png" alt=""/><img src="images/3.png" alt=""/><imgsrc="images/4.png" alt=""/></span></li><li id="wz"><input type="button" value="看不清，换一张"/></li>
</ul>
</body>
</html>图片资源
images/
更多推荐
【前端】解决用html,css,js 做”验证码“对应不上的情况,这个很好对应
发布评论