<!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. 使用Spring MVC统一异常处理实战<转>

    1 描述 在J2EE项目的开发中,不管是对底层的数据库操作过程,还是业务层的处理过程,还是控制层的处理过程,都不可避免会遇到各种可预知的.不可预知的异常需要处理.每个过程都单独处理异常,系统的代码耦合 ...

  2. eclipse 里的tomcat一直处于starting状态

    今天困扰了我一天,eclipse里面明明吧tomcat启动成功了,但是有个starting tomcat的进程一直在启动着,当你修改页面,build workspace的时候,进程就一直处于等待状态, ...

  3. HTML——动画效果：图片循环横向播放

    一.html <!DOCTYPE HTML> <html> <head> <title>Home</title> <link href ...

  4. server后台程序的内存使用问题

    眼下我开发的一个server后台程序存在这么一个问题,因为我的程序要不断的收发消息,并做统计.统计用的是stl的多重map.在统计中会不断的往map里赛数据. 可是每次统计后我都会调用clear()去 ...

  5. iOS边练边学--view的封装

    一.view封装的思路: *如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部的子控件的创建屏蔽起来,不让外界关心 *外界可以传入对应的模型数据给view,view拿到模型数据 ...

  6. jquery easyui datagrid 分页实现

    通常情况下页面数据的分页显示分成真假两种.真分页是依靠后台查询时控制调出数据的数量来实现分页,也就是说页面在后台对数据进行处理,仅传输当前需要页的数据到前台来显示.而假分页则是后台一次性将所有的数据一 ...

  7. Linux 设置 LD_LIBRARY_PATH

    在Linux下,如果自己写好一个动态链接库,需要在其他程序里调用,则需要让这些程序能找到这个动态链接库,如果设置的不对,就会出现类似的错误: error : cannot open shared ob ...

  8. delete指针以后应赋值为NULL——QT deletelater指针以后也同样要马上赋值为NULL

    delete p后,只是释放了指针指向的内存空间.p并不会自动被置为NULL,而且指针还在,同时还指向了之前的地址 delete NULL编译器不会报错(因为delete空指针是合法的) 例: 对一个 ...

  9. 关于Struts2的action的execute方法

    这个方法必须要有一个String类型的返回值,所以如果写很多if else的话,记得要在最后加一个else,就是无论如何就会放回一个字符串,否则编译会报错,在execute方法名字下面有红线.

  10. tftp32作为dhcp服务器

    /******************************************************************* * tftp32作为dhcp服务器 * 每次使用tftp进行文 ...