第一章 Js基礎
一、Js的特點
1、JavaScript是一種基於對象的腳本語言
2、JavaScript是在客戶的瀏覽器上運行的
3、JavaScript是一種解釋語言，其源代碼在客戶端執行之前不需要經過編譯，而是將文本格式的字符代碼在客戶端由瀏覽器解釋執行。
4、JavaScript需要瀏覽器支持、不需要服務器的支持
二、Js編碼的兩種方式
1、直接寫在HTML頁面里執行
在HTML頁面中直接寫<script>標簽，在標簽內部直接寫javaScript代碼
如：
<script type="text/javascript">
//在這里直接寫JavaScript代碼
</script>
2、寫單獨的javaScript文件，后綴名.js；在HTML中引入js文件執行
新建.js文件，在文件中寫JavaScript代碼，寫好之后再HTML中引入
如：
<script type="text/javascript" src="文件路徑.js"></script>
三、Js中的輸出輸入語句
1、輸出語句
alert("要輸出的內容");//以彈窗形式進行輸出
document.write("要輸出的內容");//在HTML文檔中直接寫入內容
2、輸入語句
Prompt("提示語句","默認值");//以彈窗形式，接收用戶輸入的值，不建議使用
通過表單元素進行輸入(后續章節講述)
四、Js的注釋
1、單行注釋 //
2、多行注釋 /* */
五、變量和數據類型
1、變量的定義
語法： var 變量名; 變量名=值; 或 var 變量名=值;
Tips: JS是一個弱類型的語言，所有變量的數據類型都可以用var關鍵字來定義
變量的數據類型，取決於我們給變量賦的值，用typeof()查看變量的數據類型
2、JS的數據類型
1）基本數據類型
數值數據類型(number)
布爾類型(boolean)
未定義數據類型(undefined)
空數據類型(null)
2)引用數據類型
字符串類型(string)
Array數組類型
對象類型(Object)
六、數據類型的轉換
1、隱式轉換(自動轉換) 一般情況除了字符串轉數值，都是隱式轉換
2、顯示轉換(強制轉換) 主要用於字符串轉換為數值類型
1）字符串轉換為整數：parseInt(String) 會舍棄小數部分
2）字符串轉換為小數：parseFloat(String) 會舍棄遇到的第一個不是數字后面的元素
七、運算符和表達式
算術運算符： + - * /(除) %(取余) ++ -- -(取反)
比較運算符： > >= < <= == != ===(絕對等於) !==(不絕對等於)
===(絕對等於)：數據類型一致，數值相等
!==(不絕對等於)：數據類型不一致 或 數值不相等 或 數據類型不一致，數值也不相等
邏輯運算符： ||(或) &&(與) !(非)
條件運算符： 判斷條件?條件成立時的返回值:條件不成立時的返回值
第二章 Js語句和函數
一、JS中的分支結構
1、if分支
語法：
if(條件表達式){
條件成立時執行的語句;
}else{
條件不成立時執行的語句;
}
注：1）可以只有if，沒有else；但是不能只有else，沒有if
2）一個if只能對應一個else
3）if是可以嵌套的
4）有多重if,但是多重if有自己的語法
2、多重if
語法：
if(條件1表達式){
條件1成立時執行的語句;
}else if(條件2表達式){
條件2成立時執行的語句;
}else if(條件N表達式){
條件N成立時執行的語句;
}else{
前面的條件1-條件N都沒有成立時，執行這里的語句
}
注：1）多重if的條件必須是對等的，且沒有重合的
2）多重if不管有多少個條件，程序只會選擇其中的一條執行
3）一旦程序匹配到合適的條件，后面的判斷將都不在進行（要注意條件的順序）
3、switch-case結構
語法：
switch(常量){
case 值1:
常量值等於值1時，執行的代碼;
break;
case 值2:
常量值等於值2時，執行的代碼;
break;
case 值N:
常量值等於值N時，執行的代碼;
break;
default:
當前面的值1-值N都沒有被匹配到，執行這里的代碼;
break;
}
Tips: 1)switch-case語句跟多重if-else類似，但是switch只能匹配常量，多重if-else可以匹配表達式
2)switch-case語句跟多重if-else一樣，一旦匹配到某個合適的值，后面的匹配都不再繼續
3)JavaScript中的switch中的常量不會進行自動轉換，所以常量值必需和匹配的值絕對相等
二、JS中循環結構
循環的概念：在滿足一定條件的情況下，重復性的做某一件事情，直到不符合條件時結束
循環的四要素：
1）循環的起點(開始條件)----定義變量初始值
2）循環的終點(判斷條件)----判斷變量是否符合某個條件
3）循環要做的事情(循環體)----需要重復執行的代碼
4）循環起點到終點的變化(循環變量的改變)----變量值的改變
循環的執行順序：1)-->2)-->3)-->4)-->2)-->3)-->4)-->2)循環會在2)的位置結束
1、while循環
語法：
while(判斷條件){
條件成立時執行的要循環的語句;
}
2、do-while循環
語法：
do{
循環體要執行的語句;
}while(判斷條件);
while和do-while的區別：
1）while循環是先判斷，再執行循環體
2）do-while循環是先執行do中的循環體，再判斷條件是否成立
3）所以，do-while循環循環體內的內容，至少會執行一次，而while循環里的內容，有可能一次也不會被執行
3、for循環
語法：
for(①初始值;②循環判斷條件;④變量值的改變){
③循環要做的事情(循環體)----需要重復執行的代碼
}
Tips:1)for循環可以是空(死)循環for(;;){} ，但不建議這樣寫
2)for循環中初始值可以寫在for之前，變量的改變可以寫在循環體內
3)循環初始值、條件等可以是一個，也可以是多個，如果有多個初始值或條件，用逗號隔開
4)循環也可以嵌套,嵌套時外層循環執行一次，里層循環執行一輪
4、break和continue關鍵字
break:跳出正在執行的循環結構
continue:忽略后面的語句，從下一次循環開始執行
Tips:break和continue主要用於循環控制
作業：聯合使用break和continue語句，求前10個偶數的和
三、Js中的函數
1、什么叫函數？
JavaScript中的函數，類似於java或C#中的方法，是執行特定任務的語句塊。當需要完成某種任務時，就可以把相關的語句組織成函數。
2、Js中函數的定義
語法：
function 函數名([參數列表]){
程序語句;
[return 返回值]
}
3、函數的調用
1）函數調用和表單元素的事件一起使用
2) 調用格式為：事件名="函數名([實參])"
4、使用函數的注意事項
函數名區分大小寫，且不能相同，更不能使用JavaScript的關鍵字。
在function關鍵字之前不能指定返回值的數據類型。
函數定義中[ ]是指可選的，也就是說，自定義的函數可以帶參數，也可以不帶參數。如果有參數，參數可以是變量、常量或表達式。自定義函數可以有返回值，也可以沒有，如果省略了return語句，則函數返回undefined。
函數的參數列表中不象Java一樣指定參數的數據類型，只寫參數量名字。
參數列表中如果有多個參數，則各參數之間需要以“,”隔開。
函數必須放在<script></script>標簽之間。
函數的定義最好放在網頁的<head></head>部分或獨立成*.JS文件。
定義函數時並不執行組成該函數的代碼，只有調用函數時才執行代碼。
5、Js中的內置函數
1）parseInt (String)函數
將字符串轉換為整型數字
如parseInt (“86.6”)將字符串“86.6”轉換為整型值86
2）parseFloat(String)函數
將字符串轉換為浮點型數字
如parseFloat (“34.45”)將字符串“34.45”轉換為浮點值34.45
3）isNaN()函數
判斷一個變量或一個字符串是否為非數字。如果是返回true，否則則返回false。
例如isNaN (“ab”)將返回true，isNaN(“12”)將返回false。
4）eval()函數
將一個字符串作為一段JavaScript表達式執行，並返回執行的結果。
5)isFinite()函數
檢測一個是否無窮大，是返回true，否則false
第三章 第四章 第五章 JavaScript對象
一、開發JavaScript的基本流程
布局--->確定要修改哪些屬性-->確定用戶進行哪些操作？-->編寫代碼
1）屬性
屬性是指對象包含的值，使用’對象名.屬性名’的方式進行操作，如document.myfrom.first.value
2）方法
在代碼里，使用’對象名.方法名()’來調用該對象的方法。
alter(‘’)=Window.alter(‘’)
3）事件
響應用戶操作、完成交互，如OnClick、OnKeyDown、onmouseover
一般可以分為鼠標事件、鍵盤事件及其他事件
二、JavaScript中的對象
1）自定義對象
①使用Object關鍵字創建對象
創建對象語法： var 對象名= new Object();
使用對象：具體的對象名.屬性=值；
具體的對象名.行為名();
②使用function關鍵字創建對象
創建對象語法：
function 對象名(屬性){
this.屬性名=屬性名;
this.行為名=function(){
具體的行為;
}
}
使用對象： var 具體的對象名=new 創建的對象名(具體的屬性值);
具體的對象名.屬性=值；
具體的對象名.行為名();
2）JavaScript內置對象
JavaScript將一些常用功能預先定義成對象，用戶可以直接使用，這就是內置對象。
如字符串對象、數學對象、日期對象、數組對象、正則表達式對象等
①字符串對象：
length：返回字符串長度
charAt(num)：返回參數num指定索引處的字符
charCodeAt(num):返回參數num指定索引處的字符的Unicode值
indexOf(string[,num]):返回參數string在字符串中首次出現的位置
lastIndexOf(string[,num]):返回參數string在字符串中最后出現的位置
substring(index1[,index2]):返回字符串中index1和index2之間的字符串
substr(index1[,num])：返回字符串中index1之后的num個字符
toUpperCase():返回字符串大寫形式
toLowerCase():返回字符串小寫形式
split(reg,num):根據參數傳入的正則表達式或者字符（串），將字符串分割成字符串數組
replace(reg,string):根據參數傳入的正則表達式或者字符（串），將字符串替換為新字符串
search(string):返回參數string出現的位置
②數學對象：
屬性：
LN10：返回10的自然對數
LOG10E：返回以10為底的e的對數
SQRT2:返回2的平方根
PI:返回圓周率，約3.141592653…
E:返回自然常量E，約2.718
方法：
random():返回 0 ~ 1 之間的隨機數。[0,1)
round(x):把數四舍五入為最接近的整數。
sqrt(x):返回數的平方根。
max(x,y)/min(x,y):返回 x 和 y 中的最大/小值。
abs(x):返回x的絕對值。
ceil(x)/floor(x):對數進行上/下舍入。
log(x):返回數的自然對數（底為e）。
pow(x,y):返回 x 的 y 次冪。
sin(x)/asin(x):返回x的正弦/反正弦值。
等
③日期對象
Date()：返回當日的日期和時間。
getDate():從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay():從 Date 對象返回一周中的某一天 (0 ~ 6)。
getMonth():從 Date 對象返回月份 (0 ~ 11)。
getFullYear():從 Date 對象以四位數字返回年份。
getHours():返回 Date 對象的小時 (0 ~ 23)。
getMinutes():返回 Date 對象的分鍾 (0 ~ 59)。
getSeconds():返回 Date 對象的秒數 (0 ~ 59)。
getMilliseconds():返回 Date 對象的毫秒(0 ~ 999)。
getTime():返回 1970 年 1 月 1 日至今的毫秒數。
④數組對象
Array():數組對象是一系列有序的值的集合，可以存放任何類型的數據，建議只存放一種類型數據
concat():將兩個數組連接成新數組
join():將數組中所有元素連接成字符串
pop()：移除數組的最后一個元素
push():在數組最后添加一個元素
unshift():在數組開始添加一個元素
reverse():反轉數組元素，倒敘
shift():移除數組的第一個元素
silce()：獲取子數組
splice()：插入、刪除或替換數組中的元素
sort()：對數組排序
⑤正則表達式對象
正則表達式主要用於表單驗證，如手機號、郵箱、身份證等
Ⅰ、在使用正則表達式之前，首先要創建正則表達式對象。JavaScript提供了兩種構建方法：
第一種：使用正則標識字符串
var reg = /pattern/[flags]
第二種：使用內置正則表達式對象
var reg = new RegExp("pattern",["flags"])
pattern表示要使用的正則表達式模式，也就是由的特殊字符或普通字符所組成的表達式。
flags標志位，可選項，有g（全文查找）、i（忽略大小寫）、m（多行查找）三種。
Ⅱ、正則表達式的常用匹配規則
\b ：匹配單詞邊界
\d ：匹配單個數字字符[0-9]
\f ：匹配單個換頁符
\n ：匹配單個換行符
\r ：匹配單個回車符
\s ：匹配任何空白符，包括空格、制表符、換頁符等[\f\n\r\t\v]
\t ：匹配單個制表符
\v ：匹配單個垂直制表符
\w ：匹配包含下划線的任意單詞字符[0-9a-zA-Z_]
^、$ 匹配字符串的開始和結束位置
* 匹配前面的子表達式0-多次
+ 匹配前面的子表達式1-多次
？ 匹配前面的子表達式0-1次
{n,m} 匹配前面的子表達式n-m次
. 匹配除“\n”之外的任意字符
(x|y) 匹配x或y
[] 匹配所包含的任意一個字符
[^] 匹配非包含的任意一個字符
[-] 匹配指定范圍內的任意一個字符
Ⅲ、正則表達式的常用方法
compile()方法。把正則表達式編譯為內部格式，從而執行更快
使用新正則去替換舊正則，主要用於提升比較復雜和耗時的處理過程的性能，一般情況下很少使用。
exec()方法。用正則表達式在字符串中查找，並返回包含結果的一個數組。
不僅用於判斷給定的字符串是否匹配，而且會返回匹配結果的詳細信息。
test()方法。返回一個bool值，它指出被查找的字符串是否匹配給定的模式。
使用頻繁，主要用於匹配測試。匹配成功返回true，否則返回false。
Ⅳ、正則表達式的一些常用匹配規則
中文字符：/^[\u4e00-\u9fa5]+$/
郵箱：/^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[\.]{1}[0-9a-zA-Z_]+$/;
電話：/^(\d{3,4}-)?\d{7,8}$/
月份： /^((0?[1-9])|1[0-2])$/
天數：/^((0?[1-9])|((1|2)[0-9])|30|31)$/
3）瀏覽器內置對象
瀏覽器對象是瀏覽器根據系統當前的配置和所裝載的頁面為JavaScript提供的一系列可供使用的對象。
如Window對象、Document對象、History對象等
①Window對象
屬性：
status ：指定瀏覽器狀態欄中顯示的臨時消息
screen ：有關客戶端的屏幕和顯示性能的信息。
history ：有關客戶訪問過的URL的信息。
location ：有關當前 URL 的信息。
document ：表示瀏覽器窗口中的HTML文檔
frames[] ：window對象數組
name ：窗口的名稱
navigator ：包含客戶端瀏覽器的信息
returnValue ：設置新窗口返回值
方法：
alert("提示信息") 顯示一個帶有提示信息和確定按鈕的對話框
confirm("提示信息") 顯示一個帶有提示信息、確定和取消按鈕的對話框
prompt("提示信息") 顯示一個帶有提示信息和默認值的對話框
open("url","name") 打開具有指定名稱的新窗口，並加載給定 URL 所指定的文檔；如果沒有提供URL，則打開一個空白文檔
close( ) 關閉當前窗口
showModalDialog( ) 在一個模式窗口中顯示指定的HTML文檔
setTimeout("函數",毫秒) 設置定時器：延遲指定毫秒后執行某個函數
setInterval("函數",毫秒) 設置定時器：間隔指定毫秒后重復執行某個函數
onLoad事件 在窗口或框架完成文檔加載時觸發
Tips: 通過模態窗口的returnValue屬性，可以實現窗口的傳值
②Document對象
每個載入瀏覽器的HTML文檔都會成為Document對象
屬性：
alinkColor 用戶單擊該鏈接的顏色，body.alink
linkColor 未被訪問過的鏈接的顏色
vlinkColor 被訪問過的鏈接的顏色
bgColor 文檔背景顏色，backgroundcolor
fgColor 文檔前景色，即文本顏色
title 文檔標題，title
cookie 設置或返回與文檔有關的所有 cookie
anchors[] 返回對文檔中所有Anchor對象的引用
forms[] 返回對文檔中所有Form對象引用
images[] 返回對文檔中所有Image對象引用
links[] 返回對文檔中所有Area和Link對象引用
方法：
getElementById() 返回擁有指定 id 的第一個對象的引用
getElementsByName() 返回帶有指定名稱的對象集合
getElementsByTagName() 返回帶有指定標簽名的對象集合
getElementsByClassName() 返回帶有指定Class標簽名的對象集合
open() 產生一個新文檔
close() 結束或關閉open()方法打開的文檔
write() 向文檔寫HTML或JavaScript代碼
writeln() 等同於 write() 方法，不同的是在每個表達式之后寫一個換行符。
集合屬性：
Forms：Document對象的forms[]數組包含文檔中的所有Form對象，數組里每個元素代表文檔中的一個<form>標簽
由於每個表單都可能包含多個按鈕、文本框、下拉框等表單元素，可以使用Form對象的elements[]屬性來獲取
Images：Document對象的images[]包含文檔中的所有Image對象數組，數組中每個元素代表文檔中的一個<img>標簽
Image對象的src屬性既可讀又可寫。可以通過這一屬性獲取圖像的URL，還可以設置這一屬性，使瀏覽器裝載一個新圖像並顯示在同一地方。新圖像最好與原始圖像具有相同的寬度和高度，以防影響界面。
Links/Anchors：Document對象的links[]包含文檔中的所有Link對象，數組中每個元素代表一個<a href="">標簽
Document對象的anchors[]包含文檔中的所有Anchor對象，數組中每個元素代表一個<a name="">標簽
③History對象
方法：
back( ) ：加載 History 列表中的上一個 URL --back ( )方法相當於后退按鈕;
forward( ) ：加載 History 列表中的下一個 URL --forward ( ) 方法相當於前進按鈕;
go("url" or number) ：加載 History 列表中的一個 URL或要求瀏覽器移動指定的頁面數 --go(1)代表前進1頁，等價於forward( )方法；go(-1) 代表后退1頁，等價於back( )方法；
④Location對象
屬性：
host ：設置或檢索位置或 URL 的主機名和端口號
hostname ：設置或檢索位置或 URL 的主機名部分
href ：設置或檢索完整的 URL 字符串
方法：
assign("url") ：加載 URL 指定的新的 HTML 文檔。
reload() ：重新加載當前頁
replace("url") ：通過加載 URL 指定的文檔來替換當前文檔
第六章 JavaScript事件及應用
一、時間的注冊
1、將事件綁定到元素屬性
如：<input type="button" value="確定" onclick="show()" />
2、將事件綁定到對象屬性
如：var btn = document.getElementById("btn");
btn.onclick = function () {
alert("動態事件");
}
3、Window對象常用事件
onload() :對象裝載完成后觸發
onscroll() :窗口的滾動條被拖動時觸發
onresize() :窗口的大小改變時觸發
onblur()/onfocus() :窗口失去/獲得焦點時觸發
onerror() :遇到執行錯誤時觸發
onunload() :對象被卸載后觸發
4、Document對象
每個載入瀏覽器的HTML文檔都會成為Document對象
onload() 對象裝載完成后觸發
onkeydown 按下一個鍵
onkeyup 松開一個鍵
onkeypress 按下然后松開一個鍵
onunload() 對象被卸載后觸發
onmousedown 按下鼠標鍵
onmousemove 移動鼠標
onmouseout 鼠標離開當前頁面
onmouseover 鼠標移動到當前頁面
onmouseup 松開鼠標鍵
onclick 單擊鼠標鍵
ondblclick 雙擊鼠標鍵
5、表單元素-表單
屬性 action 表單數據將被提交的頁面
method 提交表單的方法，get/post
方法 submit() 提交表單
事件 onsubmit 提交表單時觸發，返回false時取消提交
6、表單元素-文本框
屬性 value 文本框的內容
readonly 只讀，只允許后台修改
方法 focus() 使文本框獲得焦點
select() 選中文本框內容
事件 onblur 文本框失去焦點時觸發
onfocus 文本框獲得焦點時觸發
onchange 文本框內容改變且失去焦點時觸發
7、表單元素-按鈕
屬性 value 按鈕顯示的內容
disabled 表明按鈕是否可用
事件 onclick 單擊按鈕時觸發
ondblclick 雙擊按鈕時觸發
8、表單元素-單選框
屬性 value 單選框的value值
checked 單選框的選中狀態
事件 onblur 單選框失去焦點時觸發
onfocus 單選框獲得焦點時觸發
onclick 單擊單選框時觸發
9、表單元素-復選框
屬性 value 復選框的value值
checked 復選框的選中狀態
事件 onblur 復選框失去焦點時觸發
onfocus 復選框獲得焦點時觸發
onclick 單擊復選框時觸發
10、表單元素-下拉列表
屬性 value 被選中項的value值
length 下拉選項的個數
selectedIndex 選中項的索引，可以修改選中項
options 所有下拉選項的數組
事件 onblur 下拉列表失去焦點時觸發
onfocus 下拉列表獲得焦點時觸發
onchange 選項發生改變時觸發
11、Event事件對象
srcElement 產生該事件的元素
type 事件類型，字符串
clientX/clientY 相對於用戶區的坐標
screenX/screenY 相對於屏幕的坐標
button 鼠標按鍵類型
keyCode 按鍵代碼
altKey(ctrl、shift) Alt（Ctrl、Shift）鍵按下為true
cancleBubble 表明該事件是否向上傳遞
returnValue 事件返回值
fromElement 被移動的元素
toElement 正在被移動的元素
12、阻止事件冒泡
第七章 JavaScript特效制作
一、樣式操作 style
style.backgroundColor
style["background-color"]
style["backgroundColor"]
二、屬性操作 attributes
id
attributes["data-type"]
三、QQ分組實例
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 180px;
border: 1px solid #ccc;
}
.container .groups {
background-color: #008B8B;
text-align: center;
color: white;
padding: 6px;
border: 3px solid aliceblue;
}
.container .content {
padding: 10px;
line-height: 26px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var groups = document.getElementsByClassName("groups");
for (var i = 0; i < groups.length; i++) {
groups[i].ondblclick = function() {
var sibling = this.nextElementSibling;
if (sibling.style.display == "none") {
sibling.style.display = "block";
} else {
sibling.style.display = "none"
}
}
}
}
</script>
</head>
<body>
<div class="container">
<div class="groups">同學</div>
<div class="content">
張三<br />
李四<br />
王五
</div>
<div class="groups">朋友</div>
<div class="content">
齊天大聖<br />
滅霸
</div>
<div class="groups">師長</div>
<div class="content">
高數老師<br />
謝老師
</div>
</div>
</body>
</html>
4、 Tab選項卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
padding: 0px;
margin: 0px;
}
ul li {
display: table-cell;
padding: 10px;
border: 1px solid #666;
width: 78px;
background-color: darkcyan;
text-align: center;
color: white;
cursor: hand !important;
}
ol {
padding-left: 16px;
margin: 10px;
}
div {
border: 1px solid #ccc;
width: 298px;
}
.active {
background-color: mediumaquamarine;
}
</style>
<script type="text/javascript">
window.onload = function() {
var lis = document.getElementsByTagName("ul")[0].children;
var ols = document.getElementsByTagName("ol");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
var li = document.getElementsByClassName("active");
for (var j = 0; j < li.length; j++) {
li[j].className = "";
}
// for (var j = 0; j < tools.length; j++) {
//// if (tools[j] != this) {
// tools[j].className = "";
// }
// }
this.className = "active";
var id = this.attributes["data-bind-id"].value;
for (var j = 0; j < ols.length; j++) {
if (ols[j].id === id) {
ols[j].style.display = "block";
} else {
ols[j].style.display = "none";
}
}
}
}
}
</script>
</head>
<body>
<ul>
<li data-bind-id="news" class="active">新聞</li>
<li data-bind-id="tech">科技</li>
<li data-bind-id="econ">經濟</li>
</ul>
<div>
<ol id="news">
<li><a href="#">天使之淚，百感交集</a></li>
<li><a href="#">疫情實時動態</a></li>
<li><a href="#">科學是抗疫最有力的武器</a></li>
</ol>
<ol id="tech" style="display: none;">
<li><a href="#">不用等iOS 14，消息稱Apple..</a></li>
<li><a href="#">新零售的“達摩克利斯之劍”</a></li>
<li><a href="#">科技圖鑒｜居家隔離的寶可夢</a></li>
</ol>
<ol id="econ" style="display: none;">
<li><a href="#">契機！黎明前的黑暗！</a></li>
<li><a href="#">央媽出手，智能存款危險了！</a></li>
<li><a href="#">各地多措並舉 恢復經濟社會秩序</a></li>
</ol>
</div>
</body>
</html>