純CSS實現(xiàn)紅綠燈效果(面試常見)
發(fā)布時間：2018-02-28 15:54:30 作者：佚名 
我要評論
我要評論在面試過程中，經(jīng)常會問到使用純css如何實現(xiàn)紅綠燈效果，下面小編把實現(xiàn)代碼分享到腳本之家平臺，需要的朋友參考下吧
先看題，別看答案試下吧 ~_~
1、下面的代碼輸出的內(nèi)容是什么？
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，該方法其實是一個高階函數(shù)，返回一個低階函數(shù)，精髓就在這個低階函數(shù)中的this，
注意這里的低階函數(shù)其實是在window環(huán)境中運行，所以this應(yīng)該指向的是window
所以我的答案是：'hello undefined'（但這個答案是錯誤的，哈哈）
圈套：殊不知原生window是有name屬性的，默認值為空
所以正確答案應(yīng)該是：hello
2、給你一個div，用純css寫出一個紅綠燈效果，按照紅黃綠順序依次循環(huán)點亮（無限循環(huán)）
當時沒寫出來，現(xiàn)場手寫這么多代碼是有難度的，下面是我后面實現(xiàn)代碼(省略了瀏覽器兼容性前綴)
<div id="lamp"></div>
/*
思路：
總共三個燈，分別紅黃綠，要一個一個按順序點亮，我們可以這樣暫定一個循環(huán)需要10秒中，每盞燈點亮3秒，
那么在keyframes中對應(yīng)寫法就如下所示（紅燈點亮時間為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;
}
總結(jié)
以上所述是小編給大家介紹的純CSS實現(xiàn)紅綠燈效果(面試常見)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這篇文章主要介紹了你應(yīng)該知道的5個CSS面試問題小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-02-05
- 這篇文章主要介紹了前端HTML+CSS筆試題面試題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-10-15
- CSS是一門不斷在發(fā)展的“語言”，在我們?nèi)粘Ｃ嬖嚽岸斯ぷ鞯臅r候是必不可少的一個知識點，下面這篇文章主要給大家分享介紹了關(guān)于前端面試必備之CSS3新特性的相關(guān)資料，文中2017-09-05
- 本篇小編為大家介紹在面試時可能被問到的一些CSS問題，希望對有需要的朋友能有所幫助2013-04-08
- 這篇文章主要介紹了CSS常見面試問題匯總(推薦),非常不錯，在前端面試中經(jīng)常會提到，今天小編把內(nèi)容整理分享到腳本之家平臺，需要的朋友可以參考下2020-02-18