先看題，別看答案試下吧 ~_~
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;}總結
以上所述是小編給大家介紹的純CSS實現紅綠燈效果(面試常見)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
