您好,登錄后才能下訂單哦!
這篇文章主要介紹純CSS如何實(shí)現(xiàn)紅綠燈效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
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)亮(無(wú)限循環(huán))
當(dāng)時(shí)沒(méi)寫出來(lái),現(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; }
以上是“純CSS如何實(shí)現(xiàn)紅綠燈效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。