淘宝防黑！！"/>
淘宝防黑！！
淘宝防黑！！
效果图：
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top{margin: 0 auto;width: 1000px;height: 500px;background-color: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);display: flex;/* 默认水平（本身就是水平） */justify-content: center;/* 横轴*/align-items: center;/* 纵轴 */}.login{float: right;border: 1px solid red;width: 600px;height: 300px;text-align: center;display: flex;flex-direction: column;/* 变成纵向排列 */align-items: center;/* 横轴 */justify-content: center;/* 纵轴居中 */}.login span{color: cornflowerblue;cursor:pointer;}button{width: 80px;margin-top: 20px;}</style><script>window.onload=function(){var yzmimg=document.getElementById("yzmimg");var font=document.getElementById("font");var yzm=document.getElementById("yzm");var reminder=document.getElementById("reminder");var submit=document.getElementById("submit");var yzmnumber='';var yzmhtml='';// 随机图片 封装成一个函数function showYzm(){var str='0123456789';// 每次点击清空前一次的随机数和图片yzmhtml='';yzmnumber='';for(var i=1;i<=6;i++){var position=Math.floor(Math.random()*10);yzmnumber+=str.substr(position,1);// console.log(yzmnumber);yzmhtml += "<img style='width:30px;' src='images/"+str.substr(position,1)+".gif'>";}yzmimg.innerHTML=yzmhtml;}showYzm();// 更换随机数 事件绑定也就是把函数赋值给事件对象font.onclick=showYzm;// 获取用户输入的值submit.onclick=function(){var Myval=yzm.value;// console.log(Myval,yzmnumber);if(Myval==yzmnumber){alert('验证通过');window.open('a.html');}else{reminder.innerHTML='验证码不正确';yzm.value=''; }// console.log(yzmnumber);// console.log(Myval);}}</script>
</head>
<body><div class="top"><img src="images/people.png" alt=""><div class="login"><p>发现您的网络有异常，为保证正常使用，请验证.</p><div id="yzmimg"></div><div>看不清？<span id="font">换一张</span></div><!-- <a href="javascript:;">看不清？换一个</a>空链接写法 --><div style="margin-top:30px ;">验证码：<input type="text" id="yzm" style="border:1px solid #000 ;"></div><div id="reminder"></div><button type="submit" id="submit" action="">提交</button></div></div><div class="bottom"></div>
</body>
</html>
发现您的网络有异常，为保证正常使用，请验证.
看不清？ 换一张 验证码： 提交更多推荐
淘宝防黑！！
发布评论