JavaScript
Date Object
Constructor
You can use 4 variant of Date
constructor to create date object.
Ø Date()
Ø Date(milliseconds)
Ø Date(dateString)
Ø Date(year, month, day,
hours, minutes, seconds, milliseconds)
|
Methods |
Description |
|
getDate() |
It returns the integer value between 1 and 31 that represents
the day for the specified date on the basis of local time. |
|
getDay() |
It returns the integer value between 0 and 6 that represents
the day of the week on the basis of local time. |
|
getFullYears() |
It returns the integer value that represents the year on the
basis of local time. |
|
getHours() |
It returns the integer value between 0 and 23 that represents
the hours on the basis of local time. |
|
getMilliseconds() |
It returns the integer value between 0 and 999 that represents
the milliseconds on the basis of local time. |
|
getMinutes() |
It returns the integer value between 0 and 59 that represents
the minutes on the basis of local time. |
|
getMonth() |
It returns the integer value between 0 and 11 that represents
the month on the basis of local time. |
|
getSeconds() |
It returns the integer value between 0 and 60 that represents
the seconds on the basis of local time. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">JavaScript Date</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
Current Time: <span id="txt"></span>
<script>
var date=new Date();
var day=date.getDate();
var month=date.getMonth()+1;
var year=date.getFullYear();
document.write("<br>Date is: "+day+"/"+month+"/"+year);
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
</script>
</body>
</html>
Output
Clock
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#clock
{
width:40vw;
height:40vw;
background-color: darkkhaki;
border-radius: 20vw;
}
#seconds
{
position: absolute;
width:2px;
height: 15vw;
margin-top: 5vw;
left:20vw;
background-color: red;
transform-origin: bottom;
}
#minutes
{
position: absolute;
width:2px;
height: 14vw;
margin-top: 6vw;
left:20vw;
transform-origin: bottom;
background-color: black;
}
#hours
{
position: absolute;
width:3px;
height: 12vw;
margin-top: 8vw;
left:20vw;
transform-origin: bottom;
background-color: black;
border-radius: 2px;
}
</style>
<script>
function showtime()
{
setInterval(show,1000);
}
function show()
{
var dt=new Date();
var sec=dt.getSeconds();
var mn=dt.getMinutes();
var hr=dt.getHours();
document.getElementById("seconds").style.transform="rotate(" + (sec*6) +"deg)";
document.getElementById("minutes").style.transform="rotate(" + (mn*6) +"deg)";
document.getElementById("hours").style.transform="rotate(" + (hr*30) +"deg)";
}
showtime();
</script>
</head>
<body >
<div id="clock">
<div id="seconds"></div>
<div id="minutes"></div>
<div id="hours"></div>
</div>
</body>
</html>
Output
Checking your age
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#msg
{
font-size: 2em;
}
</style>
<script>
function checkdate()
{
var mydate=new Date(document.getElementById("dob").value);
var cdate=new Date();
var uyr=mydate.getFullYear();
var cyr=cdate.getFullYear();
var umn=mydate.getMonth();
var cmn=cdate.getMonth();
var cdt=cdate.getDate();
var udt=mydate.getDate();
var age=cyr-uyr;
if(umn>cmn)
age--;
else if(umn==cmn)
{
if(udt>cdt)
age--;
}
document.getElementById("msg").innerHTML=age;
}
</script>
</head>
<body>
<input type="date" id="dob" onchange="checkdate()">
<div id="msg"></div>
</body>
</html>
Output
Checking image file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#msg
{
font-size: 2em;
}
</style>
<script>
function checkfile()
{
var myfile=document.getElementById("filename").value;
var pos=myfile.lastIndexOf('.');
var ext=myfile.substr(pos+1);
if(ext=='jpg' || ext=='png')
{
document.getElementById("msg").innerHTML="Image File";
}
else{
document.getElementById("msg").innerHTML="Not a valid Image
File";
}
}
function testfile()
{
var myfile=document.getElementById("filename").value;
var ext=myfile.split('.').pop();
if(ext=='jpg' || ext=='png')
{
document.getElementById("msg").innerHTML="Image File";
}
else{
document.getElementById("msg").innerHTML="Not a valid Image
File";
}
}
</script>
</head>
<body>
<input type="file" id="filename">
<button onclick="testfile()">Check</button>
<div id="msg"></div>
</body>
</html>
Output
News Feed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#news
{
width:80vw;
height:10vh;
line-height: 10vh;
font-size:2em;
background-color: deepskyblue;
text-align: center;
margin:auto;
margin-bottom: 20px;
}
</style>
<script>
var allnews=[
"Learn C language",
"Learn C++ OOPS Concept",
"Learn JAVA",
"Learn Python "
];
var colors=['red','aqua','orange','pink','gold','tan']
var num=0;
setInterval(changenews,5000);
function changenews()
{
document.getElementById("news").innerHTML=allnews[num];
var rnum=parseInt(Math.random()*6); //(UL-LL+1)*Random Number+ LL
document.getElementById("news").style.backgroundColor=colors[rnum];
if(num==3)
num=0;
else
num++;
}
</script>
</head>
<body>
<div id="news">
</div>
<input type="text">
</body>
</html>
Output
0 comments:
Post a Comment