Heim >Web-Frontend >js-Tutorial >Front-End-Tutorial zur Nachahmung der Hausaufgabenhilfe

Front-End-Tutorial zur Nachahmung der Hausaufgabenhilfe

一个新手Original: 2017-09-13 10:45:071381Durchsuche

Box-Modell

Front-End-Tutorial zur Nachahmung der Hausaufgabenhilfe
Standardmodus

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

Seltsamer Modus

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

Anpassung mobiler Geräte

Flexbox
rem
wird später hinzugefügt

Position

relativ: relativ zu sich selbst im Textfluss Positionierung, und bricht nach der Positionierung nicht aus dem Textfluss aus
absolut: Positionierung relativ zu nicht statisch positionierten Elementen im übergeordneten Element und Ausbrechen aus dem Textfluss nach der Positionierung
behoben: Positionierung relativ zum Browserfenster, und nach der Positionierung wegbrechen Textfluss
statisch: Normale Textflusswiedergabe

<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>

Front-End-Tutorial zur Nachahmung der Hausaufgabenhilfe

Der Vorteil des Ereignis-Proxys

ist das Prinzip. Die Verwendung von Event-Bubbling

Vorteile
kann viel Speicherverbrauch einsparen und die Ereignisregistrierung reduzieren. Beispielsweise leitet ul alle Klickereignisse von li weiter.
Besonders geeignet für dynamische Inhalte

Nachteile
Gängige Anwendungen von Event-Proxys sollten auf die oben genannten Anforderungen beschränkt werden, wenn Event-Proxys für alle Events verwendet werden, kann es zu Event-Fehlern kommen Urteil. Das heißt, Ereignisse, die nicht ausgelöst werden sollen, werden an Ereignisse gebunden.

Array-Deduplizierung

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;
}

Wenn indexOf nicht verwendet werden kann und der Elementtyp berücksichtigt werden muss

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;
}

oder direkt ES6-Set verwenden

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

Einführung in die Implementierung der Mouseover-Avatar-Anzeige

Wichtige Punkte:
1. So binden Sie Ereignisse
Ich möchte den Event-Proxy verwenden

2. So stellen Sie sicher, dass die Platzierung angezeigt wird und nicht angezeigt wird, wenn Sie schnell darüber wischen
Verwenden von Timern

Lassen Sie uns einfachen Code verwenden, um ein Beispiel zu geben. . .

<!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>

Das obige ist der detaillierte Inhalt vonFront-End-Tutorial zur Nachahmung der Hausaufgabenhilfe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js implementiert das Scrollen von WebseitentitelnNächster Artikel：js implementiert das Scrollen von Webseitentiteln

In Verbindung stehende Artikel

Mehr sehen