<div class="date" id="time"></div>
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
#time {
position: relative;
color: #333;
font-size: 50px;
font-family: Impact, Charcoal, sans-serif;
letter-spacing: 10px;
text-align: center;
}
function getDateTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var day = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if(month.toString().length == 1) {
month = '0'+month;
}
if(day.toString().length == 1) {
day = '0'+day;
}
if(hour.toString().length == 1) {
hour = '0'+hour;
}
if(minute.toString().length == 1) {
minute = '0'+minute;
}
if(second.toString().length == 1) {
second = '0'+second;
}
var dateTime = year+'/'+month+'/'+day+' </br>'+hour+':'+minute+':'+second;
return dateTime;
}
setInterval(function(){
currentTime = getDateTime();
document.getElementById("time").innerHTML = currentTime;
}, 1000);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.