专栏首页前端说吧JS-两周内自动登录功能

JS-两周内自动登录功能

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>两周内自动登录</title>
 6         <script src="cookie.js" type="text/javascript" charset="utf-8"></script>
 7     </head>
 8     <body>
 9         <form action="" method="post" id="form1">
10             <input type="text" name="user" id="user" value="" />
11             <input type="password" name="pass" id="pass" value="" />
12             <input type="submit" value="提交" id="btn"/>
13             <input type="checkbox" name="checkbox" id="checkbox" value="" />两周内自动登录
14         </form>
15         
16     </body>
17     <script type="text/javascript">
18         var oTxt1 = document.getElementsByName('user')[0],
19             oTxt2 = document.getElementsByName('pass')[0],
20             cked = document.getElementsByName('checkbox')[0],
21             oForm1 = document.getElementById('form1'),
22             oBtn = document.getElementById('btn');
23         oForm1.onsubmit = function(){
24             if(cked.checked){
25                 alert('请注意!您已勾选自动登录。为了保护您的账号安全,请不要在公共电脑上这样做。')
26                 setCookie('user',oTxt1.value,14);
27                 setCookie('pass',oTxt2.value,14);    
28             }
29         }
30         oTxt1.value = getCookie('user');
31         oTxt2.value = getCookie('pass');
32     </script>
33 </html>

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

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <!--
 4         作者:guojufeng702004176@qq.com
 5         时间:2017-03-23
 6         描述:
 7     -->
 8     <head>
 9         <meta charset="UTF-8">
10         <title>两周内自动登录</title>
11         <style type="text/css">
12         form{
13             position: relative;
14         }
15             form span{
16                 display: none;
17                 position: absolute;
18                 top: 28px;
19                 left: 367px;
20                 padding: 12px 8px 8px;
21                 background-color: #FEA167;
22                 color: #B80000;
23                 font: bold 12px "微软雅黑";
24             }
25             span:before{
26                 display: block;
27                 content: "";
28                 width: 3px;
29                 height: 3px;
30                 background-color: #FEA167;
31                 border: 3px solid #FEA167;
32                 margin-top: -16px;
33 margin-left: -6px;
34                 -webkit-transform: rotate(45deg);
35                 -moz-transform: rotate(45deg);
36                 -ms-transform: rotate(45deg);
37                 transform: rotate(45deg);
38             }
39         </style>
40         <script src="cookie.js" type="text/javascript" charset="utf-8"></script>
41     </head>
42     <body>
43         <form action="" method="post" id="form1">
44             <input type="text" name="user" id="user" value="" />
45             <input type="password" name="pass" id="pass" value="" />
46             <input type="submit" value="提交" id="btn"/>
47             <input type="checkbox" name="checkbox" id="checkbox" value="" /><label for="checkbox" id="checkbox2">两周内自动登录</label>
48             <span id="ts">
49                 为了保护您的账号安全,请不要在公共电脑上这样做。
50             </span>
51         </form>
52         
53     </body>
54     <script type="text/javascript">
55         var oTxt1 = document.getElementsByName('user')[0],
56             oTxt2 = document.getElementsByName('pass')[0],
57             cked = document.getElementsByName('checkbox')[0],
58             oForm1 = document.getElementById('form1'),
59             cked2 = document.getElementById('checkbox2'),
60             oTs = document.getElementById('ts'),
61             oBtn = document.getElementById('btn');
62         cked2.onmouseover = cked.onmouseover = function(){
63             
64             oTs.style.display = "block"
65         }
66         cked2.onmouseout = cked.onmouseout = function(){
67                 oTs.style.display = "none"
68         }
69         oForm1.onsubmit = function(){
70             if(cked.checked){
71                 alert('请注意!您已勾选自动登录。')
72                 setCookie('user',oTxt1.value,14);
73                 setCookie('pass',oTxt2.value,14);    
74             }
75         }
76         oTxt1.value = getCookie('user');
77         oTxt2.value = getCookie('pass');
78     </script>
79 </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS-鼠标跟随块(一个小圆点跟着鼠标跑)

    xing.org1^
  • JS-Math对象

    xing.org1^
  • JS-原生代码或方法实现特定效果总结(更新中...)

    xing.org1^
  • 自定义UISlider控件(实战篇)

    大壮
  • ABAP方法的exporting类型参数,需要在方法实现最开始显式初始化么

    Subject: code review遗留问题: is it necessary to explicitly initialize the exporting...

    Jerry Wang
  • JS代码和网页的混用

    今天写一个代码,遇到这个情况:大的DIV嵌了一个小的DIV,大的DIV的宽度我是通过复杂的机制替换完成,现在小的div需要显示边框,但它又不能使用大的DIV的...

    用户1075292
  • Redis - hash类型操作

    Aichen
  • 5种高效利用value-counts函数的方法,一键提升数据挖掘姿势水平

    value_counts() 方法返回一个序列 Series,该序列包含每个值的数量。也就是说,对于数据框中的任何列,value-counts () 方法会返回...

    机器之心
  • Pandas | 5 种技巧高效利用value-counts

    value_counts() 方法返回一个序列 Series,该序列包含每个值的数量。也就是说,对于数据框中的任何列,value-counts () 方法会返回...

    昱良
  • Java的wait()、notify()学习三部曲之二:修改JVM源码看参数

    在上一章《 Java的wait()、notify()学习三部曲之一:JVM源码分析》中,我们通过JVM源码分析了线程同步的相关操作,但还是留下了一些疑惑未解:在...

    程序员欣宸

扫码关注云+社区

领取腾讯云代金券