H5C3 and js exercises

H5C3

What's the difference between H5C3 and Html , css

New features of H5:

Drap and drop API ondrop

Drag and drop is a common feature where an object is grabbed and then dragged to another location.
In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

Custom attribute data-id
Semantic and better content tags (header, nav, footer, aside, article, section)
Audio, video (audio, video) What if the browser does not support autoplay? Add autoplay to the attribute
Canvas
- The getContext() method returns a context for drawing on the canvas. Canvas.getContext(contextID) The parameter contextID specifies the type of canvas you want to draw on. Currently the only legal value is "2d", which specifies two-dimensional drawing, and causes this method to return an environment object, which exports a two-dimensional drawing API.
- cxt.stroke() Without this step, the line will not be displayed on the canvas
- What is the difference between canvas and image when processing pictures?
  image describes pictures in the form of objects, and canvas draws pictures on the canvas through a special API.
Geolocation API
Local offline storage localStorage Long-term storage data will not be lost after the browser is closed
The sessionStorage data is automatically deleted after the browser is closed
Form controls calendar , date , time , email , url , search , tel , file , number
New technology webworker, websocket, Geolocation

New features of Css3:

Color: Added RGBA, HSLA mode
Text shadow (text-shadow)
Border: rounded corners (border-radius) Border shadow: box-shadow
Box model: box-sizing
背景:background-size background-origin background-clip
Gradient: linear-gradient , radial-gradient
Transition: transition can be animated
Custom animation animate @keyfrom
Media query multi-column layout @media screen and (width:800px) {…}
border-image
2D transform; transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
3D conversion
font icon font-face
Elastic layout flex
pseudo class selector

Label element classification, and characteristics
1. block element

Typical, Div, h1-h6, p, ul, li

Features: ★Exclusive line

★Width and height can be set

★ Under nesting (containment), the width of the sub-block element (if not defined) is the same as the width of the parent block element by default.

2. Inline elements

Typical representatives span ,a, ,strong , em, del, ins

Features: Display on one line

★The width and height cannot be set directly

★The width and height of the element are the width and height of the content.

inline-block element

Typical representative input img

Features: Display on one line

★Width and height can be set

3. What are the implementation methods of the Holy Grail layout (double flying wing layout)?

padding value

Step 1: The big box contains three sub-boxes

Step 2: The width of the large box is 100%, relative positioning and setting the left and right padding values

Step 3: The width and height of the left and right sub-boxes are fixed, and they are absolutely positioned to both sides

Step 4: Set the width of the middle box to 100% (adaptive)

max _

Step 1: The big box contains three sub-boxes

Step 2: The width of the large box is 100%, relative positioning

Step 3: The width and height of the left and right sub-boxes are fixed, and they are absolutely positioned to both sides

Step 4: Do not set the width of the middle box, but set the left and right magin values

flex layout

Step 1: The big box contains three sub-boxes
Step 2: The width of the big box is 100%, display: flex;
Step 3: The width and height of the left and right sub-boxes
are fixed Step 4: The middle box is set to flex: 1; remaining space in the box)

4. calc function

Step 1: The big box contains three sub-boxes
Step 2: The width of the big box is 100%, relative positioning
Step 3: The left and right sub-boxes are fixed in width and height, and they are absolutely positioned to both sides
Step 4: Set the width of the middle box to calc( 100% - width of both child boxes and) Absolute positioning next to the left box/right box

What are the properties and property values of the elastic box model, and what are the effects

1:flex-direction: ; Specifies the arrangement of flex elements in the container

Optional values:

row Default value, flex elements are arranged horizontally in the container (left to right)

Main axis - from left to right

row-reverse flex elements are arranged horizontally in reverse (right to left) in the container

Main axis - from right to left

column The flexible elements are arranged vertically (from top to bottom)

Main axis - top to bottom

column-reverse elastic elements arranged vertically (bottom to top)

Main axis - bottom up

Main axis: The arrangement direction of elastic elements is called the main axis

Side axis: The direction perpendicular to the main axis is called the side axis

2. Flex container properties

1: flex-direction:;

2: flex-wrap: ; Set whether the flexible element wraps automatically in the flexible container

Optional values:

nowrap The default value, the element will not automatically wrap

