Pages

▼

Friday, May 10, 2024

JavaScript Animated

 JavaScript Animated

<!DOCTYPE html>

<html>

<style>

#myContainer {

  width: 400px;

  height: 400px;

  position: relative;

  background: yellow;

}

#myAnimation {

  width: 50px;

  height: 50px;

  position: absolute;

  background-color: red;

}

</style>

<body>


<p>

<button onclick="myMove()">Click Me</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 == 350) {

      clearInterval(id);

    } else {

      pos++; 

      elem.style.top = pos + 'px'; 

      elem.style.left = pos + 'px'; 

    }

  }

}

</script>


</body>

</html>

at No comments:

Array Shift and unshift Method

 JavaScript Array shift()

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Arrays</h1>

<h2>The shift() Method</h2>


<p>The shift() method removes the first element of an array (and "shifts" the other elements to the left):</p>


<p id="demo1"></p>

<p id="demo2"></p>


<script>

const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits;

fruits.shift();

document.getElementById("demo2").innerHTML = fruits;

</script>

</body>

</html>


JavaScript Array unshift()

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method adds new elements to the beginning of an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

at No comments:

JavaScript Array pop and push Method

 JavaScript Array pop

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method removes the last element from an array.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

JavaScript Array push

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push() method appends a new element to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>



at No comments:

Saturday, May 4, 2024

JavaScript Array length and tostring and join Method

JavaScript Array length

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Arrays</h1>

<h2>The length Property</h2>


<p>The length property returns the length of an array:</p>


<p id="demo"></p>


<script>

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let size = fruits.length;

document.getElementById("demo").innerHTML = size;

</script>


</body>                                                                                 *+


<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

JavaScript Array join()

    <!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>

<p>The join() method joins array elements into a string.</p>
<p>It this example we have used " * " as a separator between the elements:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>
                                                                                                                                            

at No comments: