<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>两周内自动登录</title>

         <script src="cookie.js" type="text/javascript" charset="utf-8"></script>

     </head>

     <body>

         <form action="" method="post" id="form1">

             <input type="text" name="user" id="user" value="" />

             <input type="password" name="pass" id="pass" value="" />

             <input type="submit" value="提交" id="btn"/>

             <input type="checkbox" name="checkbox" id="checkbox" value="" />两周内自动登录

         </form>

     </body>

     <script type="text/javascript">

         var oTxt1 = document.getElementsByName('user')[0],

             oTxt2 = document.getElementsByName('pass')[0],

             cked = document.getElementsByName('checkbox')[0],

             oForm1 = document.getElementById('form1'),

             oBtn = document.getElementById('btn');

         oForm1.onsubmit = function(){

             if(cked.checked){

                 alert('请注意！您已勾选自动登录。为了保护您的账号安全，请不要在公共电脑上这样做。')

                 setCookie('user',oTxt1.value,14);

                 setCookie('pass',oTxt2.value,14);

             }

         }

         oTxt1.value = getCookie('user');

         oTxt2.value = getCookie('pass');

     </script>

 </html>

来自智能社的学习笔记延伸练习

继续引申，完善交互与提示效果，代码如下：

说明：当鼠标准备点击勾选“两周自动登录”时，进行人性化提醒。点击后，开始执行事先准备好的cookie保存函数。

再次刷新页面，将之前保存好的cookie提取出来填入对应的input中

 <!DOCTYPE html>

 <html>

     <!--

         作者：guojufeng702004176@qq.com

         时间：2017-03-23

         描述：

     -->

     <head>

         <meta charset="UTF-8">

         <title>两周内自动登录</title>

         <style type="text/css">

         form{

             position: relative;

         }

             form span{

                 display: none;

                 position: absolute;

                 top: 28px;

                 left: 367px;

                 padding: 12px 8px 8px;

                 background-color: #FEA167;

                 color: #B80000;

                 font: bold 12px "微软雅黑";

             }

             span:before{

                 display: block;

                 content: "";

                 width: 3px;

                 height: 3px;

                 background-color: #FEA167;

                 border: 3px solid #FEA167;

                 margin-top: -16px;

 margin-left: -6px;

                 -webkit-transform: rotate(45deg);

                 -moz-transform: rotate(45deg);

                 -ms-transform: rotate(45deg);

                 transform: rotate(45deg);

             }

         </style>

         <script src="cookie.js" type="text/javascript" charset="utf-8"></script>

     </head>

     <body>

         <form action="" method="post" id="form1">

             <input type="text" name="user" id="user" value="" />

             <input type="password" name="pass" id="pass" value="" />

             <input type="submit" value="提交" id="btn"/>

             <input type="checkbox" name="checkbox" id="checkbox" value="" /><label for="checkbox" id="checkbox2">两周内自动登录</label>

             <span id="ts">

                 为了保护您的账号安全，请不要在公共电脑上这样做。

             </span>

         </form>

     </body>

     <script type="text/javascript">

         var oTxt1 = document.getElementsByName('user')[0],

             oTxt2 = document.getElementsByName('pass')[0],

             cked = document.getElementsByName('checkbox')[0],

             oForm1 = document.getElementById('form1'),

             cked2 = document.getElementById('checkbox2'),

             oTs = document.getElementById('ts'),

             oBtn = document.getElementById('btn');

         cked2.onmouseover = cked.onmouseover = function(){

             oTs.style.display = "block"

         }

         cked2.onmouseout = cked.onmouseout = function(){

                 oTs.style.display = "none"

         }

         oForm1.onsubmit = function(){

             if(cked.checked){

                 alert('请注意！您已勾选自动登录。')

                 setCookie('user',oTxt1.value,14);

                 setCookie('pass',oTxt2.value,14);

             }

         }

         oTxt1.value = getCookie('user');

         oTxt2.value = getCookie('pass');

     </script>

 </html>

