<!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. u-boot源码分析

    Uboot源码分析 源码以u-boot-1.3.4为基准,主芯片采用at91sam9260,主要介绍uboot执行流程. uboot官网:http://www.denx.de/wiki/U-Boot/ ...

  2. Python idle安装与使用教程 调试、下载

    Python idle安装与使用教程 调试.下载 今天我们就来讲一下如何安装Python idle编辑器,也它的调试和使用. 第一步,我们先去下载一个Python idle程序安装包. 本节讲的是wi ...

  3. 关于datatable导出execl

    导出主要考虑响应流的问题 curContext.Response.ContentType = "application/vnd.ms-excel"; curContext.Resp ...

  4. Windows通用知识讲解二

    NMAKE Makefile是一个解释执行的工具,根据Makefile文件中的定义,编译和链接程序,最终生成文件. Makefile(Windows下是.mak文件) 定义编译和链接等操作的脚本文件( ...

  5. python中的矩阵、多维数组----numpy

    https://docs.scipy.org/doc/numpy-dev/user/quickstart.html  (numpy官网一些教程) numpy教程:数组创建 python中的矩阵.多维数 ...

  6. Java String 学习

    String, 首先,String有字面值常量的概念,这个字面值常量是在编译期确定下来的,类加载时直接存入常量池(注意,常量池是类的常量池,类与类之间隔离). 而运行时生成的字符串,是不在常量池中的. ...

  7. 3D游戏与计算机图形学中的数学方法-变换

    1变换 在3D游戏的整个开发过程中,通常需要以某种方式对一系列的向量进行变换.通常用到的变换包括平移,缩放和旋转. 1.1通用变换 通常可将n x n可逆矩阵M看成是一个从坐标系到另一个坐标系的变换矩 ...

  8. Linux，ubuntu14.04.5下安装软件

    没有aptitude 使用:  sudo apt-get install  ***

  9. RGB 颜色对照表

    R G B 值   R G B 值   R G B 值 黑色 0 0 0 #000000 黄色 255 255 0 #FFFF00 浅灰蓝色 176 224 230 #B0E0E6 象牙黑 41 36 ...

  10. oracle当前月添加一列显示前几个月的累计值

    create table test_leiji(rpt_month_id number(8),                        current_month NUMBER(12,2)); ...