使用原生js实现简单的验证码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<style>
#imgy{
width:80px;
height:30px;
border-radius: 5px;
border: 0;
background:url('/imag/yzm.png') no-repeat ;
background-size: 100% 100%;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: bold;
outline: none;
}
</style>
<body>
<div style="width: 300px;height: 350px;margin: 100px auto">
<form action="zhuce" method="post">
<span>账号：</span><input type="text" name="na"><br>
<span>验证码：</span><input style="width: 60px" type="text" name="yz">
<input id="imgy" name="sjs" readonly placeholder="验证码"><br>
<span>输入密码：</span><input type="text" name="pw"><br>
<span>再次输入密码：</span><input type="text" name="apw"><br>
<input type="submit" value="注册"> <a href="login">取消</a>
</form>
<script type="text/javascript">
window.onload = function () {
var str = "0123456789AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
var nu = 0;
var im = document.getElementById("imgy");
sj();
im.onclick = function () {
sj();
};
function sj() {
var s = "";
for (let i = 0; i < 4; i++) {
nu = Math.floor(Math.random() * 62);
s = s.concat(" ", str.charAt(nu));
}
im.value = s;
}
};
</script>
</div>
</body>
</html>