js small case - simple effect of the progress bar

JS achieve results through simple progress bar, the case is very simple to learn on the line

Knowledge Point Spread

Principle of motion: Control a style constantly changing, there is animation, here we are to achieve the effect by changing the width,

* Progress bar width gets bigger

* OffsetLeft Get parent node box to have the value of the left positioning

* OffsetTop box to obtain the value of the parent node with a top positioned

* OffsetWidth get the box width value

* OffsetHeight get the box height value

* OffsetParent obtain positioning of the parent

Width and height of the visible region:

* Width: window.innerWidth

* Height: window.innerHeight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 0;
            height: 10px;
            background: #58bc58;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <div ID = "Plan"> </ div> 
</body>
<Script> 
    ( function () {
         var Box = document.getElementById ( 'Box' );
         var Plan = document.getElementById ( 'Plan' );
         var SEEP = 20 is ;
         function Show () {
             var widthr + = box.offsetWidth SEEP; // every refresh change the width 
            iF (widthr> = window.innerWidth) { // determines the width of the visible region reaches 
                widthr = window.innerWidth; 
                the clearInterval (Timer); // Close the timer 
            }
             varthe parseInt = NUM (widthr / window.innerWidth * 100) + '%'; // every percentage- 
            plan.innerHTML = NUM; 
            plan.style = 'text-align = left: right; width:' + + NUM '; background : #fff; ' 
            box.style.width = widthr +' PX ' ; 
        } 
        var timer = the setInterval (Show, 100); // timers 
    }) ();
 </ Script> 

</ HTML>

js small case - simple effect of the progress bar

Guess you like