Home > Article > Web Front-end > Imitation homework help front-end tutorial

Imitation homework help front-end tutorial

一个新手Original: 2017-09-13 10:45:071305browse

Box model

Imitation homework help front-end tutorial
In standard mode

box = margin+border+padding+content(width/height)

In weird mode

box = margin+content(border+padding+width/height)

Adaptation of mobile devices

flexbox
rem
More details will be added later

position

relative: Positioning relative to its position in the text flow , does not break away from the text flow after positioning
absolute: Position relative to the non-statically positioned element in the parent element, and break away from the text flow after positioning
fixed: Position relative to the browser window, and break away from the text flow after positioning
static: Normal text flow rendering

<style>
    .p1{        
    width:100px;        
    height:100px;        
    background-color:red;        
    left:20px;        /*以下两张图分别展示*/
        position:relative;        
        position:absolute;    }
    .p2{        
    width:100px;        
    height:100px;        
    background-color:blue;    }
</style>
    <p class=&#39;p1&#39;></p>
    <p class=&#39;p2&#39;></p>

Imitation homework help front-end tutorial

Advantages of event proxy

The principle is to use event bubbling

Advantages
Can save a lot of memory usage and reduce event registration. For example, ul proxies all click events of li.
Particularly suitable for the dynamic content part

Disadvantages
The common applications of event proxies should be limited to the above requirements. If event proxies are used for all events, event errors may occur. Judgment. That is, events that should not be triggered are bound to events.

Array deduplication

function f(arr){
    var s = [];    
    for(var i = 0;i<arr.length;i++){
        if(s.indexOf(arr[i]) == -1){
            s.push(arr[i]);
        }
    }    return s;
}

If you cannot use indexOf, and you need to consider the element type

function f(arr){
    var s = {};    
    for(var i = 0;i<arr.length;i++){
        var type = typeof arr[i];
        var con = type+arr[i];
        if(!s[con]){
            s[con] = 1;
        }else{
            arr.splice(i,1);
            i--;
        }
    }    return arr;
}

Or directly use ES6's Set

function f(arr){
    var s = new Set(arr);    
    return [...s];
}

to achieve mouse over Introduction to avatar display

Key points:
1. How to bind events
What I want to do is to use the event proxy

2. How to ensure that the placement is displayed and the quick swipe does not display
Using timers

Let’s use simple code to give an example. . .

<!DOCTYPE html><html><head><style>
    .p1{        
    width:100px;        
    height:100px;        
    background-color:red;        
    border-radius: 50px;    
    }
    .p2{        
    width:100px;        
    height:200px;        
    margin-top: 10px;        
    background-color:black;        
    display: none;    
    }
    </style>
    </head>
    <body>
    <p class=&#39;p1&#39;></p>
    <p class=&#39;p2&#39;></p>
    <script type="text/javascript">
        var d1 = document.getElementsByClassName(&#39;p1&#39;)[0];        
        var d2 = document.getElementsByClassName(&#39;p2&#39;)[0];        
        var timer;
        d1.addEventListener(&#39;mouseenter&#39;,function(){
            timer = window.setTimeout(function(){d2.style.display="block"},300);
        })
        d1.addEventListener(&#39;mouseout&#39;,function(){
            window.clearTimeout(timer);
            d2.style.display="none";
        })    
        </script>
        </body>
        </html>

The above is the detailed content of Imitation homework help front-end tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js implements web page title scrollingNext article：js implements web page title scrolling

See more

Imitation homework help front-end tutorial

Box model

Adaptation of mobile devices

position

Advantages of event proxy

Array deduplication

to achieve mouse over Introduction to avatar display

Related articles