面試題之純css實現紅綠燈效果（ps：真的很純）

LFE發表於2018-02-27
面試題CSS

先看題，別看答案試下吧 ~_~

1、下面的程式碼輸出的內容是什麼？

function O(name){
    this.name=name||'world';
}
O.prototype.hello=function(){
    return function(){
        console.log('hello '+this.name)
    }
}
var o=new O;
var hello=o.hello();
hello();
複製程式碼
分析：
    1、O類例項化的時候賦值了一個屬性name，預設值為world，那麼在例項化的時候並未給值，所以name屬性為world
    2、O類有一個原型方法hello，該方法其實是一個高階函式，返回一個低階函式，精髓就在這個低階函式中的this，
        注意這裡的低階函式其實是在window環境中執行，所以this應該指向的是window
複製程式碼

所以我的答案是：'hello undefined'（但這個答案是錯誤的，哈哈）

圈套：殊不知原生window是有name屬性的，預設值為空
複製程式碼

所以正確答案應該是：hello

2、給你一個div，用純css寫出一個紅綠燈效果，按照紅黃綠順序依次迴圈點亮（無限迴圈）

  • 當時沒寫出來，現場手寫這麼多程式碼是有難度的，下面是我後面實現程式碼(省略了瀏覽器相容性字首)

<div id="lamp"></div>

複製程式碼

/*
思路：
    總共三個燈，分別紅黃綠，要一個一個按順序點亮，我們可以這樣暫定一個迴圈需要10秒中，每盞燈點亮3秒，
    那麼在keyframes中對應寫法就如下所示（紅燈點亮時間為10%--40%，黃燈點亮時間為40%--70%，綠燈點亮時間為70%--100%）
*/

@keyframes redLamp{
    0%{background-color: #999;}
    9.9%{background-color: #999;}
    10%{background-color: red;}
    40%{background-color: red;}
    40.1%{background-color: #999;}
    100%{background-color: #999;}
}
@keyframes yellowLamp{
    0%{background-color: #999;}
    39.9%{background-color: #999;}
    40%{background-color: yellow;}
    70%{background-color: yellow;}
    70.1%{background-color: #999;}
    100%{background-color: #999;}
}
@keyframes greenLamp{
    0%{background-color: #999;}
    69.9%{background-color: #999;}
    70%{background-color: green;}
    100%{background-color: green;}
}
#lamp,#lamp:before,#lamp:after{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #999;
    position: relative;
}
#lamp{
    left: 100px;
    animation: yellowLamp 10s ease infinite;
}
#lamp:before{
    display: block;
    content: '';
    left: -100px;
    animation: redLamp 10s ease infinite;
}
#lamp:after{
    display: block;
    content: '';
    left: 100px;
    top: -100px;
    animation: greenLamp 10s ease infinite;
}
複製程式碼

相關文章