最近天氣干燥，小白和老朱都感冒了，雖然狀態(tài)不好，小白還是沒(méi)有停止HTML5前進(jìn)的腳步，他憋了一股勁一定要在2018年到來(lái)之前提高一個(gè)臺(tái)階。看到老朱來(lái)到辦公室，小白趕緊湊過(guò)去：“朱哥，再來(lái)點(diǎn)新東西吧！”

老朱啞著嗓子說(shuō)道：“你先試著把昨天的彈窗增加一個(gè)出現(xiàn)的動(dòng)畫(huà)吧，正好熟悉一下CSS3動(dòng)畫(huà)。”

小白：“消失的動(dòng)畫(huà)用不用做？”

“消失先不用做，消失我們用了remove直接移除了彈窗容器，就算加上css3動(dòng)畫(huà)也顯示不出來(lái)，這塊功能我們以后有時(shí)間再說(shuō)。彈窗控件以后你肯定會(huì)經(jīng)常使用，你可以根據(jù)以后的需求慢慢完善它?！?/p>

“好吧！那我先把CSS3動(dòng)畫(huà)加上?！?/p>

小白做好以后找到老朱說(shuō)道：“我給中間的彈窗添加了一個(gè)透明度從0變到1的過(guò)程，寬度也做了變化。背景添加了一個(gè)透明度從0變到0.5的過(guò)程。你看一下效果。”

“好的！彈窗就先這樣吧！以后慢慢完善。既然我們已經(jīng)做了一個(gè)簡(jiǎn)單的彈窗控件，是不是在這個(gè)基礎(chǔ)上還能做一個(gè)頂部提示信息的控件？頂部提示信息也很有用的，經(jīng)常有一些提示信息是不需要用戶(hù)確認(rèn)的，出現(xiàn)幾秒鐘后消失就可以?！?/p>

小白想了想：“恩，可以?。〔坏茏鎏崾拘畔?，還能做其他的一些彈窗功能，我先試著實(shí)現(xiàn)提示信息的功能吧！”。

大概過(guò)了半個(gè)小時(shí)時(shí)間，小白找到了老朱，他對(duì)老朱說(shuō)：“我給Layer添加了一個(gè)msg方法用來(lái)添加提示信息，可是沒(méi)有確定按鈕我該怎么讓它消失呢？您先看一下我的代碼吧！”

“頁(yè)面里面我做了兩個(gè)色塊，點(diǎn)擊色塊提示當(dāng)前選中的色塊顏色值?！?/p>

老朱說(shuō)道：“你可以使用JavaScript里面的setTimeout函數(shù)，這個(gè)函數(shù)可以在特定時(shí)間結(jié)束以后執(zhí)行一個(gè)或多個(gè)操作。setTimeout（‘要執(zhí)行的js代碼字符串’，等待的毫秒數(shù)）。你在Layer的msg方法中增加一個(gè)setTimeout函數(shù)處理一下就可以了?！?/p>

“恩，果然可以了！我再調(diào)整一下css樣式，捎帶把CSS3動(dòng)畫(huà)加上。”

老朱看了以后說(shuō)道：“不錯(cuò)嘛，進(jìn)步很快，還讓提示信息背景寬度做了適配。不過(guò)還有些問(wèn)題，你現(xiàn)在通過(guò)class進(jìn)行查找移出提示信息，如果連續(xù)點(diǎn)色塊，提示信息就會(huì)產(chǎn)生沖突，所以最好能給每一個(gè)提示信息增加一個(gè)索引或者id，這樣就不會(huì)產(chǎn)生沖突了。你再試試！”

過(guò)了一會(huì)兒，小白高興的找到老朱，說(shuō)道：“我處理好了，現(xiàn)在不會(huì)沖突了，你看一下效果！”

“我通過(guò)當(dāng)前頁(yè)面中提示信息的數(shù)量給新的提示信息增加id，當(dāng)前提示信息的位置根據(jù)上一條未消失信息的位置來(lái)確定?！?/p>

老朱看完以后說(shuō)道：“恩，不錯(cuò)！不過(guò)還能細(xì)化，以后使用的時(shí)候碰到具體問(wèn)題你再慢慢優(yōu)化它吧！你現(xiàn)在已經(jīng)做得很不錯(cuò)了?！?/p>

小白說(shuō)：“恩，這些功能我以后可以根據(jù)自己的理解對(duì)它進(jìn)行優(yōu)化。把功能做成控件使用的時(shí)候真是太方便了，我以后要給用戶(hù)提示一些信息的時(shí)候直接使用Layer.msg()，傳入要提示的話(huà)就可以了?！?/p>

想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長(zhǎng)之路》的動(dòng)力！

本篇文章與31、32、33、34內(nèi)容連續(xù)