欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

分享一个注册页面,点击更换验证码的代码实现

程序员文章站 2022-03-02 10:57:00
分享一个注册页面,点击更换验证码的代码实现

分享一个注册页面,点击更换验证码的代码实现

<!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
-->