純CSS實現紅綠燈效果 面試常見

2022-09-24 23:45:13 字數 1102 閱讀 3535

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

1、下面的**輸出的內容是什麼?

function o(name)

o.prototype.hello=function()

}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屬性的,預設值為空

所以正確答案應該是:hell程式設計客棧o

2、給你乙個div,用純css寫出乙個紅綠燈效果,按照紅黃綠順序依次迴圈點亮(無限迴圈)

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

/*思路:

總共三個燈,分別紅黃綠,要乙個乙個按順序點亮,我們可以這樣暫定乙個迴圈需要10秒中,每盞燈點亮3秒,

那麼在keyframes中對應寫法就如下所示(紅燈點亮時間為10%--40%,黃燈點亮時間為40%--70%,綠燈點亮時間為70%--100%)

*/@keyframes redlamp

9.9%

10%40%

40.1%

100%

}@keyframes yellowlamp

39.9%

40%70%

70.1%

100%

}@keyframes greenl程式設計客棧amp

69.9%

70%100%

thhkxt}

#lamp,#lamp:before,#lamp:after

#lamp

#lamp:befo程式設計客棧re

#lamp:after

總結本文標題: 純css實現紅綠燈效果(面試常見)

本文位址:

Python 實現紅綠燈

一 通過event來實現兩個或多個執行緒間的互動,下面是乙個紅綠燈的例子,即起動乙個執行緒做交通指揮訊號燈,乙個執行緒做車輛,車輛行駛按紅燈停,綠燈行的規則。usr bin python coding utf 8 這是我用來練習python執行緒鎖的測試指令碼 import threading,ti...

純CSS實現吸頂效果

position的屬性有哪些?還有乙個position的屬性值 position sticky position sticky 粘性定位,是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位,之後為固定定位。著作權歸作者所有。注意 1 position sticky還是乙個實驗性的屬性值。著作...

純css實現進度條效果

乙個完整的進度條效果其實可以拆分一下 一段背景 一小段的靜態的斜紋進度條 斜紋進度條用線性漸變 linear gradient 類實現,原理很好理解,2個引數 1 角度 2 關鍵點 包含2個引數,1是顏色,2是長度位置 display inline block width 100px height ...