Front-end pen question set (3)

Thank you for your patience. No. 21

What is the role of the 'data-'attribute?

Data-provides custom attributes for front-end developers. These attribute sets can be obtained through the dataset attribute of the object. browsers that do not support this attribute can use the getattribute method. PPK mentioned the use of the rel attribute. The lightbox Library promotes the rel attribute. HTML5 provides data-as an alternative, so that you can better use custom attributes.

No. 22

Add a shuffle () method similar to PhP for each array object in JavaScript.

var data = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);        if (!Array.prototype.shuffle) {        Array.prototype.shuffle = function() {            for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);            return this;        };    }         alert(data.shuffle());

No. 23

What is the difference between "pseudo-class" and "pseudo-element" in CSS? Here are several application scenarios of pseudo elements.

No. 24

Background

<div id="J_banner"> ... </div>

Images-set attribute of css3

background-image: url(1x.png);background-image: -webkit-image-set(url(1x.png) 1x,url(2x.png) 2x);

No. 25

The following is an HTML code that shows effect. Please provide a piece of CSS so that the code can be displayed in Figure B.

 

<Ul> <li> <a href = "#">  </a> <p> text 1 </P> </LI> <li> <a href = "#">  </A> <p> text 2 </P> </LI> </ul> <li> Text 3 </LI> <li> text 4 </Li> <li> text 5 </LI> <li> text 6 </LI> </ul>

Requirements:
1. the HTML structure cannot be modified;
2.css does not have to consider the default style of the browser. The layout is correct;
3. strict alignment is not required. If necessary, the element size can be customized.

There is a node on the page <Div id = "A" style = "width: 200px; Height: 200px;"> </div>. When you move the cursor to this node, the transparency of the node changes from 100 to 20:

No. 26

VaR A = [-3,-, 9], B = [-4,-, 8];
// Returns a merged array [-4,-3,-2,-,].

No. 27

// Complete the following functions. True is returned only when P is an array.
// Multiple implementation methods are provided, and each implementation method is not necessarily perfect. If not perfect, you need to describe the limitations of each implementation.
Function isarray (p ){
// Your code is here
}

No. 28

<p>1</p><p>2</p><p>3</p>

Write a CSS to make the number 1 blue

p:first-child{color:blue}

No. 29

Please let an element (10px * 10px) in the page perform a circular motion around the coordinate (200,300)

No. 30

Use HTML to implement the following table structure:

Front-end pen question set (3)