Pure CSS to achieve traffic light effect (common in interview)

Time:2019-10-22

Let’s look at the questions first, not the answers~_~

1. What is the output content of the following code?


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();

Analysis:

1. When class o is instantiated, an attribute name is assigned, and the default value is world. Then, when instantiating, no value is given, so the name attribute is world.

2. The o class has a prototype method Hello, which is actually a high-order function. It returns a low-order function, the essence of which is this.

        Note that the low-order function here is actually running in the window environment, so this should point to the window.

So my answer is: ‘hello undefined’.

Trap: it is not known that the native window has the name attribute, and the default value is empty

So the correct answer should be: Hello

2. Give you a div, write a traffic light effect with pure CSS, and turn it on in the order of red, yellow and green (infinite cycle)

I didn’t write it out at that time. It’s difficult to write so many codes on site. Here is the code I implemented later (omitting the browser compatibility prefix)

<div id="lamp"></div>
/*
Train of thought:
    There are three lights in total, red, yellow and green. To light one by one in order, we can make a tentative cycle like this. In 10 seconds, each light will light up for 3 seconds.
    Then the corresponding writing method in keyframes is as follows (the time of red light is 10% - 40%, the time of yellow light is 40% - 70%, and the time of green light is 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;
}

summary

The above is the pure CSS that Xiaobian introduced to you to achieve the traffic light effect (common in interviews). I hope it can help you. If you have any questions, please leave a message to me, and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!

Recommended Today

Single and multiple buttons are styled with pictures

I’ve always seen people asking how to style and enlarge the buttons of radio buttons and multi buttons? Let’s share an example I did. 1. First make the button into a picture  2.html page Copy code The code is as follows: <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <script type=”text/javascript” src=”jquery-1.10.2.min.js”></script> <script type=”text/javascript”> […]