<!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>
<!--
作者：[email protected]
时间：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>