JS-两周内自动登录功能的更多相关文章

  1. Spring Security框架下实现两周内自动登录"记住我"功能

    本文是Spring Security系列中的一篇.在上一篇文章中,我们通过实现UserDetailsService和UserDetails接口,实现了动态的从数据库加载用户.角色.权限相关信息,从而实 ...

  2. 教你用Java安全有效的实现两星期内自动登陆功能-Session

    现在很多网站都有为用户保存登陆信息(即保存Cookie)的功能,当用户下一次进入网站时,可以帮助用户自动登陆,使网站显得更加友好.笔者通过研究ACEGI项目的自动登陆源码,编写了一个安全有效的实现两星 ...

  3. JavaWeb 08_JSP+Dao+Bean+Servlet 实现登录注册（连接数据库，验证码登录，两周内免登陆等功能）

    一.数据库db_01   表usert   字段username,password 二. 目录 三. 配置信息 四. 代码 index.jsp <script type="text/j ...

  4. Servlet课程0426（十一）Servlet Cookie实现两周内不用重复登录

    Welcome.java //登录界面 package com.tsinghua; import javax.servlet.http.*; import java.io.*; import java ...

  5. Vue+Vuex 实现自动登录功能

    刚刚实现了Vue+Vuex的自动登录功能,在实现的时候遇到了一些问题,这里记录一下: 因为这个还不够完善,在写完下列代码后,又进行了补充,可以从https://www.cnblogs.com/xiao ...

  6. yii2.0自动登录功能的实现方法

    参考地址:http://www.kuitao8.com/20150518/3747.shtml 自动登录的原理很简单.主要就是利用cookie来实现的在第一次登录的时候,如果登录成功并且选中了下次自动 ...

  7. js仿手机端九宫格登录功能

    js仿手机端九宫格登录功能 最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下,写的不好的请指出,我会及时修改.谢谢. 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说 ...

  8. 自己Cookie写的自动登录功能 包含BASE64 和MD5的使用

    sql表 username  password字段 User类 有 id username password等字段 Service有一函数 @Override public User findUser ...

  9. cookie理解与实践【实现简单登录以及自动登录功能】

    cookie理解 Cookie是由W3C组织提出,最早由netscape社区发展的一种机制 http是无状态协议.当某次连接中数据提交完,连接会关闭,再次访问时,浏览器与服务器需要重新建立新的连接: ...

随机推荐

  1. Andriod——数据存储 SharedPrefrences

    xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...

  2. Idea配置sbt(window环境)

    近开发spark项目使用到scala语言,这里介绍如何在idea上使用sbt来编译项目. 开发环境:windows 1. 下载sbt http://www.scala-sbt.org/download ...

  3. 使用特殊构造的5GB文件测试Win2012Dedup功能

    WinServer2012一个崭新的功能就是支持重复数据删除功能.为了测试这个功能的情况,特别构造了一个特殊的5GB文件用于此次测试.惯例,先说下测试环境的搭建1 使用ESXi5上的版本8的VM,安装 ...

  4. Cocos2d-x模版卸载及安装

    卸载:将隐藏的模板文件删除掉 首先打开你mac终端,然后输入如下命令:显示Mac隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -b ...

  5. 单例模式/ java实现附代码 /

    注: 场景和例子出自github的设计模式.传送门:https://github.com/iluwatar/java-design-patterns/tree/master/singleton 意图: ...

  6. VMWare -- winscp实现windows主机和Ubuntu虚拟机之间文件复制(通过ftp协议)

    我们经常需要将本地的文件上传到远程的Ubuntu 14.04服务器上,或者把远程Ubuntu 14.04服务器上的文件下载到本地,这就需要用到vsftpd来搭建FTP服务,现在介绍一下如何在Ubunt ...

  7. 给网站添加X-UA-Compatible标签

    给网站添加X-UA-Compatible标签 方法一:<meta http-equiv="X-UA-Compatible" content="IE=EmulateI ...

  8. Erlang的Web库和框架

    ChicagoBoss,Nitrogen ,Zotontic,BeepBeep,ErlyWeb,Erlang Boss. 转自:http://bbs.chinaunix.net/thread-3764 ...

  9. Json.net 时间格式处理

    json.net转json时生成的时间格式是这种 2015-11-14T06:59:59+08:00 格式化为这种2015-11-14 后台代码: IsoDateTimeConverter timeF ...

  10. [转]lsof详解

    lsof是一个功能强大的诊断工具,它可以通过进程与打开的文件进行联系,可以列出一个进程打开的所有文件信息. 1 寻找与打开的文件相关联的进程通过指定文件,可以发现正在使用这个文件的进程# lsof / ...