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

最新推荐文章于 2023-11-24 11:28:57 发布

原创最新推荐文章于 2023-11-24 11:28:57 发布 · 2.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

## java

## 前端

===== J2EE =====

本文延续上篇博客，通过验证码类展示如何实现一个简单的用户登录界面。读者可以查看提供的链接复习上篇内容，并在浏览器中查看登录界面的实际效果。文章鼓励读者亲自实践代码，提升技能。同时，提供了git代码链接供参考。

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

先附上上篇博客的链接: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>

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

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