<!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. Android——SQLite数据库（一）创建数据库、创建表、初始化数据

    xml <Button android:layout_width="match_parent" android:layout_height="wrap_conten ...

  2. java后台json如何传递到jsp中解析

    需求:  系统前端jsp使用的是easyUi的datagrid展示了一些任务信息,任务信息中有个状态信息显示的值是数字, 需要根据后台保存的映射关系,将状态显示为描述信息. 原来的jsp前端显示: 解 ...

  3. ipad safari 滚动（overflow）解决方案

    项目需要放到ipad应用了,发现有一个奇怪的问题,就是我div是设置滚动属性的,在pc上面的各个浏览器页面变小时,会出现滚动条,可是是ipad的safari,则不会滚动,开始以为是div的问题 但发现 ...

  4. ORACLE11G 字符集更改（这里更改为AL32UTF8）

    ORACLE11G 字符集更改(这里更改为AL32UTF8)更改步骤:1.用sysdba角色用户登录sqlplus: 命令行输入:sqlplus sys as sysdba 2.输入口令,进入sqlp ...

  5. spring boot 拦截器之WebMvcConfigurerAdapter

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   上一篇我们讲到了拦截器,我们也简单的讲解到了WebMvcConfigurerAdapter这个拦截器.本篇我们来对Web ...

  6. 判断IE浏览器的最简洁方法

    <script type='text/javascript'> var ie = !-[1,]; alert(ie);</script>

  7. Ubuntu-Python2.7安装 scipy,numpy,matplotlib 和pip

    一. scipy,numpy,matplotlib sudo apt-get install python-scipy sudo apt-get install python-numpy sudo a ...

  8. 关于jsp，javascript，php等语言

    技术一  jsp: java植入html   技术二 javascript(js)植入html   技术三早期php植入html 弱类型语言和强类型语言 弱类型语言无法实现函数重载,没办法

  9. WPF查找子控件和父控件方法

    一.查找某种类型的子控件,并返回一个List集合 public List<T> GetChildObjects<T>(DependencyObject obj, Type ty ...

  10. Android Activity 传递数据

    activity中数据的传递方式有2中,一种是使用putExtra()传递,另外一种是传递Bundle对象,使用putExtras()方法. 方法一 发送数据 putExtra()传送的是键值对,第一 ...