【JS每日練習】阿里巴巴web前端開發面試題
阿新 • • 發佈:2019-01-03
今天在瀏覽一個網站的時候,找到了阿里巴巴的Web前端面試題,然後自己做了下,跟大家分享一下
第一部分:用CSS實現佈局
讓我們一起來做一個頁面
首先,我們需要一個佈局。
請使用CSS控制3個div,實現如下圖的佈局。
第二部分:用javascript優化佈局
由於我們的使用者群喜歡放大看頁面
於是我們給上一題的佈局做一次優化。
當滑鼠略過某個區塊的時候,該區塊會放大25%,
並且其他的區塊仍然固定不動。
提示:
也許,我們其他的佈局也會用到這個放大的效果哦。
可以使用任何開原始碼,包括曾經你自己寫的。
關鍵字:
javascript、封裝、複用
第三部分:處理緊急情況
好了,我們的頁面完成了。
於是我們將頁面釋出上網。
突然,晴天霹靂,頁面無法訪問了,這時候,你會怎麼做?
這三道題我個人覺得挺基礎的,但也會碰到一些問題,這裡我只是處理了下第一個div的行為,其他的類似處理,程式碼如下
<!Doctype html> <html> <head> <meta charset=gb2312> <title>阿里巴巴面試題</title> <style> *{margin:0;padding:0;} div{background-color:#92c9c9;border:1px solid #00a7f7} .div1{width:30%;height:200px;float:left;} .div2{width:68%;height:620px;float:right;} .div3{float:left;width:30%;height:400px;margin-top:20px;position:absolute;top:200px;left:0;} </style> <script> function scaleObj(obj) { obj.style.border = "1px solid #000"; obj.style.backgroundColor = '#9bffff'; obj.style.position = "absolute"; obj.style.zIndex = 1; obj.style.width = "460px"; obj.style.height = "260px"; } function restoreSty(obj) { obj.style.border = '1px solid #00a7f7'; //為了相容IE,這裡最好不要填空 obj.style.backgroundColor = ''; obj.style.width = ''; obj.style.height = ''; } </script> </head> <body> <div class="div1" id="div1" onmouseover="scaleObj(this)" onmouseout="restoreSty(this)"></div> <div class="div2"></div> <div class="div3"></div> </body> </html>
程式碼只是說明了前兩個問題,那麼第三個問題怎麼回答呢?
對大多數人來說,尤其是程式碼控,難的不是程式碼,而是理論問題或者口頭的表達,作為一個非計算機專業的人士,我的回答僅供參考
第一條毫無疑問是伺服器的原因:繁忙的伺服器日積月累,終於有一天垮了,伺服器崩潰也是一個常常能夠遇到的問題,壓力大啊...
第二點:莫非是上傳過程導致的問題,上傳網頁也是一個技術活,你確定你做對了嗎?
第三點:最弱智的,最愚蠢的,請問你聯網了?
第四點:瀏覽器相容性造成頁面無法顯示的可能性幾乎沒有,但你也可以嘗試著換一個瀏覽器
第五點:我該換換腦子了,或許百度一下你可以找到原因的