This is the 20th day of my participation in the August More Text Challenge

☆☆☆ Today’s learning content: begin to learn **(various sports function comb)**! Important! Do do do

Can serve as a beginner’s learning route, can refer to, learning progress is not particularly driven! Ongoing update

Combined with their own understanding, simple and comprehensive summary of the basic knowledge points in the process of learning JavaScript in vernacular Chinese, easy to deepen understanding!

Let’s get started! ‘Only a firm foundation can build a tall building ‘! Come on! Take it seriously!

1, comb and review the knowledge points yesterday

1.1 Obtaining non-inline element style values:

function getStyle(obj,attr){
    if( window.getComputedStyle ){
        return window.getComputedStyle(obj,false)[attr];
    }else{
        return obj.currentStyle[attr]
    }
}
 
Copy the code

function startMove(obj,target,attr){
    clearInterval( obj.timer);
    obj.timer = setInterval(() = >{
        if( attr =="opacity") {var current = parseFloat( getStyle(obj,attr) )*100;
        }else{
                        var current =parseInt( getStyle(obj,attr) );
        }
       
        var speed = ( target-current )/10;
        speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
        if( current == target ){
            clearInterval(obj.timer);
        }else{
            if( attr =="opacity" ){
                obj.style.opacity = (current+speed)/100;
            }else{
                obj.style[attr] = current + speed + "px"}}},30)}Copy the code

2. Chain movement

2.2 Chain motion definition

After one movement is done, it goes to the next movement, which is the chain effect

Solution: Add an argument to the motion function that represents a function that starts calling the callback when the previous action completes

2.2 Callback functions

If a function takes an argument, such a function is called a callback function

3. Perfect exercise

Change multiple style values at the same time

4. Exercise classification exercise of various effects

  • Constant motion —
  • Cushioning motion —
  • Multi-object motion —
  • Chain movement —
  • Perfect movement
function move(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var flag = true;
     for( var attr in json ){
        var current = parseInt( getStyle( obj,attr ) )
        var speed = (json[attr]-current)/10;
        speed =  speed > 0 ? Math.ceil(speed) : Math.floor( speed );
        if( json[attr]! = current ){ flag =false;
        }
            
         obj.style[attr] = current + speed + "px";

        
    }
        if( flag ){
            clearInterval(obj.timer);
            if( fn ){ fn(); }}},10)}Copy the code

window.getComputedStyle

function getStyle(obj,attr){
    return window.getComputedStyle(obj,false)[attr];
}
Copy the code

Preview: Come on, dream chasers

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period, consolidate the foundation, early into Dachang!

It’s not easy to keep it up, and it’s not easy to keep it up. You’re great!

Calm Down & Carry On!

Read more:

Review of previous updates

【 Relearn JS】 Learn every day to consolidate the foundation:

Day1: js initialization, DAY2: various operators, day3: data types,

Day4 loop structure & Conditional statement, DAY5 function (emphasis), day6 scope & event,

【 DAY7 】 object & array method summary, 【day8】 string method & partial sorting,

【 DAY9 】Math object & Wrapper Function, 【 DAY10 】BOM- Browser object model,

【 DAY11 】DOM- Document Object Model

【 DAY13 】Event Event object first known (2),

【 DAY14 】 Event delegate & Drag principle

[DAY15] drag and drop implementation & regular beginning, [DAY16] regular specific method, [DAY17] cookie,

【day18】ES6,

[DAY19] Js motion function encapsulation

More on the way… A long way to go ==-.. – = =