<!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. 全栈设计模式套餐MVVM, RESTful, MVC的历史探索

    众所周知, 软件开发时遵守一个规范的设计模式非常重要, 学习行业内主流的design pattern往往能够为你节省大部分时间. 根据我2年的全栈经验, 在Web应用程序领域最流行的, 并且若干年内不 ...

  2. DataGridView使用技巧五：自动设定列宽和行高

    一.设定行高和列宽自动调整 设定包括Header和所有单元格的列宽自动调整 //设置包括Header和所有单元格的列宽自动调整 this.dgv_PropDemo.AutoSizeColumnsMod ...

  3. 400错误，Required String parameter 'paramter' is not present

    1.就拿简单的登录来说吧,这是开始的代码 @RequestMapping(value="/login")public ModelAndView login(@RequestPara ...

  4. rails局部模板 render

    <%= render partial: 'file' %> file是以_开头命名的文件,比如_cart.html.erb 这样就可以用render来调用了 还可以传参数 比如 rails ...

  5. tp-01 搭建过程

    1:拷贝ThinkPHP框架系统文件夹自己的www目录中的tp-shop文件夹中 2:新建自己的项目文件(比如:shop)夹与ThinkPHP框架系统文件夹在同一级目录(当然也可以不同) 3: 在tp ...

  6. Error -27780: Connection reset by peer: socket write error

    Problem Description: Error: "-27780: read to host failed: [10054] Connection reset by peer" ...

  7. SAX与DOM解析XML的区别

    解析xml有四种方法:DOM,SAX,DOM4j,JDOM.     我们主要学了两种:DOM和SAX.     DOM适于解析比较简单的XML而SAX则适于解析较复杂的XML文件.各有各的好. DO ...

  8. PHP必备知识：如何下载样式文件中的图片

    <?php header("content-type:text/html;charset=utf-8"); set_time_limit(0); $styleImg = fi ...

  9. u3d读取xml txt

    u3d读取xml文件和u3d 读取txt外部文件 using UnityEngine;using System.Collections; using System.Xml;using System.X ...

  10. c++ _int64 转成string

    _i64toa(a,buffer,10); scanf("%I64d",&a);printf("%I64d",a); 就可以正确输入输出了.当使用uns ...