The wrap element automatically wraps along the minor axis

wrap-reverse element wraps in the opposite direction of the secondary axis

3: flex-flow: shorthand attribute of wrap and direction, and there is no order requirement

The default value is row nowrap

4: How justify-content allocates the blank space on the main axis (how the elements on the main axis are arranged)

Optional values:

flex-start elements line up along the main axis

flex-end elements align along the end edge of the main axis

center elements are centered

space-around distributes white space to both sides of the element

space-between Space is evenly distributed between elements

space-evenly White space is distributed to one side of the element (less compatible)

3. Flex container properties

1: flex-direction: row;

2:flex-wrap:wrap-reverse;

3: flex-flow:row wrap;

4: justify-content:space-around;

5: how align-items is aligned on the auxiliary axis - the relationship between elements

Optional values:

stretch The default value, set the length of elements in the same line to the same value

flex-start elements will not stretch, aligned along the secondary axis

flex-end elements are not stretched, aligned along the end edge of the minor axis

center center alignment

baseline baseline alignment (wrong use)

6: align-content: ;distribution of blank space for auxiliary axis

Optional values:

flex-start elements align along the secondary axis

flex-end elements align along the end edge of the secondary axis

center elements are centered

space-around distributes white space to both sides of the element

space-between Space is evenly distributed between elements

space-evenly White space is distributed to one side of the element (less compatible)

Two: Properties of elastic elements

1. order: Define the order in which items are sorted. The smaller the value, the higher the ranking, and the default is 0.

2. flex-grow: Define the enlargement ratio of the item, the default is 0, that is, if there is remaining space, it will not be enlarged.

3. flex-shrink: defines the reduction ratio of the item, the default is 1, that is, if there is insufficient space, the item will shrink.

4. flex-basis: defines the main axis space (main size) occupied by the project before allocating excess space.

Based on this property, the browser calculates whether there is extra space in the main axis. Its default value is auto,

That is, the original size of the item.

5. flexflex: the attribute is shorthand for flex-grow, flex-shrink and flex-basis,

The default value is 0 1 auto. The last two attributes are optional.

6. align-self: allows a single item to have a different alignment from other items,

The align-items property can be overridden. The default value is auto,

Indicates that the align-items attribute of the parent element is inherited. If there is no parent element,

It is equivalent to stretch.

5. What are the common box models and what are the differences?

There are two kinds of box models in Css, one is the content box, which can also be called the standard box model, and the other is the border box, also called the weird box model. The content box is the default box, and the box type defaults to the content box when creating a new box

Content box:

When setting the width and height of the label (by default, that is, the content box), the width and height set the width and height of the content in the box model, and the border and inner margin are extruded outward, and these parts will occupy the outside Sections not defined for the current box

The second box model is the border box border-box. The conversion of the two boxes needs to be realized by box-sizing

The biggest feature of the border box is that its border and inner margin padding are squeezed inward, that is, it will only occupy the width and height set to it

6. Write a Netease cloud to play animation, picture rotation + firing pin to toggle back and forth

