Q15

Question 15

Write a java script

a. To change the colour of text using SetTimeOut()

b. To move an image across screen using SetInterval()

a. Taking Color value from user via click and prompt and then changing color value.

b. Placed a box on screen using CSS and added Image element in that and wrote Javascript function to increment co-ordinates and displace image.

Browse Code Here

Code

<html>
   <head>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
      <title>
      Change My Colour | Javascript 3 (a. Part)
      </title>
   </head>
   <script language="javascript">
      function my_function() {
      	setTimeout('ppp()',1000);
      }
      
      function ppp() {
      	var colorvalue=prompt("Enter Color","Blue");
      	document.getElementById("block").setAttribute(
      "style","color:" +colorvalue);
      }
   </script>
   </head>
   <body>
      <center>
         <div class="container">
            <div class="container-fluid mt-5">
               <h1>Change My Colour 
               | Javascript 3 (a. Part)</h1>
            </div>
            <div class="container mt-5" id ="block">
               <h3>Change My Text Color</h3>
            </div>
            <div class="container mt-3">
               <input type="button" 
               value="Change Colour" 
               name="b" 
               onClick="my_function()">
            </div>
         </div>
      </center>
   </body>
</HTML>

<!DOCTYPE html>
<html lang="en">
   <head>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
      <meta charset="UTF-8">
      <meta name="viewport" 
      content="width=device-width, initial-scale=1.0">
      <title>Move The Image 
      | Javascript 3 (b. Part)</title>
      <style>
         .container{
         width: 100%;
         height: 100vh;
         position: relative;
         }
         #animate{
         width: 50px;
         height: 50px;
         position: absolute;
         background-color: red;
         }
      </style>
   </head>
   <body>
      <center>
      <div class="container">
         <div class="container-fluid mt-5">
            <h1>Move The Image 
            | Javascript 3 (b. Part)</h1>
         </div>
         <div class="container-fluid mt-5">
            <p><button onclick="mymove()">
            Move The Image
            </button></p>
         </div>
         <div class="container-fluid mt-5">
            <div id="animate" class="animate">
            <img 
            src="https://avatars.githubusercontent.com/u/47236394?v=4"/>
            </div>
         </div>
      </div>
      <script>
         function mymove(){
             var elem = document.getElementById(
             'animate');
             var pos = 0;
             var id = setInterval(frame, 3);
         
             function frame(){
                 if(pos == 500){
                     clearInterval(id);
                 }
                 else{
                     pos++;
                     elem.style.top = pos + "px";
                     elem.style.left = pos + "px";
                   
                 }
             }
         }    
      </script>
   </body>
</html>