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>