<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<meta content="ie=edge" http-equiv="X-UA-Compatible"></meta>
<title> How to display a digital clock using HTML, CSS and JavaScript?
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"> </script>
<style>
body {
text-align: center;
}
a {
outline: none;
color: #389dc1;
}
a:visited {
outline: none;
color: #389dc1;
}
a:hover {
text-decoration: none;
}
section, footer, header, aside {
display: block;
}
#clock {
width: 370px;
padding: 40px;
margin: 100px auto 60px;
position: relative;
}
#clock:after {
content: ' ';
position: absolute;
width: 400px;
height: 20px;
border-radius: 100%;
left: 50%;
margin-left: -200px;
bottom: 2px;
z-index: -1;
}
#clock .display {
text-align: center;
padding: 40px 20px 20px;
border-radius: 6px;
position: relative;
height: 54px;
}
#clock.light {
background-color: #f3f3f3;
color: #272e38;
}
#clock.light:after {
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
#clock.light .digits div span {
background-color: #272e38;
border-color: #272e38;
}
#clock.light .digits div.dots:before {
background-color: #272e38;
}
#clock.light .digits div.dots:after {
background-color: #272e38;
}
#clock.light .alarm {
background:url('../img/alarm_light.jpg');
}
#clock.light .display {
background-color: #dddddd;
box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;
}
#clock.dark {
background-color: #272e38;
color: #cacaca;
}
#clock.dark:after {
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
#clock.dark .digits div span {
background-color: #cacaca;
border-color: #cacaca;
}
#clock.dark .alarm {
background:url('../img/alarm_dark.jpg');
}
#clock.dark .display {
background-color: #0f1620;
box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642;
}
#clock.dark .digits div.dots:before {
background-color: #cacaca;
}
#clock.dark .digits div.dots:after {
background-color: #cacaca;
}
#clock .digits div {
text-align: left;
position: relative;
width: 28px;
height: 50px;
display: inline-block;
margin: 0 4px;
}
#clock .digits div span {
opacity: 0;
position: absolute;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#clock .digits div span:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
#clock .digits div span:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
#clock .digits .d1 {
height: 5px;
width: 16px;
top: 0;
left: 6px; }
#clock .digits .d1:before {
border-width: 0 5px 5px 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d1:after {
border-width: 0 0 5px 5px;
border-left-color: inherit; right: -5px;
}
#clock .digits .d2 {
height: 5px;
width: 16px;
top: 24px;
left: 6px; }
#clock .digits .d2:before {
border-width: 3px 4px 2px;
border-right-color: inherit;
left: -8px; }
#clock .digits .d2:after {
border-width: 3px 4px 2px;
border-left-color: inherit;
right: -8px; }
#clock .digits .d3 {
height: 5px;
width: 16px;
top: 48px;
left: 6px; }
#clock .digits .d3:before {
border-width: 5px 5px 0 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d3:after {
border-width: 5px 0 0 5px;
border-left-color: inherit; right: -5px; }
#clock .digits .d4 {
width: 5px;
height: 14px;
top: 7px; left: 0;
}
#clock .digits .d4:before {
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d4:after {
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d5 {
width: 5px;
height: 14px;
top: 7px;
right: 0; }
#clock .digits .d5:before {
border-width: 0 0 5px 5px;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d5:after {
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits .d6 {
width: 5px;
height: 14px;
top: 32px;
left: 0; }
#clock .digits .d6:before {
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d6:after {
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d7 {
width: 5px;
height: 14px;
top: 32px;
right: 0; }
#clock .digits .d7:before {
border-width: 0 0 5px 5px;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d7:after {
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits div.one .d5 {
opacity: 1;
}
#clock .digits div.one .d7 {
opacity: 1;
}
#clock .digits div.two .d1 {
opacity: 1;
}
#clock .digits div.two .d5 {
opacity: 1;
}
#clock .digits div.two .d2 {
opacity: 1;
}
#clock .digits div.two .d6 {
opacity: 1;
}
#clock .digits div.two .d3 {
opacity: 1;
}
#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3 {
opacity: 1;
}
#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7 {
opacity: 1;
}
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7 {
opacity: 1;
}
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7 {
opacity: 1;
}
#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7 {
opacity: 1;
}
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7 {
opacity: 1;
}
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7 {
opacity: 1;
}
#clock .digits div.zero .d1,
#clock .digits div.zero .d3 {
opacity: 1;
}
#clock .digits div.zero .d4 {
opacity: 1;
}
#clock .digits div.zero .d5 {
opacity: 1;
}
#clock .digits div.zero .d6 {
opacity: 1;
}
#clock .digits div.zero .d7 {
opacity: 1;
}
#clock .digits div.dots {
width: 5px;
}
#clock .digits div.dots:before {
width: 5px;
height: 5px;
content: ' ';
position: absolute;
left: 0;
top: 14px;
}
#clock .digits div.dots:after {
width: 5px;
height: 5px;
content: ' ';
position: absolute;
left: 0;
top: 14px;
}
#clock .digits div.dots:after {
top: 34px;
}
#clock .alarm {
width: 16px;
height: 16px;
bottom: 20px;
background: url('../img/alarm_light.jpg');
position: absolute;
opacity: 0.2;
}
#clock .alarm.active {
opacity: 1;
}
#clock .weekdays {
font-size: 12px;
position: absolute;
width: 100%;
top: 10px;
left: 0;
text-align: center;
}
#clock .weekdays span {
opacity: 0.2;
padding: 0 10px;
}
#clock .weekdays span.active {
opacity: 1;
}
#clock .ampm {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
}
.button-holder {
text-align: center;
padding-bottom: 100px;
}
a.button {
background-color: #f6a7b3;
background-image: -webkit-linear-gradient(top, #f6a7b3, #f0a3af);
background-image: -moz-linear-gradient(top, #f6a7b3, #f0a3af);
background-image: linear-gradient(top, #f6a7b3, #f0a3af);
border: 1px solid #eb9ba7;
border-radius: 2px;
box-shadow: 0 2px 2px #ccc;
color: #fff;
text-decoration: none !important;
padding: 15px 20px;
display: inline-block;
cursor: pointer;
}
a.button:hover {
opacity: 0.9;
}
footer a.tz {
font-weight: normal;
font-size: 16px !important;
text-decoration: none !important;
display: block;
margin-right: 300px;
text-overflow: ellipsis;
white-space: nowrap;
color: #bfbfbf !important;
z-index: 1;
}
footer a.tz:before {
content: ' ';
background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 -53px;
width: 138px;
height: 20px;
display: inline-block;
position: relative;
bottom: -3px;
}
footer .close {
position: absolute;
cursor: pointer;
width: 8px;
height: 8px;
background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 0px;
top: 10px;
right: 10px;
z-index: 3;
}
footer #tzine-actions {
position: absolute;
top: 8px;
width: 500px;
right: 50%;
margin-right: -650px;
text-align: right;
z-index: 2;
}
h1 {
line-height: 2em;
padding-bottom: 5px;
text-transform: none;
font-size: 1.7em;
font-weight: bold;
font-style: italic;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
h2 {
margin-top: 40px;
text-transform: none;
font-size: 1.75em;
font-weight: bold;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
footer #tzine-actions iframe {
display: inline-block;
height: 21px;
width: 95px;
position: relative;
float: left;
margin-top: 11px;
}
</style>
<body>
<h1>Made by D3schools. </h1>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6uSvVWnDXtcgjvm_sqzdoUzn3Br5H4XX_vqPpK5v29h23LWsukkIdEkLlVyGA9WpvB8rcR3bDKwUpkcMiUAzfk-X5KTY8TAnLg7JCcwiu27Nzb6XvjJSgebjzwgVRUZ7jnl510sx5FTUyUvWLIHE0f0oN7Dfhnes47UXONKlkSW-yNF_K_35R4qQ4w/s184/d3schools%20digital%20clock.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="200" data-original-height="184" data-original-width="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6uSvVWnDXtcgjvm_sqzdoUzn3Br5H4XX_vqPpK5v29h23LWsukkIdEkLlVyGA9WpvB8rcR3bDKwUpkcMiUAzfk-X5KTY8TAnLg7JCcwiu27Nzb6XvjJSgebjzwgVRUZ7jnl510sx5FTUyUvWLIHE0f0oN7Dfhnes47UXONKlkSW-yNF_K_35R4qQ4w/s200/d3schools%20digital%20clock.jpg"/></a></div>
<div class="light" id="clock">
<div class="display">
<div class="weekdays"> </div>
<div class="ampm"> </div>
<div class="alarm"> </div>
<div class="digits"> </div>
</div>
</div>
<div class="button-holder">
<a class="button"> Change Theme </a>
</div>
<script>
$(function() {
var clock = $('#clock'),
alarm = clock.find('.alarm'),
ampm = clock.find('.ampm');
var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
var digits = {};
var positions = [
'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
];
var digit_holder = clock.find('.digits');
$.each(positions, function(){
if(this == ':') {
digit_holder.append('<div class="dots">');
}
else {
var pos = $('<div>');
for(var i=1; i<8; i++) {
pos.append('<span class="d' + i + '">');
}
digits[this] = pos;
digit_holder.append(pos);
}
});
var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
weekday_holder = clock.find('.weekdays');
$.each(weekday_names, function() {
weekday_holder.append('<span>' + this + '</span>');
});
var weekdays = clock.find('.weekdays span');
(function update_time() {
var now = moment().format("hhmmssdA");
digits.h1.attr('class', digit_to_name[now[0]]);
digits.h2.attr('class', digit_to_name[now[1]]);
digits.m1.attr('class', digit_to_name[now[2]]);
digits.m2.attr('class', digit_to_name[now[3]]);
digits.s1.attr('class', digit_to_name[now[4]]);
digits.s2.attr('class', digit_to_name[now[5]]);
var dow = now[6];
dow--;
if(dow < 0) {
dow = 6;
} weekdays.removeClass('active').eq(dow).addClass('active');
ampm.text(now[7]+now[8]);
setTimeout(update_time, 1000);
})();
$('a.button').click(function() {
clock.toggleClass('light dark');
});
});
</script>
</body>
</head>
</html>
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<meta content="ie=edge" http-equiv="X-UA-Compatible"></meta>
<title> How to display a digital clock using HTML, CSS and JavaScript?
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"> </script>
<style>
body {
text-align: center;
}
a {
outline: none;
color: #389dc1;
}
a:visited {
outline: none;
color: #389dc1;
}
a:hover {
text-decoration: none;
}
section, footer, header, aside {
display: block;
}
#clock {
width: 370px;
padding: 40px;
margin: 100px auto 60px;
position: relative;
}
#clock:after {
content: ' ';
position: absolute;
width: 400px;
height: 20px;
border-radius: 100%;
left: 50%;
margin-left: -200px;
bottom: 2px;
z-index: -1;
}
#clock .display {
text-align: center;
padding: 40px 20px 20px;
border-radius: 6px;
position: relative;
height: 54px;
}
#clock.light {
background-color: #f3f3f3;
color: #272e38;
}
#clock.light:after {
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
#clock.light .digits div span {
background-color: #272e38;
border-color: #272e38;
}
#clock.light .digits div.dots:before {
background-color: #272e38;
}
#clock.light .digits div.dots:after {
background-color: #272e38;
}
#clock.light .alarm {
background:url('../img/alarm_light.jpg');
}
#clock.light .display {
background-color: #dddddd;
box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;
}
#clock.dark {
background-color: #272e38;
color: #cacaca;
}
#clock.dark:after {
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
#clock.dark .digits div span {
background-color: #cacaca;
border-color: #cacaca;
}
#clock.dark .alarm {
background:url('../img/alarm_dark.jpg');
}
#clock.dark .display {
background-color: #0f1620;
box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642;
}
#clock.dark .digits div.dots:before {
background-color: #cacaca;
}
#clock.dark .digits div.dots:after {
background-color: #cacaca;
}
#clock .digits div {
text-align: left;
position: relative;
width: 28px;
height: 50px;
display: inline-block;
margin: 0 4px;
}
#clock .digits div span {
opacity: 0;
position: absolute;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#clock .digits div span:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
#clock .digits div span:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
#clock .digits .d1 {
height: 5px;
width: 16px;
top: 0;
left: 6px; }
#clock .digits .d1:before {
border-width: 0 5px 5px 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d1:after {
border-width: 0 0 5px 5px;
border-left-color: inherit; right: -5px;
}
#clock .digits .d2 {
height: 5px;
width: 16px;
top: 24px;
left: 6px; }
#clock .digits .d2:before {
border-width: 3px 4px 2px;
border-right-color: inherit;
left: -8px; }
#clock .digits .d2:after {
border-width: 3px 4px 2px;
border-left-color: inherit;
right: -8px; }
#clock .digits .d3 {
height: 5px;
width: 16px;
top: 48px;
left: 6px; }
#clock .digits .d3:before {
border-width: 5px 5px 0 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d3:after {
border-width: 5px 0 0 5px;
border-left-color: inherit; right: -5px; }
#clock .digits .d4 {
width: 5px;
height: 14px;
top: 7px; left: 0;
}
#clock .digits .d4:before {
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d4:after {
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d5 {
width: 5px;
height: 14px;
top: 7px;
right: 0; }
#clock .digits .d5:before {
border-width: 0 0 5px 5px;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d5:after {
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits .d6 {
width: 5px;
height: 14px;
top: 32px;
left: 0; }
#clock .digits .d6:before {
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d6:after {
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d7 {
width: 5px;
height: 14px;
top: 32px;
right: 0; }
#clock .digits .d7:before {
border-width: 0 0 5px 5px;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d7:after {
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits div.one .d5 {
opacity: 1;
}
#clock .digits div.one .d7 {
opacity: 1;
}
#clock .digits div.two .d1 {
opacity: 1;
}
#clock .digits div.two .d5 {
opacity: 1;
}
#clock .digits div.two .d2 {
opacity: 1;
}
#clock .digits div.two .d6 {
opacity: 1;
}
#clock .digits div.two .d3 {
opacity: 1;
}
#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3 {
opacity: 1;
}
#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7 {
opacity: 1;
}
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7 {
opacity: 1;
}
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7 {
opacity: 1;
}
#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7 {
opacity: 1;
}
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7 {
opacity: 1;
}
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7 {
opacity: 1;
}
#clock .digits div.zero .d1,
#clock .digits div.zero .d3 {
opacity: 1;
}
#clock .digits div.zero .d4 {
opacity: 1;
}
#clock .digits div.zero .d5 {
opacity: 1;
}
#clock .digits div.zero .d6 {
opacity: 1;
}
#clock .digits div.zero .d7 {
opacity: 1;
}
#clock .digits div.dots {
width: 5px;
}
#clock .digits div.dots:before {
width: 5px;
height: 5px;
content: ' ';
position: absolute;
left: 0;
top: 14px;
}
#clock .digits div.dots:after {
width: 5px;
height: 5px;
content: ' ';
position: absolute;
left: 0;
top: 14px;
}
#clock .digits div.dots:after {
top: 34px;
}
#clock .alarm {
width: 16px;
height: 16px;
bottom: 20px;
background: url('../img/alarm_light.jpg');
position: absolute;
opacity: 0.2;
}
#clock .alarm.active {
opacity: 1;
}
#clock .weekdays {
font-size: 12px;
position: absolute;
width: 100%;
top: 10px;
left: 0;
text-align: center;
}
#clock .weekdays span {
opacity: 0.2;
padding: 0 10px;
}
#clock .weekdays span.active {
opacity: 1;
}
#clock .ampm {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
}
.button-holder {
text-align: center;
padding-bottom: 100px;
}
a.button {
background-color: #f6a7b3;
background-image: -webkit-linear-gradient(top, #f6a7b3, #f0a3af);
background-image: -moz-linear-gradient(top, #f6a7b3, #f0a3af);
background-image: linear-gradient(top, #f6a7b3, #f0a3af);
border: 1px solid #eb9ba7;
border-radius: 2px;
box-shadow: 0 2px 2px #ccc;
color: #fff;
text-decoration: none !important;
padding: 15px 20px;
display: inline-block;
cursor: pointer;
}
a.button:hover {
opacity: 0.9;
}
footer a.tz {
font-weight: normal;
font-size: 16px !important;
text-decoration: none !important;
display: block;
margin-right: 300px;
text-overflow: ellipsis;
white-space: nowrap;
color: #bfbfbf !important;
z-index: 1;
}
footer a.tz:before {
content: ' ';
background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 -53px;
width: 138px;
height: 20px;
display: inline-block;
position: relative;
bottom: -3px;
}
footer .close {
position: absolute;
cursor: pointer;
width: 8px;
height: 8px;
background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 0px;
top: 10px;
right: 10px;
z-index: 3;
}
footer #tzine-actions {
position: absolute;
top: 8px;
width: 500px;
right: 50%;
margin-right: -650px;
text-align: right;
z-index: 2;
}
h1 {
line-height: 2em;
padding-bottom: 5px;
text-transform: none;
font-size: 1.7em;
font-weight: bold;
font-style: italic;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
h2 {
margin-top: 40px;
text-transform: none;
font-size: 1.75em;
font-weight: bold;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
footer #tzine-actions iframe {
display: inline-block;
height: 21px;
width: 95px;
position: relative;
float: left;
margin-top: 11px;
}
</style>
<body>
<h1>Made by D3schools. </h1>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6uSvVWnDXtcgjvm_sqzdoUzn3Br5H4XX_vqPpK5v29h23LWsukkIdEkLlVyGA9WpvB8rcR3bDKwUpkcMiUAzfk-X5KTY8TAnLg7JCcwiu27Nzb6XvjJSgebjzwgVRUZ7jnl510sx5FTUyUvWLIHE0f0oN7Dfhnes47UXONKlkSW-yNF_K_35R4qQ4w/s184/d3schools%20digital%20clock.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="200" data-original-height="184" data-original-width="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6uSvVWnDXtcgjvm_sqzdoUzn3Br5H4XX_vqPpK5v29h23LWsukkIdEkLlVyGA9WpvB8rcR3bDKwUpkcMiUAzfk-X5KTY8TAnLg7JCcwiu27Nzb6XvjJSgebjzwgVRUZ7jnl510sx5FTUyUvWLIHE0f0oN7Dfhnes47UXONKlkSW-yNF_K_35R4qQ4w/s200/d3schools%20digital%20clock.jpg"/></a></div>
<div class="light" id="clock">
<div class="display">
<div class="weekdays"> </div>
<div class="ampm"> </div>
<div class="alarm"> </div>
<div class="digits"> </div>
</div>
</div>
<div class="button-holder">
<a class="button"> Change Theme </a>
</div>
<script>
$(function() {
var clock = $('#clock'),
alarm = clock.find('.alarm'),
ampm = clock.find('.ampm');
var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
var digits = {};
var positions = [
'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
];
var digit_holder = clock.find('.digits');
$.each(positions, function(){
if(this == ':') {
digit_holder.append('<div class="dots">');
}
else {
var pos = $('<div>');
for(var i=1; i<8; i++) {
pos.append('<span class="d' + i + '">');
}
digits[this] = pos;
digit_holder.append(pos);
}
});
var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
weekday_holder = clock.find('.weekdays');
$.each(weekday_names, function() {
weekday_holder.append('<span>' + this + '</span>');
});
var weekdays = clock.find('.weekdays span');
(function update_time() {
var now = moment().format("hhmmssdA");
digits.h1.attr('class', digit_to_name[now[0]]);
digits.h2.attr('class', digit_to_name[now[1]]);
digits.m1.attr('class', digit_to_name[now[2]]);
digits.m2.attr('class', digit_to_name[now[3]]);
digits.s1.attr('class', digit_to_name[now[4]]);
digits.s2.attr('class', digit_to_name[now[5]]);
var dow = now[6];
dow--;
if(dow < 0) {
dow = 6;
} weekdays.removeClass('active').eq(dow).addClass('active');
ampm.text(now[7]+now[8]);
setTimeout(update_time, 1000);
})();
$('a.button').click(function() {
clock.toggleClass('light dark');
});
});
</script>
</body>
</head>
</html>
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<meta content="ie=edge" http-equiv="X-UA-Compatible"></meta>
<title> How to display a digital clock using HTML, CSS and JavaScript?
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"> </script>
<style>
body {
text-align: center;
}
a {
outline: none;
color: #389dc1;
}
a:visited {
outline: none;
color: #389dc1;
}
a:hover {
text-decoration: none;
}
section, footer, header, aside {
display: block;
}
#clock {
width: 370px;
padding: 40px;
margin: 100px auto 60px;
position: relative;
}
#clock:after {
content: ' ';
position: absolute;
width: 400px;
height: 20px;
border-radius: 100%;
left: 50%;
margin-left: -200px;
bottom: 2px;
z-index: -1;
}
#clock .display {
text-align: center;
padding: 40px 20px 20px;
border-radius: 6px;
position: relative;
height: 54px;
}
#clock.light {
background-color: #f3f3f3;
color: #272e38;
}
#clock.light:after {
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
#clock.light .digits div span {
background-color: #272e38;
border-color: #272e38;
}
#clock.light .digits div.dots:before {
background-color: #272e38;
}
#clock.light .digits div.dots:after {
background-color: #272e38;
}
#clock.light .alarm {
background:url('../img/alarm_light.jpg');
}
#clock.light .display {
background-color: #dddddd;
box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;
}
#clock.dark {
background-color: #272e38;
color: #cacaca;
}
#clock.dark:after {
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
#clock.dark .digits div span {
background-color: #cacaca;
border-color: #cacaca;
}
#clock.dark .alarm {
background:url('../img/alarm_dark.jpg');
}
#clock.dark .display {
background-color: #0f1620;
box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642;
}
#clock.dark .digits div.dots:before {
background-color: #cacaca;
}
#clock.dark .digits div.dots:after {
background-color: #cacaca;
}
#clock .digits div {
text-align: left;
position: relative;
width: 28px;
height: 50px;
display: inline-block;
margin: 0 4px;
}
#clock .digits div span {
opacity: 0;
position: absolute;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#clock .digits div span:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
#clock .digits div span:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
#clock .digits .d1 {
height: 5px;
width: 16px;
top: 0;
left: 6px; }
#clock .digits .d1:before {
border-width: 0 5px 5px 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d1:after {
border-width: 0 0 5px 5px;
border-left-color: inherit; right: -5px;
}
#clock .digits .d2 {
height: 5px;
width: 16px;
top: 24px;
left: 6px; }
#clock .digits .d2:before {
border-width: 3px 4px 2px;
border-right-color: inherit;
left: -8px; }
#clock .digits .d2:after {
border-width: 3px 4px 2px;
border-left-color: inherit;
right: -8px; }
#clock .digits .d3 {
height: 5px;
width: 16px;
top: 48px;
left: 6px; }
#clock .digits .d3:before {
border-width: 5px 5px 0 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d3:after {
border-width: 5px 0 0 5px;
border-left-color: inherit; right: -5px; }
#clock .digits .d4 {
width: 5px;
height: 14px;
top: 7px; left: 0;
}
#clock .digits .d4:before {
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d4:after {
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d5 {
width: 5px;
height: 14px;
top: 7px;
right: 0; }
#clock .digits .d5:before {
border-width: 0 0 5px 5px;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d5:after {
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits .d6 {
width: 5px;
height: 14px;
top: 32px;
left: 0; }
#clock .digits .d6:before {
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d6:after {
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d7 {
width: 5px;
height: 14px;
top: 32px;
right: 0; }
#clock .digits .d7:before {
border-width: 0 0 5px 5px;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d7:after {
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits div.one .d5 {
opacity: 1;
}
#clock .digits div.one .d7 {
opacity: 1;
}
#clock .digits div.two .d1 {
opacity: 1;
}
#clock .digits div.two .d5 {
opacity: 1;
}
#clock .digits div.two .d2 {
opacity: 1;
}
#clock .digits div.two .d6 {
opacity: 1;
}
#clock .digits div.two .d3 {
opacity: 1;
}
#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3 {
opacity: 1;
}
#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7 {
opacity: 1;
}
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7 {
opacity: 1;
}
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7 {
opacity: 1;
}
#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7 {
opacity: 1;
}
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7 {
opacity: 1;
}
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7 {
opacity: 1;
}
#clock .digits div.zero .d1,
#clock .digits div.zero .d3 {
opacity: 1;
}
#clock .digits div.zero .d4 {
opacity: 1;
}
#clock .digits div.zero .d5 {
opacity: 1;
}
#clock .digits div.zero .d6 {
opacity: 1;
}
#clock .digits div.zero .d7 {
opacity: 1;
}
#clock .digits div.dots {
width: 5px;
}
#clock .digits div.dots:before {
width: 5px;
height: 5px;
content: ' ';
position: absolute;
left: 0;
top: 14px;
}
#clock .digits div.dots:after {
width: 5px;
height: 5px;
content: ' ';
position: absolute;
left: 0;
top: 14px;
}
#clock .digits div.dots:after {
top: 34px;
}
#clock .alarm {
width: 16px;
height: 16px;
bottom: 20px;
background: url('../img/alarm_light.jpg');
position: absolute;
opacity: 0.2;
}
#clock .alarm.active {
opacity: 1;
}
#clock .weekdays {
font-size: 12px;
position: absolute;
width: 100%;
top: 10px;
left: 0;
text-align: center;
}
#clock .weekdays span {
opacity: 0.2;
padding: 0 10px;
}
#clock .weekdays span.active {
opacity: 1;
}
#clock .ampm {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
}
.button-holder {
text-align: center;
padding-bottom: 100px;
}
a.button {
background-color: #f6a7b3;
background-image: -webkit-linear-gradient(top, #f6a7b3, #f0a3af);
background-image: -moz-linear-gradient(top, #f6a7b3, #f0a3af);
background-image: linear-gradient(top, #f6a7b3, #f0a3af);
border: 1px solid #eb9ba7;
border-radius: 2px;
box-shadow: 0 2px 2px #ccc;
color: #fff;
text-decoration: none !important;
padding: 15px 20px;
display: inline-block;
cursor: pointer;
}
a.button:hover {
opacity: 0.9;
}
footer a.tz {
font-weight: normal;
font-size: 16px !important;
text-decoration: none !important;
display: block;
margin-right: 300px;
text-overflow: ellipsis;
white-space: nowrap;
color: #bfbfbf !important;
z-index: 1;
}
footer a.tz:before {
content: ' ';
background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 -53px;
width: 138px;
height: 20px;
display: inline-block;
position: relative;
bottom: -3px;
}
footer .close {
position: absolute;
cursor: pointer;
width: 8px;
height: 8px;
background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 0px;
top: 10px;
right: 10px;
z-index: 3;
}
footer #tzine-actions {
position: absolute;
top: 8px;
width: 500px;
right: 50%;
margin-right: -650px;
text-align: right;
z-index: 2;
}
h1 {
line-height: 2em;
padding-bottom: 5px;
text-transform: none;
font-size: 1.7em;
font-weight: bold;
font-style: italic;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
h2 {
margin-top: 40px;
text-transform: none;
font-size: 1.75em;
font-weight: bold;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
footer #tzine-actions iframe {
display: inline-block;
height: 21px;
width: 95px;
position: relative;
float: left;
margin-top: 11px;
}
</style>
<body>
<h1>Made by D3schools. </h1>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6uSvVWnDXtcgjvm_sqzdoUzn3Br5H4XX_vqPpK5v29h23LWsukkIdEkLlVyGA9WpvB8rcR3bDKwUpkcMiUAzfk-X5KTY8TAnLg7JCcwiu27Nzb6XvjJSgebjzwgVRUZ7jnl510sx5FTUyUvWLIHE0f0oN7Dfhnes47UXONKlkSW-yNF_K_35R4qQ4w/s184/d3schools%20digital%20clock.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="200" data-original-height="184" data-original-width="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6uSvVWnDXtcgjvm_sqzdoUzn3Br5H4XX_vqPpK5v29h23LWsukkIdEkLlVyGA9WpvB8rcR3bDKwUpkcMiUAzfk-X5KTY8TAnLg7JCcwiu27Nzb6XvjJSgebjzwgVRUZ7jnl510sx5FTUyUvWLIHE0f0oN7Dfhnes47UXONKlkSW-yNF_K_35R4qQ4w/s200/d3schools%20digital%20clock.jpg"/></a></div>
<div class="light" id="clock">
<div class="display">
<div class="weekdays"> </div>
<div class="ampm"> </div>
<div class="alarm"> </div>
<div class="digits"> </div>
</div>
</div>
<div class="button-holder">
<a class="button"> Change Theme </a>
</div>
<script>
$(function() {
var clock = $('#clock'),
alarm = clock.find('.alarm'),
ampm = clock.find('.ampm');
var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
var digits = {};
var positions = [
'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
];
var digit_holder = clock.find('.digits');
$.each(positions, function(){
if(this == ':') {
digit_holder.append('<div class="dots">');
}
else {
var pos = $('<div>');
for(var i=1; i<8; i++) {
pos.append('<span class="d' + i + '">');
}
digits[this] = pos;
digit_holder.append(pos);
}
});
var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
weekday_holder = clock.find('.weekdays');
$.each(weekday_names, function() {
weekday_holder.append('<span>' + this + '</span>');
});
var weekdays = clock.find('.weekdays span');
(function update_time() {
var now = moment().format("hhmmssdA");
digits.h1.attr('class', digit_to_name[now[0]]);
digits.h2.attr('class', digit_to_name[now[1]]);
digits.m1.attr('class', digit_to_name[now[2]]);
digits.m2.attr('class', digit_to_name[now[3]]);
digits.s1.attr('class', digit_to_name[now[4]]);
digits.s2.attr('class', digit_to_name[now[5]]);
var dow = now[6];
dow--;
if(dow < 0) {
dow = 6;
} weekdays.removeClass('active').eq(dow).addClass('active');
ampm.text(now[7]+now[8]);
setTimeout(update_time, 1000);
})();
$('a.button').click(function() {
clock.toggleClass('light dark');
});
});
</script>
</body>
</head>
</html>
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<meta content="ie=edge" http-equiv="X-UA-Compatible"></meta>
<title> How to display a digital clock using HTML, CSS and JavaScript?
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"> </script>
<style>
body {
text-align: center;
}
a {
outline: none;
color: #389dc1;
}
a:visited {
outline: none;
color: #389dc1;
}
a:hover {
text-decoration: none;
}
section, footer, header, aside {
display: block;
}
#clock {
width: 370px;
padding: 40px;
margin: 100px auto 60px;
position: relative;
}
#clock:after {
content: ' ';
position: absolute;
width: 400px;
height: 20px;
border-radius: 100%;
left: 50%;
margin-left: -200px;
bottom: 2px;
z-index: -1;
}
#clock .display {
text-align: center;
padding: 40px 20px 20px;
border-radius: 6px;
position: relative;
height: 54px;
}
#clock.light {
background-color: #f3f3f3;
color: #272e38;
}
#clock.light:after {
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
#clock.light .digits div span {
background-color: #272e38;
border-color: #272e38;
}
#clock.light .digits div.dots:before {
background-color: #272e38;
}
#clock.light .digits div.dots:after {
background-color: #272e38;
}
#clock.light .alarm {
background:url('../img/alarm_light.jpg');
}
#clock.light .display {
background-color: #dddddd;
box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;
}
#clock.dark {
background-color: #272e38;
color: #cacaca;
}
#clock.dark:after {
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
#clock.dark .digits div span {
background-color: #cacaca;
border-color: #cacaca;
}
#clock.dark .alarm {
background:url('../img/alarm_dark.jpg');
}
#clock.dark .display {
background-color: #0f1620;
box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642;
}
#clock.dark .digits div.dots:before {
background-color: #cacaca;
}
#clock.dark .digits div.dots:after {
background-color: #cacaca;
}
#clock .digits div {
text-align: left;
position: relative;
width: 28px;
height: 50px;
display: inline-block;
margin: 0 4px;
}
#clock .digits div span {
opacity: 0;
position: absolute;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#clock .digits div span:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
#clock .digits div span:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
#clock .digits .d1 {
height: 5px;
width: 16px;
top: 0;
left: 6px; }
#clock .digits .d1:before {
border-width: 0 5px 5px 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d1:after {
border-width: 0 0 5px 5px;
border-left-color: inherit; right: -5px;
}
#clock .digits .d2 {
height: 5px;
width: 16px;
top: 24px;
left: 6px; }
#clock .digits .d2:before {
border-width: 3px 4px 2px;
border-right-color: inherit;
left: -8px; }
#clock .digits .d2:after {
border-width: 3px 4px 2px;
border-left-color: inherit;
right: -8px; }
#clock .digits .d3 {
height: 5px;
width: 16px;
top: 48px;
left: 6px; }
#clock .digits .d3:before {
border-width: 5px 5px 0 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d3:after {
border-width: 5px 0 0 5px;
border-left-color: inherit; right: -5px; }
#clock .digits .d4 {
width: 5px;
height: 14px;
top: 7px; left: 0;
}
#clock .digits .d4:before {
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d4:after {
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d5 {
width: 5px;
height: 14px;
top: 7px;
right: 0; }
#clock .digits .d5:before {
border-width: 0 0 5px 5px;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d5:after {
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits .d6 {
width: 5px;
height: 14px;
top: 32px;
left: 0; }
#clock .digits .d6:before {
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d6:after {
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d7 {
width: 5px;
height: 14px;
top: 32px;
right: 0; }
#clock .digits .d7:before {
border-width: 0 0 5px 5px;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d7:after {
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits div.one .d5 {
opacity: 1;
}
#clock .digits div.one .d7 {
opacity: 1;
}
#clock .digits div.two .d1 {
opacity: 1;
}
#clock .digits div.two .d5 {
opacity: 1;
}
#clock .digits div.two .d2 {
opacity: 1;
}
#clock .digits div.two .d6 {
opacity: 1;
}
#clock .digits div.two .d3 {
opacity: 1;
}
#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3 {
opacity: 1;
}
#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7 {
opacity: 1;
}
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7 {
opacity: 1;
}
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7 {
opacity: 1;
}
#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7 {
opacity: 1;
}
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7 {
opacity: 1;
}
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7 {
opacity: 1;
}
#clock .digits div.zero .d1,
#clock .digits div.zero .d3 {
opacity: 1;
}
#clock .digits div.zero .d4 {
opacity: 1;
}
#clock .digits div.zero .d5 {
opacity: 1;
}
#clock .digits div.zero .d6 {
opacity: 1;
}
#clock .digits div.zero .d7 {
opacity: 1;
}
#clock .digits div.dots {
width: 5px;
}
#clock .digits div.dots:before {
width: 5px;
height: 5px;
content: ' ';
position: absolute;
left: 0;
top: 14px;
}
#clock .digits div.dots:after {
width: 5px;
height: 5px;
content: ' ';
position: absolute;
left: 0;
top: 14px;
}
#clock .digits div.dots:after {
top: 34px;
}
#clock .alarm {
width: 16px;
height: 16px;
bottom: 20px;
background: url('../img/alarm_light.jpg');
position: absolute;
opacity: 0.2;
}
#clock .alarm.active {
opacity: 1;
}
#clock .weekdays {
font-size: 12px;
position: absolute;
width: 100%;
top: 10px;
left: 0;
text-align: center;
}
#clock .weekdays span {
opacity: 0.2;
padding: 0 10px;
}
#clock .weekdays span.active {
opacity: 1;
}
#clock .ampm {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
}
.button-holder {
text-align: center;
padding-bottom: 100px;
}
a.button {
background-color: #f6a7b3;
background-image: -webkit-linear-gradient(top, #f6a7b3, #f0a3af);
background-image: -moz-linear-gradient(top, #f6a7b3, #f0a3af);
background-image: linear-gradient(top, #f6a7b3, #f0a3af);
border: 1px solid #eb9ba7;
border-radius: 2px;
box-shadow: 0 2px 2px #ccc;
color: #fff;
text-decoration: none !important;
padding: 15px 20px;
display: inline-block;
cursor: pointer;
}
a.button:hover {
opacity: 0.9;
}
footer a.tz {
font-weight: normal;
font-size: 16px !important;
text-decoration: none !important;
display: block;
margin-right: 300px;
text-overflow: ellipsis;
white-space: nowrap;
color: #bfbfbf !important;
z-index: 1;
}
footer a.tz:before {
content: ' ';
background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 -53px;
width: 138px;
height: 20px;
display: inline-block;
position: relative;
bottom: -3px;
}
footer .close {
position: absolute;
cursor: pointer;
width: 8px;
height: 8px;
background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 0px;
top: 10px;
right: 10px;
z-index: 3;
}
footer #tzine-actions {
position: absolute;
top: 8px;
width: 500px;
right: 50%;
margin-right: -650px;
text-align: right;
z-index: 2;
}
h1 {
line-height: 2em;
padding-bottom: 5px;
text-transform: none;
font-size: 1.7em;
font-weight: bold;
font-style: italic;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
h2 {
margin-top: 40px;
text-transform: none;
font-size: 1.75em;
font-weight: bold;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
footer #tzine-actions iframe {
display: inline-block;
height: 21px;
width: 95px;
position: relative;
float: left;
margin-top: 11px;
}
</style>
<body>
<h1>Made by D3schools. </h1>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6uSvVWnDXtcgjvm_sqzdoUzn3Br5H4XX_vqPpK5v29h23LWsukkIdEkLlVyGA9WpvB8rcR3bDKwUpkcMiUAzfk-X5KTY8TAnLg7JCcwiu27Nzb6XvjJSgebjzwgVRUZ7jnl510sx5FTUyUvWLIHE0f0oN7Dfhnes47UXONKlkSW-yNF_K_35R4qQ4w/s184/d3schools%20digital%20clock.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="200" data-original-height="184" data-original-width="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6uSvVWnDXtcgjvm_sqzdoUzn3Br5H4XX_vqPpK5v29h23LWsukkIdEkLlVyGA9WpvB8rcR3bDKwUpkcMiUAzfk-X5KTY8TAnLg7JCcwiu27Nzb6XvjJSgebjzwgVRUZ7jnl510sx5FTUyUvWLIHE0f0oN7Dfhnes47UXONKlkSW-yNF_K_35R4qQ4w/s200/d3schools%20digital%20clock.jpg"/></a></div>
<div class="light" id="clock">
<div class="display">
<div class="weekdays"> </div>
<div class="ampm"> </div>
<div class="alarm"> </div>
<div class="digits"> </div>
</div>
</div>
<div class="button-holder">
<a class="button"> Change Theme </a>
</div>
<script>
$(function() {
var clock = $('#clock'),
alarm = clock.find('.alarm'),
ampm = clock.find('.ampm');
var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
var digits = {};
var positions = [
'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
];
var digit_holder = clock.find('.digits');
$.each(positions, function(){
if(this == ':') {
digit_holder.append('<div class="dots">');
}
else {
var pos = $('<div>');
for(var i=1; i<8; i++) {
pos.append('<span class="d' + i + '">');
}
digits[this] = pos;
digit_holder.append(pos);
}
});
var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
weekday_holder = clock.find('.weekdays');
$.each(weekday_names, function() {
weekday_holder.append('<span>' + this + '</span>');
});
var weekdays = clock.find('.weekdays span');
(function update_time() {
var now = moment().format("hhmmssdA");
digits.h1.attr('class', digit_to_name[now[0]]);
digits.h2.attr('class', digit_to_name[now[1]]);
digits.m1.attr('class', digit_to_name[now[2]]);
digits.m2.attr('class', digit_to_name[now[3]]);
digits.s1.attr('class', digit_to_name[now[4]]);
digits.s2.attr('class', digit_to_name[now[5]]);
var dow = now[6];
dow--;
if(dow < 0) {
dow = 6;
} weekdays.removeClass('active').eq(dow).addClass('active');
ampm.text(now[7]+now[8]);
setTimeout(update_time, 1000);
})();
$('a.button').click(function() {
clock.toggleClass('light dark');
});
});
</script>
</body>
</head>
</html>
Post a Comment