The most viewed posts

ZilaStar ICT Jul 14 2022, 11:50:34

document.links (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button onclick = "jsGreen()">Green</button>
<button onclick = "jsRed()">Red</button><br />

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

<li><a href = "zilastar.com">zilastar.com</a></li>
<li><a href = "tnw87.com">tnw87.com</a></li>
<li><a href = "tnw87.site">tnw87.site</a></li>

<script>
function jsGreen(){
var i;
var x = document.links;
for(i = 0; i < x.length; i ++){
x[i].style.color = "green";
}
}

function jsRed(){
var i;
var x = document.links;
for(i = 0; i < x.length; i++){
x[i].style.color = "red";
}
}

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

💬 Comment 🔗 Get link

ZilaStar ICT Jul 13 2022, 11:48:24

Creating Text Node (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
#myDiv{
border: 1px solid red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id = "myDiv">
This is just Testing.
</div>
<button onclick = "jsFun()">+</button>
<script>
function jsFun(){
var para = document.createElement("P");
para.innerHTML = "Paragraph";
document.getElementById("myDiv").appendChild(para);
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 12 2022, 11:41:03

Creating a Calculator with JS

<html>
<head>
<title>Math Fun</title>
<script>
function registerEvents(){
document.mathWiz.operate.addEventListener('click', doTheMath, false);
}
function doTheMath(){
var first = parseInt(document.mathWiz.numberOne.value);
var second = parseInt(document.mathWiz.numberTwo.value);
var operator = document.mathWiz.operator.value;

switch (operator){
case "add":
var answer = first + second;
break;
case "substract":
var answer = first - second;
break;
case "multiply":
var answer = first * second;
break;
case "divide":
var answer = first / second;
break;
}
document.mathWiz.theResult.value = answer;
}
</script>
</head>
<body onload = "registerEvents();">
<form name="mathWiz">
<label>First Number: <input type="number" name="numberOne"></label><br />
<label>Second Number: <input type="number" name="numberTwo"></label><br />
<label>Operator:
<select name = "operator">
<option value="add"> + </option>
<option value="substract"> - </option>
<option value="multiply"> * </option>
<option value="divide"> / </option>
</select>
</label><br />
<input type="button" name="operate" value="Do the Math!"><br />
<label>Result: <input type="number" name="theResult">
</form>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 11 2022, 18:12:27

JS Timer

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button onclick = "myTimer = setInterval(jsCount, 1000)">Start Count</button>
<button onclick = "clearInterval(myTimer)">Stop Count</button>
<p id = "demo"></p>
<script>
c = 0;
function jsCount(){
document.getElementById("demo").innerHTML = ++c;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 10 2022, 18:10:53

Creating Readmore Button

<!DOCTYPE html>
<html>
    <head>
        <titile>Code Testing For Read More Function</titile>
        <style>
        	#more{
            display: none;
            }
        </style>
    </head>
<body>
<p>
I am Thet Naing Win. I am 35 years old man. Now I stay in Yangon. I have achieved the BCSc degree and SCN. <span id="dots">.....</span><span id="more">I have passed the matriculation exam in 2003 and I went to Computer University in December 2003.I have finished my studies in Computer University in Sep 2006. I have achieved the BCSc degree in Feb 2007. Since then, i have been supporting the IT services to the customers for their business.</span>
<button id="myBtn" onclick="myFunction()">Read More</button>
</p>
<p>
    I am Thet Naing Win. I am 35 years old man. Now I stay in Yangon. I have achieved the BCSc degree and SCN. <span id="dots">.....</span><span id="more">I have passed the matriculation exam in 2003 and I went to Computer University in December 2003.I have finished my studies in Computer University in Sep 2006. I have achieved the BCSc degree in Feb 2007. Since then, i have been supporting the IT services to the customers for their business.</span>
    <button id="myBtn" onclick="myFunction()">Read More</button>
</p>
<script>
        function myFunction(){
            var dots = document.getElementById("dots");
            var more = document.getElementById("more");
            var btn = document.getElementById("myBtn");
        if(dots.style.display === "none"){
            dots.style.display = "inline";
            more.style.display = "none";
            btn.innerHTML = "Read More";
            
        }else{
            dots.style.display = "none";
            more.style.display = "inline";
            btn.innerHTML = "Read less";
           
        }
    }
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 09 2022, 18:09:37

Creating Nav Bar

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
body{
margin: 0px;
font-size: 14px;
}

.header{
background-color: grey;
text-align: center;
padding: 12px;
}

#navbar{
overflow: hidden;
background-color: black;
}

#navbar a{
display: block;
float: left;
padding: 16px 32px;
text-decoration: none;
color: white;
}

#navbar a:hover{
background-color: gray;
}

#navbar a:focus{
background-color: green;
}

.content{
padding: 16px;
line-height: 25px;
}

.sticky{
position: fixed;
top: 0px;
width: 100%;
}

.sticky + .content{
padding-top: 60px;
}


</style>
</head>
<body onscroll = "jsFun()">
<div class = "header">
  <h1>Sticy Test</h1>
  <h2>These are codes for Sticky Position</h2>
</div>
<div id = "navbar">
  <a href = "#">Home</a>
  <a href = "#">Computer</a>
  <a href = "#">Network</a>
</div>
<div class = "content">
 <h2>My Paragraph</h2>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p> I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p> I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. 
</div>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function jsFun(){
if(window.pageYOffset >= sticky){
navbar.classList.add("sticky");
}else{
navbar.classList.remove("sticky");
}
}
</script>

</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 08 2022, 18:08:34

Dropdown Menu

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
.dropdown{
display: inline-block;
position: relative;
}

.dropbtn{
background-color: red;
font-size: 14px;
color: white;
padding: 12px 32px;
cursor: pointer;
border: 2px solid green;
}

.dropbtn:hover, .dropbtn:focus{
background-color: orange;
}

.dropcontent{
display: none;
overflow: auto;
position: absolute;
box-shadow: 0px 2px 1px 3px;
}

.dropcontent a{
display: block;
color: white;
padding: 15px 32px;
text-decoration: none;
background-color: red;
}

.dropcontent a:hover{
background-color: orange;
}

.show{
display: block;
}

</style>
</head>
<body>
<div class = "dropdown">
   <button id = "myBtn" class = "dropbtn">Example</button>
   <div id = "myDrop" class = "dropcontent">
      <a href = "">Example_1</a>
      <a href = "">Example 2</a>
      <a href = "">Example 3</a>
   </div>
</div>

<script>
document.getElementById("myBtn").onclick = function(){jsFun()};

function jsFun(){
document.getElementById("myDrop").classList.toggle("show");
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 07 2022, 18:08:00

Display a Clock

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<script>
function startTime(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById("demo").innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 500);
}

function checkTime(i){
if(i < 10){i = "0" + 1};
return i;
}
</script>
</head>
<body onload = "startTime()">
<div id = "demo"></div>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 06 2022, 18:06:29

Converting Celsius to Fahrenheit

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<p><input id = "c" onkeyup = "temperature('C')"> degree Celsius.</p>
<p><input id = "f" onkeyup = "temperature('F')"> degree Fahrenheit.</p>
<script>
function temperature(degree){
var x;
if(degree == "C"){
x = document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value = Math.round(x);
}else{
x = (document.getElementById("f").value - 32) * 5 / 9;
document.getElementById("c").value = Math.round(x);
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 05 2022, 18:04:53

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

Page : 4 of 30

Pre