<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> .log-box{ margin-top: 10%; } </style> </head> <body> <div class="container"> <div class="row log-box"> <div class=" col-md-4 col-md-offset-4"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">请输入用户名和密码</h3> </div> <div class="panel-body"> <form> <div class="form-group"> <label for="input-name">用户名</label> <input type="text" class="form-control" id="input-name" placeholder="Email or UserName"> </div> <div class="form-group"> <label for="inpu-password">密码</label> <input type="password" class="form-control" id="inpu-password" placeholder="Password"> </div> <div class="checkbox"> <label> <input id="remember-me" type="checkbox"> 记住我 </label> <label> <input id="remove-me" type="checkbox"> 清除 </label> </div> <button type="submit" class="btn btn-default">登录</button> </form> </div> </div> </div> </div> </div> </body> <script src="./js/jquery.js"></script> <script> $(document).ready(function (){ // 判断是否存在过用户 isrmember(); // 在点击登录时记录用户名信息 $("#remember-me").on("change", function (){ // 设置键值对到本地的存储 localStorage.setItem("login-name", $("#input-name").val()); }); $("#remove-me").on("change", function (){ // 删除本地的存储 localStorage.removeItem("login-name"); }) }); function isrmember() { // 页面加载时判断缓存中isstorename是否为yes，是则取出用户名 //判断是否存在过用户 $("#input-name").val(localStorage.getItem("login-name")) ? localStorage.getItem("login-name") : ""; } </script> </html>
基于 Bootstrp 构建简洁的登录框并实现记住我功能
猜你喜欢
转载自www.cnblogs.com/xiguatian/p/9563426.html
今日推荐
周排行