新浪佈局 初始佈局代碼： .header{height:;background:;} JavaScript焦點事件 docment.focus(); JS事件冒泡機制：當一個元素接收到事件的時候，會把它接收到的所有傳播給它的父級，一直到頂層Window.事件。 阻止冒泡 ：當前要阻止冒泡的事件函數中 ...
新浪佈局
初始佈局代碼：
div.header+(div.container>(div.left+div.right))+div.footer
----------
.header{height:;background:;}
JavaScript焦點事件
docment.focus();
JS事件冒泡機制：當一個元素接收到事件的時候，會把它接收到的所有傳播給它的父級，一直到頂層Window.事件。
阻止冒泡 ：當前要阻止冒泡的事件函數中調用 event.cancelBubble = true；
cookie ：存儲數據
當用戶訪問了某個網站（網頁）的時候，就可以通過cookie來向訪問者電腦上存儲數據
1.不同瀏覽器存放的cookie位置不一樣，也是不能通用的
2.cookie的存儲是以功能變數名稱的形式進行區分的
3.cookie的數據可以設置名字的
4.一個功能變數名稱下存放的cookie的個數是有限制的，不同的瀏覽器存放的個數不一樣
5.每個cookie存放的內容大小
寫法： document.cookie = "名字=值 ";expires=' +字元串格式的時
間';
日期時間轉換為字元串-----》oDate.toGMTString();
通過document.cookie來獲取網站下的cookie的時候，得到的字元串形式的值，他包含了當前網站下所有的cookie，他會把所有的cookie通過一個分號+空格的形式串聯起來
cookie預設是臨時存儲，到瀏覽器關閉時，自動銷毀
內容最好編碼存放，encodeURI decodeURI
編碼：encodeURI("")；
解碼：decodeURI();
----------
如果長時間存放一個cookie，要同時設置一個過期時間
寫法： expires =' '
設置： var oDate = new Date();
oDate.setDate(oDate.getDate +5);//5天之後被銷毀
document.cookie = '名字=值;expires=" +oDate"';
封裝------->設置cookie----》setCookie();
function setCookie(key,value, t) {
var oDate = new oDate();
oDate.setDate(oDate.getDate() + t);
document.cookie = key + '='+ value +';expires =' + oDate.toGMTString();
}
setCookie('sex','男'，10);
// 設置cookie sex=男， 10天後銷毀
移除cookie----------> removeCookie('cookie名');
封裝-------->獲取任意cookie值----》getCookie();
function getCookie(key){
var arr1 = document.cookie.split(';');
for(var i =0,len = arr1.length;i<len;i++){
var arr2 = arr1[i].split('=');
if(arr2[0] == key){
return decodeURI(arr2[1]);
}
}
}
alert(getCookie('名字'));cookie 應用
網站訪問登錄時，記住用戶名和密碼
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!--聲明當前頁面的編碼集：charset=gdk,gb2312(中文編碼),utf-8國際編碼-->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="Keywords" content="關鍵詞,關鍵詞"/>
<meta name="Description" content="描述"/>
<meta name="Author" content="天心閣主">
<title>JS練習---cookie</title>
<style>
</style>
<script>
window.onload = function () {
var oUser = document.getElementById('username'),
oPwd = document.getElementById('password'),
oLogin = document.getElementById('login'),
oDel = document.getElementById('del');
/**
* 登錄事件
* 1.點擊登錄button時，alert('登錄成功！');
* 2.獲取cookie
* */
//判斷cookie是否存儲
if ( getCookie('username') ) {
oUsername.value = getCookie('username');
}
oLogin.onclick = function () {
alert('登錄成功！');
setCookie('username',oUser.value,10)
oDel.onclick = function() {
removeCookie('username');
oUser.value = '';
}
//設置用戶cookie
function setCookie(key,value, t) {
var oDate = new oDate();
oDate.setDate(oDate.getDate() + t);
document.cookie = key + '='+ value +';expires =' + oDate.toGMTString();
}
//獲取用戶登錄的cookie
function getCookie(key){
var arr1 = document.cookie.split(';');
for(var i =0,len = arr1.length;i<len;i++){
var arr2 = arr1[i].split('=');
if(arr2[0] == key){
return decodeURI(arr2[1]);
}
}
}
alert(getCookie('名字'));
}
}
function removeCookie(key) {
setCookie(key, '', -1);
}
</script>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>-->
</head>
<body>
<div id="wrap">
用戶：<input type="text" id="username">
密碼：<input type="password" id="password">
<button id="login">登錄</button>
<button id="del" style="background: chartreuse">去除</button>
</div>
</body>
</html>
