Posted By
Bajarangi soft ,
Posted On 02-09-2020
First Need to Create HTML File
1. Add The HTML5 Doctype
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> </body> </html>
<link rel="stylesheet" href="css/style.css">
<div class="container">
<div class="col-md-12 bs_card mt-5">
<div class="col-md-6">
<div class="card">
<div class="card-body pt-0">
<div class="bs_card">
<img class="bs_logo" src="css/b_soft.png">
</div>
<h3 class="text-center">How To Get Today's Date From JavaScript</h3>
<div class="clock">
<div id="Date"></div>
<ul>
<li id="hours"></li>
<li id="point">:</li>
<li id="min"></li>
<li id="point">:</li>
<li id="sec"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Create two variables with names of months and days of the week in the array
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
// Create an object newDate()
var newDate = new Date();
// Retrieve the current date from the Date object
newDate.setDate(newDate.getDate());
// At the output of the day, date, month and year
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval( function() {
// Create an object newDate () and extract the second of the current time
var seconds = new Date().getSeconds();
// Add a leading zero to the value of seconds
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
setInterval( function() {
// Create an object newDate () and extract the minutes of the current time
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
// Create an object newDate () and extract the clock from the current time
var hours = new Date().getHours();
// Add a leading zero to the value of hours
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
});
</script>
body{
background: black;
}
.bs_logo{
width: 180px;
height: 125px;
}
.bs_card{
display: flex;
align-items: center;
justify-content: center;
}
.bs_label{
font-weight: bold;
}
.bs_submit_btn{
padding: 5px 20px;
border-radius: 20px;
}
.bs_logo_img{
width: 50px;
height: 50px;
}
.bs_clock {
margin-left:auto;
margin-right:auto;
color:#fff;
background:grey;
border: 1px solid grey;
border-radius: 2px;
}
#bs_Date {
font-family: Arial, Helvetica, sans-serif;
font-size:36px;
text-align:center;
text-shadow:0 0 5px #00c6ff80;
padding: 22px;
color: black;
}
ul {
margin: 0 auto;
padding: 0px;
list-style: none;
text-align: center;
font-size: 4px;
color: black;
}
ul li {
display:inline;
font-size:10em;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
text-shadow:0 0 5px #00c6ff80;
}
#point {
position:relative;
-moz-animation:mymove 1s ease infinite;
-webkit-animation:mymove 1s ease infinite;
padding-left:10px; padding-right:10px;
}
@-webkit-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}
@-moz-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TODAYS DATE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-12 bs_card mt-5">
<div class="col-md-6">
<div class="card">
<div class="card-body pt-0">
<div class="bs_card">
<img class="bs_logo" src="b_soft.png">
</div>
<h3 class="text-center">How To Get Today's Date From JavaScript</h3>
<div class="clock">
<div id="Date"></div>
<ul>
<li id="hours"></li>
<li id="point">:</li>
<li id="min"></li>
<li id="point">:</li>
<li id="sec"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Create two variables with names of months and days of the week in the array
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
// Create an object newDate()
var newDate = new Date();
// Retrieve the current date from the Date object
newDate.setDate(newDate.getDate());
// At the output of the day, date, month and year
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval( function() {
// Create an object newDate () and extract the second of the current time
var seconds = new Date().getSeconds();
// Add a leading zero to the value of seconds
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
setInterval( function() {
// Create an object newDate () and extract the minutes of the current time
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
// Create an object newDate () and extract the clock from the current time
var hours = new Date().getHours();
// Add a leading zero to the value of hours
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
});
</script>
</body>
</html>