Scribd Logo
Upload

Welcome to Scribd!

  • Js Animation 1

    Uploaded by

    bhagyasree0409
    1 views1 page
    This document contains JavaScript code to animate a red square inside a green container box. When a button is clicked, the square will move from its starting position to the bottom right corner of the container over time using setInterval to increment its top and left CSS properties on each frame.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains JavaScript code to animate a red square inside a green container box. When a button is clicked, the square will move from its starting position to the bottom right corner of the container over time using setInterval to increment its top and left CSS properties on each frame.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1 views1 page

    Js Animation 1

    Uploaded by

    bhagyasree0409
    This document contains JavaScript code to animate a red square inside a green container box. When a button is clicked, the square will move from its starting position to the bottom right corner of the container over time using setInterval to increment its top and left CSS properties on each frame.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>JavaScript Animation</title>
    <style>
    #myContainer{
    width: 350px;
    height: 350px;
    position: relative;
    background: green;
    }
    #myAnimation{
    width: 45px;
    height: 45px;
    position: absolute;
    background-color: rgb(226, 43, 43);
    }
    </style>
    </head>
    <body>
    <p>
    <button onclick="myMove()">Click Here</button>
    </p>
    <div id ="myContainer">
    <div id ="myAnimation"></div>
    </div>
    <script>
    var id = null;
    function myMove(){
    var elem = document.getElementById("myAnimation");
    var pos = 0;
    clearInterval(id);
    id = setInterval(frame, 10);
    function frame(){
    if (pos == 300){
    clearInterval(id);
    }
    else{
    pos++;
    elem.style.top = pos + 'px';
    elem.style.left = pos + 'px';
    }
    }
    }
    </script>
    </body>
    </html>

    You might also like