Change Background Color of Html Elements

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<table style = "width:300px; height:100px">
   <tr>
      <td onmouseover = "bgChange(this.style.backgroundColor)";
	      onmouseout = "bgChange('transparent')";
		  style = "background-color:red"></td>
	  <td onmouseover = "bgChange(this.style.backgroundColor)";
	      onmouseout = "bgChange('transparent')";
		  style = "background-color:green"></td>
	  <td onmouseover = "bgChange(this.style.backgroundColor)";
	      onmouseout = "bgChange('transparent')";
		  style = "background-color:yellow"></td>
   </tr>
</table>
<script>
function bgChange(bg){
document.body.style.background = bg;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 04 2022, 18:03:21

JS Animation

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
#mySlide{
position: relative;
}

li{
position: relative;
list-style: none;
display: block;
float: left;
padding: 0px 10%;
width: auto;
}

@keyframes mymove{
from { left: 0px; }
to { left: 100%; }
}

@-webkit-keyframes{
from { left: 0px; }
to { left: 100%; }
}
</style>
</head>
<body onload = "jsFun()">
<div id = "mySlide">
  <li>Example 1</li>
  <li>Example 2</li>
  <li>Example 3</li>
</div>
<script>
var x = document.getElementsByTagName("LI");
function jsFun(){
for(i = 0; i < x.length; i++){
x[i].style.animation = "20s 5 mymove";
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 03 2022, 18:01:59

Switch (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Statement</title>
</head>
<body>
<p id = "demo">What is Today?</p>
<button type = "button" onclick = "jsFunction()">Click Now</button>
<script>
function jsFunction(){
switch(new Date().getDay()){
case 0:
day = "Sunday";
break;

case 1:
day = "Monday";
break;

case 2:
day = "Tuesday";
break;

case 3:
day = "Wednesday";
break;

case 4:
day = "Thursday";
break;

case 5:
day = "Friday";
break;

case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML ="Today is " + day + ".";
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 02 2022, 18:01:25

If (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Statement</title>
</head>
<body>
<h1>JavaScript Code Testing</h1>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<button type = "button" onclick = "jsFunction()">Try Now</button>
<script>
function jsFunction(){
var you = "I like to swim.";
var me = "I like to swim.";
var youme = "Our hobby is not same.";
if (you == me){
document.getElementById("demo1").innerHTML = you;
document.getElementById("demo2").innerHTML = me;
}else{
document.getElementById("demo3").innerHTML = youme;
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 01 2022, 18:00:50

Continue (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var txt = "", i;
for(i = 0; i < 10; i++){
if (i===5){continue;}
txt += i + "<br />";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 30 2022, 18:00:18

Break (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var txt = "", i;
for(i = 0; i < 10; i++){
if (i===5){break;}
txt += i + "<br />";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 29 2022, 17:58:27

Random Integer (JS Random)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Please click Random for random numbers.</p>
<button type = "button" onclick = "jsRand()">Random</button>
<script>
function jsRand(){
var rand = Math.floor(Math.random() * 4000);
document.getElementById("demo").innerHTML = rand;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 28 2022, 17:57:41

Proper Random Function (JS Random)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Click Random for random numbers.</p>
<button type = "button" onclick = "myRand()">Random</button>
<script>

function myRand(){
var rand = jsRand(100000, 900000);
document.getElementById("demo").innerHTML = rand;
}

function jsRand(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 27 2022, 09:48:13

Math.sqrt() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.sqrt Testing</p>
<button type = "button" onclick = "jsSqrt()">Math Sqrt</button>

<script>
var a = 81;
document.getElementById("demo").innerHTML = a;

function jsSqrt(){
var b = Math.sqrt(a);
document.getElementById("demo").innerHTML = b;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 26 2022, 09:47:21

Math.round() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.round Testing</p>
<button type = "button" onclick = "jsRound()">Math Round</button>

<script>
var a = 4.576;
var b = 4.345;
document.getElementById("demo").innerHTML = a + " and " + b;

function jsRound(){
document.getElementById("demo").innerHTML = Math.round(a) + " and " + Math.round(b);
}
</script>

</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 25 2022, 09:46:32

Math.random() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.random Testing</p>
<button type = "button" onclick = "jsRandom()">Math Random</button>
<script>
function jsRandom(){
var a = Math.random();
document.getElementById("demo").innerHTML = a;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 24 2022, 09:45:52

Math.pow() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.pow Testing</p>
<button type = "button" onclick = "jsPower()">Math Power</button>

<script>
var a = 9;
var b = 5;
document.getElementById("demo").innerHTML = a + " and " + b;

function jsPower(){
var c = Math.pow(a, b);
document.getElementById("demo").innerHTML = c;
}

</script>
</body>
</html>