最近兩周突然被派了一個(gè)比較急的活，需要我做出幾個(gè)頁面，是展廳需要使用的新頁面，對于不怎么會前端的我，兼職就是個(gè)巨大的挑戰(zhàn)，以實(shí)戰(zhàn)代學(xué)習(xí)，今天終于把頁面做完了，總結(jié)一下熬過的這兩周。

1.js中定時(shí)器的問題

要做出一些如輪播的動態(tài)效果，通過js寫一個(gè)計(jì)時(shí)器必不可少，但其中有一個(gè)很重要的點(diǎn)要注意，無論是setTimeOut還是set。。。都是單線程執(zhí)行的。

for( var i=0;i<3;i++){
    setTimeout(function(){
        console.log(i);
    }
    ,300);
}
// 輸出結(jié)果 3,3,3

輸出結(jié)果并不是我們所預(yù)想的1,2,3。當(dāng)然，這個(gè)要涉及到setTimeout 的原理了，即使把300ms改成0ms，同樣也會輸出3,3,3。具體可以查看博文 setTimeout(0) 的作用 。這里摘取其中一段說明。

JavaScript是單線程執(zhí)行的，無法同時(shí)執(zhí)行多段代碼。當(dāng)某段代碼正在執(zhí)行時(shí)，后續(xù)任務(wù)都必須等待，形成一個(gè)隊(duì)列。只有當(dāng)前任務(wù)執(zhí)行完畢，才會從隊(duì)列中取出下一個(gè)任務(wù)——也就是常說的“阻塞式執(zhí)行”。

因此在遇上需要使用for循環(huán)+延時(shí)器的時(shí)候，就會出問題。解決方式如下
1.對使用延時(shí)器的函數(shù)使用遞歸
2.使用addEventListener去取代延時(shí)器，參考(http://www.itdecent.cn/p/c64bfbcd34c3)

2.數(shù)字滾動特效寫法學(xué)習(xí)

(http://www.htmleaf.com/jQuery/Layout-Interface/201807275248.html)

3.js的常見幾種操作樣式及標(biāo)簽的方法

4.頁面中主要使用到的一些東西

• （‘獲取元素’）animate.（{修改位置及大小等屬性}），用來進(jìn)行動畫轉(zhuǎn)場、輪播等
• fadeIn和fadeOut實(shí)現(xiàn)漸入漸出
• 引入echarts，在js中進(jìn)行柱狀圖、餅圖等編寫，實(shí)現(xiàn)圖表
• 引入編寫好的od分析工具頁面，<iframe>標(biāo)簽引入

5.監(jiān)聽器

• 通過addEventListener（event，function，use capture）來監(jiān)聽時(shí)間，use capture為ture時(shí)是捕獲階段進(jìn)行監(jiān)聽，false為冒泡階段進(jìn)行監(jiān)聽。
• 與之相對的removeEventListener（），不能匿名function進(jìn)行監(jiān)聽刪除。
• IE8之前的舊版本用attachEvent進(jìn)行監(jiān)聽

6.js中的Array對象

• 是一個(gè)數(shù)組對象，可{“a”：“1”，...}放入，可用length獲取長度，用prototype去操作屬性屬性和方法
• Array.prototype.slice.call(arguements)表示返回?cái)?shù)組對象中的指定的數(shù)組