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