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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-03-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读