上文讲到了验证码类的创建, 本篇博客就趁热打铁借助验证码类示例下简易的用户登录界面的实现吧.
- <!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>
- 密<span class="pl-c1"> </span>码:<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>
这里我只是简单的实现了用户的登录界面, 我仅仅抛砖引玉, 大家做练习时一定要把前端代码好好完善哦~
接下来就打开 浏览器 看看效果吧~
图若看不清怎么办呢, 点击 "看不清" 试试验证码的刷新效果吧~
代码光看不练也只是白学, 没事了大家也都上手练练~
来源: https://www.2cto.com/kf/201712/706711.html