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>

 

posted @ 2017-03-23 11:31  xing.org1^  阅读(3159)  评论(0)  编辑  收藏  举报