记住密码

yangtjh

于 2016-06-24 13:57:39 发布

阅读量390

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/yangtjh/article/details/51752238

版权

前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

记住密码，，保存在cookie中，，，，

<style>

<pre name="code" class="html">.loginBg{background: url("../images/loginBg.jpg") no-repeat center/cover;}
.service_login{background: url("../images/loginBoxBg.png") no-repeat center;position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
.loginTextBox{width: 678px;height:308px;position: absolute;left:0;top:0;right:0;bottom:0;margin:auto;}
.loginTextBox .content_top{width: 678px;height:50px;position: absolute;top:-20%;left:50%;margin-left: -349px;text-align: center}
.loginTextBox .content_top img{display: inline-block;vertical-align: middle;}
.loginTextBox .content_top span{display: inline-block;vertical-align: middle;font-size: 24px;color: #fff;}
.loginTextBox .login_lf{width:220px;height:308px;float: left;}
.loginTextBox .login_lf img{display: block}
.loginTextBox .login_lf img.login_lf02{width: 88%;margin: 40px auto 0;}
.loginTextBox .login_rt{width:455px;height:270px;padding:0 58px;float: left;}
.loginTextBox .login_rt .user_login{margin-top: 30px;width: 100%;display: inline-block;}
.loginTextBox .login_rt .user_login span{color:#4e677e;font-size: 22px;float:left;line-height: 24px;}
.loginTextBox .login_rt .user_login span.user_ul{color:#3b95c8;font-size: 18px;float:left;line-height: 18px;margin:6px 0 0 10px;}
.loginTextBox .login_rt .login_input.js_user,.loginTextBox .login_rt .loginTextList{width: 100%;margin-top: 25px;;position: relative;}
.loginTextBox .login_rt .login_input.js_user,.loginTextBox .login_rt .loginTextList i{position:absolute;left:5px;top:11px;z-index: 2;}
.loginTextBox .login_rt .login_input.js_user,.loginTextBox .login_rt .loginTextList .st{border: 1px solid #c9c8c8;
    border-radius:2px;text-indent: 30px;display: block;width: 100%;line-height: 46px;height: 46px;font-size:14px;}
.loginTextBox .login_rt .login_btn,.loginTextBox .login_rt .login_count,.loginTextBox .login_rt .login_pwd{
    display: inline-block;width:90px;height:35px;line-height: 35px;margin-left: 5px;}
.loginTextBox .login_rt .login_btn a{color:#fff;padding:6px 30px;background: #3e96c9;border-radius: 3px;font-size: 15px;}
.loginTextBox .login_rt .login_count input{vertical-align: middle;margin-left: 10px;}
.loginTextBox .login_rt .login_count input.chec{position: relative;top:-1px;}
.loginTextBox .login_rt .login_count .login_pass,.loginTextBox .login_rt .login_pwd a{color:#667A9D;font-size: 12px;}

</style>

</pre><pre code_snippet_id="1728216" snippet_file_name="blog_20160624_1_4103832" name="code" class="html"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>客服管理系统登录</title>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body class="loginBg">
<div class="service_login">
    <div class="loginTextBox">
        <div class="content_top">
            <img src="images/login_logo.png" alt=""/>
            <span>客服管理系统</span>
        </div>
        <div class="login_lf">
            <img class="login_lf02" src="images/login_lf02.png" alt=""/>
        </div>
       <div class="login_rt">
            <form>
                <div class="user_login"><span>用户登录</span><span class="user_ul"> UserLogin</span></div>
                <div class="loginTextList"><i class="icon iconUserText"></i><input class="st js_userName" maxlength="20" type="text" placeholder="请输入用户名"/></div>
                <div class="loginTextList"><i class="icon iconUserPsd"></i><input class="st js_userCode" maxlength="20" type="password" placeholder="密码"/></div>
                <div class="loginTextList">
                    <p class="login_btn"><a href="javascript:;" class="js_loginBtn">登录</a></p>
                    <p class="login_count"><input class="chec js_userCheck" type="checkbox"/><span class="login_pass">记住账号</span></p>
                    <p class="login_pwd"><a href="#">忘记密码?</a></p>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://static.ilongyuan.cn/cdn/script/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
    var userName = $(".js_userName");
    var userCode = $(".js_userCode");
    var Days = 15;   //cookie 将被保存多少天
    var exp  = new Date();  //获得当前时间  
    exp.setTime(exp.getTime() + Days*60*60*24*1000);  //换成毫秒  
    $(".js_loginBtn").click(function(){
        if($(".js_userCheck").is(':checked')){//判断是否保存密码
            document.cookie ="userName="+userName.val()+";expires=" + exp.toGMTString();
            document.cookie ="userCode="+userCode.val()+";expires=" + exp.toGMTString();
        }else{
            Days = 1;   //cookie 将被保存多少天
            exp  = new Date();  //获得当前时间  
            exp.setTime(exp.getTime() + Days);  //换成毫秒  
            document.cookie ="userName="+userName.val()+";expires=" + exp.toGMTString();
            document.cookie ="userCode="+userCode.val()+";expires=" + exp.toGMTString();
        }
    });
    if(document.cookie.indexOf("userName")>=0){//判断以前是否保存了密码
        $(".js_userCheck").prop("checked",true);
        var userNameVal = document.cookie.match(new RegExp("(^| )userName=([^;]*)(;|$)"))[2];
        var userCodeVal = document.cookie.match(new RegExp("(^| )userCode=([^;]*)(;|$)"))[2];
        userName.val(userNameVal);
        userCode.val(userCodeVal);
    }else{
    }
})
</script>
</body>
</html>