zoukankan      html  css  js  c++  java
  • localStorage登录页记住密码(艺博会)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <link rel="stylesheet" href="css/basic.css" type="text/css" />
    <link rel="stylesheet" href="css/login.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
    <script type="text/javascript" src="js/login.js" ></script>
    </head>

    <body>
    <div class="wrap">
    <div class="topWrap" >
    <i class="loginLogo"></i>
    <div class="logoText">入驻商家工作平台</div>
    </div>
    <div class="contentBg">
    <div class="bg"></div>
    <div class="contentWrap">
    <div class="container">
    <div class="title">用户登录</div>
    <form action="" method="post" >
    <div class="iptWrap iptWrap01">
    <div class="iconTel"></div>
    <input class="iptTel" type="text" name="" placeholder="请输入手机号" maxlength="11" style="border: #fff solid 1px;" />
    </div>
    <div class="iptWrap iptWrap02">
    <div class="iconPasw"></div>
    <input class="iptPasw" type="password" name="" placeholder="请输入密码" style="border: #fff solid 1px;" />
    <div class="open"></div>
    <div class="close"></div>
    </div>
    <a href="javascript:void(0)" class="forgetPasw">忘记密码?</a>
    <div class="bottom">
    <div class="square">
    <input id="remember" type="checkbox" />
    <div class="remember">记住我</div>
    </div>
    <button class="iptLogin" type="submit" onclick="loginBtn_click()" >登 录</button>
    </div>
    </form>
    <div class="greyLine"></div>
    <a class="upLoad" href="javascript:void(0)">扫描右侧二维码,下载今日财界客户端→</a>
    </div>
    <div class="code"></div>
    </div>
    </div>
    <div class="footer">
    <div class="copyright">北京网高科技股份有限公司 Copyright © 2007-2018 All Rights Reserved | 客服电话:010-65910258 </div>
    </div>
    </div>
    <script>
    $(document).ready(function(){
    var strName = localStorage.getItem('keyName');
    var strPass = localStorage.getItem('keyPass');
    var strRem = localStorage.getItem('keyRem');
    if(strName){
    $('.iptTel').val(strName);
    }
    if(strPass){
    $('.iptPasw').val(strPass);
    }
    if(strRem){
    $('#remember').attr("checked",true);
    }
    });
    function loginBtn_click(){
    var strName = $('.iptTel').val();
    var strPass = $('.iptPasw').val();
    var strRem = $('#remember').is(':checked');

    if($('#remember').is(':checked')){
    localStorage.setItem('keyName',strName);
    localStorage.setItem('keyPass',strPass);
    localStorage.setItem('keyRem',strRem);
    }else{
    localStorage.removeItem('keyPass');
    localStorage.removeItem('keyRem');
    }
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    14-定时器
    13-JS中的面向对象
    12-关于DOM操作的相关案例
    11-DOM介绍
    10-关于DOM的事件操作
    09-伪数组 arguments
    08-函数
    07-常用内置对象
    06-流程控制
    05-数据类型转换
  • 原文地址:https://www.cnblogs.com/ourLifes/p/9561869.html
Copyright © 2011-2022 走看看