Digital Clock Preview
// CSS Code
<style>
html {
height: 100%;
}
body {
background: #0f3854;
background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
background-size: 100%;
}
.digital {
font-family: 'bookman old style', Times;
font-size:40px;
text-align: center;
color: #ff1;
text-shadow: 0 0 20px #0aafe6;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin:0 auto;
padding:20px;
border-radius: 10px;
}
</style>
// JS Code
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var mydate = today.getDate();
var chyear = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var mymonth = chyear[today.getMonth()];
var myyear = today.getFullYear();
var week = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var myday = week[today.getDay()];
m = checkTime(m);
s = checkTime(s);
dd="AM";
if(h<12) {
dd="AM";
} else { dd="PM"; }
h = (h == 0) ? 12 : ((h > 12) ? (h - 12): h);
document.getElementById('digital').innerHTML =
h + ":" + m + ":" + s + " " + dd + "<br>" + mydate +"-"+ mymonth +"-"+ myyear +" "+ myday;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
================================
HTML Code
================================
<body onload="startTime()">
<div class="digital" id="digital"></div>
</body>
<style>
html {
height: 100%;
}
body {
background: #0f3854;
background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
background-size: 100%;
}
.digital {
font-family: 'bookman old style', Times;
font-size:40px;
text-align: center;
color: #ff1;
text-shadow: 0 0 20px #0aafe6;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin:0 auto;
padding:20px;
border-radius: 10px;
}
</style>
// JS Code
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var mydate = today.getDate();
var chyear = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var mymonth = chyear[today.getMonth()];
var myyear = today.getFullYear();
var week = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var myday = week[today.getDay()];
m = checkTime(m);
s = checkTime(s);
dd="AM";
if(h<12) {
dd="AM";
} else { dd="PM"; }
h = (h == 0) ? 12 : ((h > 12) ? (h - 12): h);
document.getElementById('digital').innerHTML =
h + ":" + m + ":" + s + " " + dd + "<br>" + mydate +"-"+ mymonth +"-"+ myyear +" "+ myday;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
================================
HTML Code
================================
<body onload="startTime()">
<div class="digital" id="digital"></div>
</body>
0 Comments