分享一个注册页面，点击更换验证码的代码实现
我要评论
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.dcenter {
text-align: center;
}
#imgcode {
width: 100px;
height: 55px;
-webkit-transition: transform 3s;
/*添加过渡效果*/
}
#imgcode:hover {
-webkit-transform: rotate(360deg);
}
</style>
</head>
<body>
<p class="dcenter"><img src="img/header.jpg" /></p>
<p>
<form action="#" method="get">
<table align="center">
<tr>
<td align="right">电子邮箱：</td>
<td><input type="text" id="input1" onfocus="select()" /></td>
</tr>
<tr>
<td align="right">会员登陆名：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">再次输入密码：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">会员身份：</td>
<td><input type="radio" name="ra" />买家<input type="radio" name="ra" />卖家<input type="radio" name="ra" />两者都是</td>
</tr>
<tr>
<td align="right">验证码：</td>
<td><input type="text" /></td>
<td><img src="img/verycode.gif" id="imgcode" /></td>
<td>
<a href="#" onmouseover="chgpic()" >看不清？换一张</a>
</td>
</tr>
<tr>
<td align="right"></td>
<td><img src="img/btn_reg.gif" /></td>
</tr>
<tr>
<td align="right"></td>
<td colspan="3"><textarea cols="50" rows="5">欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(b-to-b)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。</textarea></td>
</tr>
</table>
</form>
</p>
<p class="dcenter">
<img src="img/footer.jpg" /></p>
<script type="text/javascript">
function chgpic() {
var img = document.getelementbyid("imgcode");
img.src = "img/code.png";
}
</script>
</body>
</html>
<!--
onmouseout
onmouseover
-->
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
网友评论