验证码类的使用之登录界面的实现

上文讲到了验证码类的创建,本篇博客就趁热打铁借助验证码类示例下简易的用户登录界面的实现吧.

先附上上篇博客的链接:http://blog.csdn.net/striner/article/details/78850629

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
<script type="text/javascript">
	function changeCode() {
		var img = document.getElementsByTagName("img")[0];   //得到图片元素
		//img.setAttribute("src","/test2/test/captcha");  //XML Dom语法
		img.src = "/test2/captcha?time="+new Date().getTime();
	}
</script>
</head>
<body>
	<form action="#" method="post">
		用户名:<input type="text" name="username"/><br>
		密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"/><br>
		验证码:<input type="text" name="code"/><br>
		<img src="/test2/captcha" onclick="changeCode()"/><a href="javascript:changeCode()">看不清</a><br>
		<input type="submit" value="登录"/><br>
	</form>
</body>
</html>

这里我只是简单的实现了用户的登录界面,我仅仅抛砖引玉,大家做练习时一定要把前端代码好好完善哦~

接下来就打开浏览器看看效果吧~

验证码类的使用之登录界面的实现

图若看不清怎么办呢,点击"看不清"试试验证码的刷新效果吧~

验证码类的使用之登录界面的实现

代码光看不练也只是白学,没事了大家也都上手练练~

博客的内容到这里就结束了,最后的最后,求赞求关注哦~~

秒客网

验证码类的使用之登录界面的实现

相关文章