Web前端開發筆試&面試_04_20161019MTBS

時間 2019-11-25

標籤 web 前端開發筆試面試 20161019mtbs mtbs 欄目 HTML 简体版

原文原文鏈接

1.運用CSS3 ，實現div 沿Y 軸上下循環運動的動畫。javascript

我寫是：-webkit-animation:xz 3s linear 1s infinite //即XZ軸變化，Y軸不變css

正確答案是：html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:1s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
}

@keyframes myfirst
{
    0%   {background:red; left:100px; top:0px;}
    50% {background:green; left:100px; top:200px;}
    100%   {background:red; left:100px; top:0px;}
}
</style>
</head>
<body>

<p><b>注意:</b> 該實例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
<div></div>
</body>
</html>

原來的這樣是實現上右下左-左下右上循環的：前端

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

2. 書寫高效CSS時會有哪些問題須要考慮？（ref:CSS 在工程中改變——面向對象的CSS （OO CSS））java

（一）不要直接定義子節點，應把共性聲明放到父類。web

.mod .inner {...} // .mod 下面的 inner數據庫

.inner {...} // 不是很建議的聲明canvas

（二）結構與皮膚相分離。緩存

<div class="container simpleExt"></div> //html 結構服務器

.container {...} //控制結構的class

.simpleExt {...} //控制皮膚的class

（三）容器與內容相分離。

<div class="container"><ul><li>排行</li></ul></div> //html 結構

.container ul{...} //ul依賴了容器

<div class="container"><ul class="rankList"><li>排行</li></ul></div> //html 結構

.rankList ul{...} //解除與容器的依賴，能夠從一個容器轉移到其餘容器

（四）抽象出可重用的元素，建好組件庫，在組件庫內尋找可用的元素組裝頁面。

（五）往你想要擴展的對象自己增長 class 而不是其父節點。

（六）對象應該保持獨立性

<div class="container"><div class="mod"></div></div> //html 結構

.container {...}

.container .mod {...} //控制結構的class

//應該寫成以下：

<div class="container mod"> </div> //html 結構

（七）避免使用ID選擇器，權重過高，沒法重用。

（八）避免位置相關的樣式

#header .container {...}

#footer .container {...}

//可直接寫成 .container {...}

#header h1 {...}

#footer h1 {...}

h1,.h1 { }

h2,.h2 { }

（九）保證選擇器相同的權重。

（八）類名應該剪短、清晰、語義化，OO CSS 的名字並不影響html 語義化。

3. 如下代碼：

var a=1;
function test() {
    alert(a);
    a=2;
    alert(this.a);
    this.a=4;
    var a=3;
    alert(a);
}
test();
alert(a);

//按順序輸出alert 的值。

我答的是：undefined,1,3,1

答案是：undefined,1,3,4

4. jQuery 中 $(document).ready()和window.onload有什麼區別。

（ref: http://www.jb51.net/article/21628.htm ）

1）執行時間

  window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
  $(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

2）編寫個數不一樣

   window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個
$(document).ready()能夠同時編寫多個，而且均可以獲得執行。

3）簡化寫法

      window.onload沒有簡化寫法。
    $(document).ready(function(){})能夠簡寫成$(function(){});