您现在的位置：首页 >> 前端 >> 内容

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

时间：2017/12/21 10:31:07 点击：

　　核心提示：上文讲到了验证码类的创建,本篇博客就趁热打铁借助验证码类示例下简易的用户登录界面的实现吧.!DOCTYPE htmlhtmlheadmeta charset=UTF-8titlelogin/title...

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

<!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">&nbsp;&nbsp;&nbsp;</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>

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

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

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