一秋麸、 定時器
setTimeout()
setTimeout() ：在指定的毫秒數后調用函數或計算表達式。
//定時執(zhí)行某些代碼
setTimeout(() => {
console.log("1秒");
}, 1000);
setInterval()
setInterval() ：按照指定的周期（以毫秒計）來調用函數或計算表達式。方法會不停地調用函數丐箩，直到 clearInterval() 被調用或窗口被關閉旭咽。
var i = 0;
var t = setInterval(() => {
console.log("定時器");
if (i == 9) {
clearInterval(t);
}
i++;
}, 1000);
var t2 = setInterval(() => {
console.log("定時器2");
}, 1000);
console.log("setInterval", t, t2);
二、 同步異步
- 先執(zhí)行同步,在執(zhí)行異步
- 在執(zhí)行棧從上而下執(zhí)行語句,將異步操作分配任務列表,然后繼續(xù)執(zhí)行后續(xù)的代碼
- 當所有的同步都執(zhí)行完畢窒篱，才到事件輪詢（event loop）去根據隊列中的任務觸發(fā)條件
- 是否滿足條件,然后執(zhí)行異步的回調(callback)
console.log("1號");
console.time();
setTimeout(() => {
//異步
console.log("2號");
}, 0);
console.timeEnd();
console.log("3號"); //同步
///輸出結果 1 .3. 2
三、 存儲
1. cookie
- 可以用作登陸憑證（百度）
- 可以用于請求的傳輸
- 瀏覽器限制 大小最多 4kb 左右 舶沿，個數 20+
<button onclick="setMyCookie()">設置 set</button>
<button onclick="getMyCookie()">獲取 get</button>
<button onclick="delMyCookie()">清除 del</button>
function setMyCookie() {
setCookie('test', 12345)
}
function getMyCookie() {
console.log(getCookie('test'));
}
function delMyCookie() {
setCookie('test', null, 0)
}
/*
* expires 過期時間 對照服務器時間（UTC）
* domain 域名
* path 路徑
*
*/
function setCookie(name,value, days ){
var Days = (days !== undefined ? days: 30 );
var exp = new Date(); // 當前時間
exp.setTime(exp.getTime() + Days*24*60*60* 1000); // 設置過期時間
console.log(exp);
console.log(exp);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toUTCString()+';path=/;';
}
function getCookie(name){
// 例子： "test=12345; name=wer; age=13"
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
2. storeage
- 大小 5MB 左右墙杯，個數不受限
- 用于 http 傳輸時需要手動提取和設置
不管是 localStorage，還是 sessionStorage括荡，可使用的 API 都相同高镐，常用的有如下幾個（以 localStorage 為例）：
保存數據：
localStorage.setItem(key,value);讀取數據：
localStorage.getItem(key);刪除單個數據：
localStorage.removeItem(key);刪除所有數據：
localStorage.clear();得到某個索引的 key：
localStorage.key(index);
!> 提示: 鍵/值對通常以字符串存儲，你可以按自己的需要轉換該格式畸冲。
// localStorage 永久存儲
var record = ["周杰倫", "陳奕迅"];
// 設置
// JSON.stringify(數據) 將數據轉為JSON字符串
localStorage.setItem("record", JSON.stringify(record));
// 獲取
var get_record = localStorage.getItem("record");
// JSON.parse(字符串) 將JSON字符串轉為對應數據格式
console.log(JSON.parse(get_record));
// 移除 localStorage.removeItem(數據名)
// sessionStorage 會話存儲 頁面關閉的時候就會被移除
sessionStorage.setItem("history", "hahaha");
四嫉髓、 跳轉
1. location 對象
//地址欄
console.log(location);
location.href="url?參數1="+參數1值 //跳轉到url(原頁面跳轉)，是跳到新的頁面邑闲，可以回退 舉個栗子：window.location.href="./頁面?zhèn)鲄?html?id="+id; //拼接傳遞參數
location.replace(url); //跳轉到url算行，替代掉當前頁面，不可以回退
location.reload(); //重新刷新頁面
location.search; //傳遞的參數放在location.search里面
2. history 歷史對象
history.back(); //后退頁面
history.forward(); //前進頁面
history.go(n); //n為正數苫耸，表示前進n個頁面州邢；n為負數，表示后退n個頁面
3. 獲取 url 參數
//獲取url查詢字符串的參數
function getQueryString(item) {
var svalue = location.search.match(
new RegExp("[?&]" + item + "=([^&]*)(&?)", "i")
);
return svalue ? svalue[1] : svalue;
}
//獲取其他頁面?zhèn)鬟^來的等級lv,()中寫對應的字符串 'lv'
var lv = getQueryString("lv");
五褪子、 window 對象
window.confirm("是否確認"); //帶有確認的彈窗量淌，返回布爾值
window.close(); //關閉當前頁面
window.open(url,'_blank'); //打開新頁面(新增頁面)
window.open(url,'_self'); //打開新頁面(原頁面打開)
六骗村、 navigator 對象
navigator.userAgent; //查看瀏覽器的內核信息
navigator.appCodeName; //瀏覽器代號
navigator.appVersion; //瀏覽器版本
navigator.cookieEnabled; //啟用Cookies
navigator.platform; //硬件平臺
navigator.userAgent; //用戶代理
navigator.systemLanguage; //用戶代理語言
七、 screen 屏幕對象
document.write("總寬度/高度: ");
document.write(screen.width + "*" + screen.height);
document.write("可用寬度/高度: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("色彩深度: ");
document.write(screen.colorDepth);
document.write("色彩分辨率: ");
document.write(screen.pixelDepth);