@keyframes rotateA
{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
      transition: transform 2s linear;
      -webkit-transition: transform 0.5s linear;
      transform-origin: left top ;
      transform: rotate(-15deg);

7. Talk about the understanding of floating, (what is floating, what is the use, how to use, what is the problem, how to clear the floating)

The float property is used to create a floating box that moves aside until the left or right edge touches the edge of the containing block or another float.

There are a lot of layout effects, and the standard flow cannot be completed. At this time, floating can be used to complete the layout. Because floating can change the default arrangement of element tags.

Application: Arrange multiple block-level boxes ( div ) horizontally in a row; realize left-right alignment of two boxes, and allow multiple block-level elements to be displayed in a row

Features of floats :

Floating elements will fall out of the standard flow (off-label)
Floated elements will be displayed in one line and aligned to the top of the element
Floated elements will have the characteristics of inline-block elements

Problems caused by floats:

Parent height collapsed (this is also a serious problem)
Width and height become adaptive sub-elements, but width and height settings are valid

Solution :

1. Add float to the parent element. In this way, the parent element and the child element float together out of the document flow, ensuring that the child element is inside the parent element, so that the parent element can adapt to the height of the child element, but this method has a disadvantage, which will definitely affect the arrangement of elements after the parent element. Even affect the layout.

2. Give the parent element a fixed height. This method is suitable for cases where the height of the child element is known and fixed.

3. Add a block-level element and set clear:both; to clear the float. This solution was used a long time ago, creating an empty div and setting clear:both for this div; this undoubtedly adds meaningless tags. In a large page, it is not good to have too many such tags .

4. Add overflow: hidden to the parent element;

1. Clear floats via pseudo-class::after

8. What are the pseudo-classes, their functions and writing order

: Behavior when the link is not accessed

:visited performance after visit

:hover mouse-in performance

: The performance of the active mouse stand-alone

9. How to remove the white border between two adjacent pictures

Convert to block-level elements floating, add font-size: 0 to the parent element;

10. How to realize vertical and horizontal centering of text and vertical and horizontal centering of boxes

Horizontal centering of text: set text-align: center; vertical centering of text: line-height: xxpx can be set;

Horizontal centering of the box: after setting the width, set margin: auto; vertical centering of the box: change the direction of the main axis through the elastic layout and set justify-content: center;

11. Single-line text overflows to display an ellipsis, and multi-line text overflows to display an ellipsis

Single-line display ellipsis: white-spacing: nowrap; overflow: hidden;

text-overflow：ellipsis；

Specify a line to display an ellipsis: -webkit-line-climp: n; display: -webkit-box;

-webkit-box-orient：vertical；overflow：hidden；

JS+ES6

12. What are the js data types?

Basic types: number type (NUMBER), string type (String), Boolean type (Boolean), empty type (null), undefined type (undef), unique value type (symbol) reference data type: array, function, object , set, map

13. What are the built-in objects?

Value attribute classes: Infinity, NaN, undefined, null, etc.; function attribute classes: eval(), parseFloat(), parseInt(), etc.; basic object classes: Object, Function, Boolean, Symbol, Error, etc.; number and date object classes : Number, Math, Date, etc.; string classes: String, RegExp, etc.; indexable collection object classes: Array; collection object classes using keys: Map, Set, WeakMap, WeakSet, etc.; vector collection classes: SIMD; structured Data class: JSON; control abstract object class: Promise, Generator, etc.; reflection class: Reflect, Proxy; others: arguments;

14. What are the array methods

join (the original array is not affected): This method can connect the elements in the array in the form of a string through the specified separator. Return value: Return a new string split (the original array is not affected): This method splits the string into an array with the specified delimiter. Return value: return a new array push (change the original array): this method can add one or more elements at the end of the array; structure: arr.push(value); return value: returns the array after adding elements length. pop (change the original array): This method can delete an element at the end of the array; structure: arr.pop(); return value: returns the element just deleted. unshift (change the original array): the The method can add one or several elements at the front of the array; structure: arr.unshift(value); return value: returns the length shift of the array after adding elements (change the original array): this method can be at the end of the array Before, delete an element; structure: arr.shift(); return value: returns the element just deleted. reverse flips the array (changes the original array): structure: arr.reserse() sort (changes the original array): this method The array can be sorted. The default is from large to small, and the parameter is a function concat (the original array is not affected): this method can splice the elements in the two arrays into a new array; return value: return after splicing The new array slice interception (the original array is not affected): This method can intercept the specified field from the array and return it; return value: return the intercepted field and put it in the new array without changing the original array splice (change Original array): structure 1: arr.splice(start,deletedCount) purely delete; starting from the start subscript, delete several structures 2: arr.splice(start,deletedCount,item) replacement; , and add item at this position Structure 3: arr.splice(start,0,item) Pure addition; start from the subscript of start, delete 0, and add item at this position, start to move all indexOf: the The method is used to find the first occurrence of the element in the array; structure: arr.

15. Several ways to deduplicate arrays

1. Define a new array and store the first element of the original array, then compare the element groups one by one with the elements of the new array, and store them in the new array if they are different. 2. First sort the original array, then compare it with the adjacent ones, and store them in a new array if they are different. 3. Utilize the existing characteristics of the object attribute, if there is no such attribute, store it in a new array. 4. Use the indexOf subscript attribute of the array to query. 5. Use the includes method on the array prototype object. 6. Use the filter and includes methods on the array prototype object. 7. Use the forEach and includes methods on the array prototype object. 8. Use the splice method on the array prototype object. 9. Use the lastIndexOf method on the array prototype object. 10. Use the set method of ES6.

16. Several methods of array deep copy

1. for loop implementation 2, slice method 3, concat method 4, ES6 extension operator implementation

17. Several methods of object deep copy

1. After the object is converted into a string through JSON.stringify() and JSON.parse(), it is converted into an object. When the value is undefined, function, symbol will be ignored during conversion. 2. ES6 destructuring assignment can only deeply copy the first layer of the object. If the attributes in the object are also objects, there is no way to perform deep copying. 3. The for in loop traverses the object, and only the first layer of the object can be deeply copied. 4. For the merger of Object.assign() objects, the first parameter must be an empty object, and only the first layer of the object can be deeply copied. 5. Using loops And the recursive way, you need to pay attention to setting the critical value (typeof obj[key] == 'object') in the loop recursion, otherwise it will cause an infinite loop.

There are several timers, what is the difference

Divided into setTimeout, setInterval, requeTanimationFrame (animation API) setTimeout is only executed once, setInterval can be executed multiple times; clear setTimeout, clearTimerout, clear setInterval, clearInterval

Talk about the understanding of Promise

1. Promise is a constructor, and a Promise instance can be obtained through new Promise(); 2. On Promise, there are two functions called resolve (callback function after success) and reject (callback function after failure) ; 3. On the Prototype property of the Promise constructor, there is a .then() method, that is, as long as the instance created by the Promise constructor can access this .then() method; 4. Promise represents an asynchronous operation; whenever we create an instance of Promise, this instance represents a specific asynchronous operation; 5. Since the instance created by Promise is an asynchronous operation, the result of this asynchronous operation can only have two states: State 1: The asynchronous execution is successful, and the successful callback function resolve needs to be called internally to return the result to the caller; State 2: The asynchronous execution fails, and the failed callback function reject needs to be called internally to return the result to the caller; 6. Since the instance of Promise is an asynchronous operation, after getting the result of the operation internally, return cannot be used to return the result of the operation to the caller; at this time, only the form of a callback function can be used to return the result of success or failure , and return to the caller; 7. We can call the .then() method on the new Promise instance, and specify success (resolve) and failure (reject) callback functions for this Promise asynchronous operation in advance; 8. We new out Promise just represents a formal asynchronous operation; what is a formal asynchronous operation: that is, we only know that it is an asynchronous operation, but it is not clear what specific asynchronous things it does

Talk about the understanding of module import and export

There are three ways of ES6 modular import and export, 1 default import and export, 2 on-demand import and export, 3 default export and overall export together. Advantages: avoid naming conflicts, better separation, higher reuse, high maintainability, and more Good to achieve high cohesion and low coupling

The difference between arrow function and ordinary function

Arrow functions are more concise than ordinary functions Arrow functions do not have their own this, they only inherit this in the upper layer of their scope. The this point inherited by arrow functions will never change call(), apply(), bind(), etc. Methods cannot change the pointing of this in arrow functions Arrow functions cannot be used as constructors Arrow functions do not have their own arguments Arrow functions do not have prototypes

Js implements the Joseph ring problem (leaving 1 for m individuals or leaving n-1)

function countOff(num,m,n){

  let players=[];

  for(let i=1;i<=num;i++){

    players.push(i);

  }

  let flag=0;

  while(players.length>n){// 剩下一人，结束条件

    let outPlayerNum=0,len=players.length;

    for(let i=0;i<len;i++){

      flag++;

      if(flag===m){

        flag=0;

        console.log("出局："+players[i-outPlayerNum]);

        players.splice(i-outPlayerNum,1);

        outPlayerNum++;

      }

    }

  }

  // return players;

  console.log("剩下："+players);

}

// console.log("剩下："+find(100,5))

countOff(100,3,1)

Several Ways of Writing Array Sorting

1. Use sort() method to sort 2. Bubble sorting method 3. Selection sorting method: choose the largest or smallest one for comparison and sorting 4. Insertion sorting method: select a data, traverse the array and compare continuously