Kembali Jika Tidak DitemukanKlik Pada Judul Digital Clock
Showing posts with label Digital Clock. Show all posts
Showing posts with label Digital Clock. Show all posts

Digital Clock

Memasang Kode Digital Clock
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: -29px;
  width: 100%;
  height: 57px;
text-align: center;
font-size:8px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%,rgb(0,0,128) 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
} 

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:#24006B;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

html,
body {
  height: 100%;
  background-color: #000;
}
.screen {
  width: 100%;
  height: 100%;
  display: table;
}
.time-display {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
@media only screen and (max-width:3839px) {
  .digit:not(:last-of-type) {
    margin-right: 31.5px;
  }
  .digit {
    width: 192px;
    height: 378px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 150px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 150px;
    height: 21px;
  }
  .digit .vertical {
    width: 21px;
    height: 157.5px;
  }
  .digit .a {
    top: 0;
    left: 21px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -11px;
    border-left: 11px solid #000;
    border-right: 11px solid transparent;
    border-bottom: 21px solid #000;
  }
  .digit .a:after {
    right: -11px;
    border-right: 11px solid #000;
    border-left: 11px solid transparent;
    border-bottom: 21px solid #000;
  }
  .digit .b {
    top: 21px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-left: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .b:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-left: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .c {
    top: 199.5px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-left: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .c:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-left: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 21px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -11px;
    border-left: 11px solid #000;
    border-right: 11px solid transparent;
    border-top: 21px solid #000;
  }
  .digit .d:after {
    right: -11px;
    border-right: 11px solid #000;
    border-left: 11px solid transparent;
    border-top: 21px solid #000;
  }
  .digit .e {
    top: 199.5px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-right: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .e:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-right: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .f {
    top: 21px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-right: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .f:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-right: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .g {
    top: 178.5px;
    left: 21px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 11px solid transparent;
    border-top: 11px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 11px solid transparent;
    border-top: 11px solid #000;
    border-bottom: 11px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 21px;
    height: 378px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 42px;
  }
  .separator .dot {
    background: #071205;
    width: 21px;
    height: 21px;
    border-radius: 21px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:1519px) {
  .digit:not(:last-of-type) {
    margin-right: 27px;
  }
  .digit {
    width: 156px;
    height: 306px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 120px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 120px;
    height: 18px;
  }
  .digit .vertical {
    width: 18px;
    height: 126px;
  }
  .digit .a {
    top: 0;
    left: 18px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -9px;
    border-left: 9px solid #000;
    border-right: 9px solid transparent;
    border-bottom: 18px solid #000;
  }
  .digit .a:after {
    right: -9px;
    border-right: 9px solid #000;
    border-left: 9px solid transparent;
    border-bottom: 18px solid #000;
  }
  .digit .b {
    top: 18px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-left: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .b:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-left: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .c {
    top: 162px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-left: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .c:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-left: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 18px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -9px;
    border-left: 9px solid #000;
    border-right: 9px solid transparent;
    border-top: 18px solid #000;
  }
  .digit .d:after {
    right: -9px;
    border-right: 9px solid #000;
    border-left: 9px solid transparent;
    border-top: 18px solid #000;
  }
  .digit .e {
    top: 162px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-right: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .e:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-right: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .f {
    top: 18px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-right: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .f:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-right: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .g {
    top: 144px;
    left: 18px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 9px solid transparent;
    border-top: 9px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 9px solid transparent;
    border-top: 9px solid #000;
    border-bottom: 9px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 18px;
    height: 306px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 36px;
  }
  .separator .dot {
    background: #071205;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:1259px) {
  .digit:not(:last-of-type) {
    margin-right: 22.5px;
  }
  .digit {
    width: 110px;
    height: 205px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 80px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 80px;
    height: 15px;
  }
  .digit .vertical {
    width: 15px;
    height: 80px;
  }
  .digit .a {
    top: 0;
    left: 15px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -8px;
    border-left: 8px solid #000;
    border-right: 8px solid transparent;
    border-bottom: 15px solid #000;
  }
  .digit .a:after {
    right: -8px;
    border-right: 8px solid #000;
    border-left: 8px solid transparent;
    border-bottom: 15px solid #000;
  }
  .digit .b {
    top: 15px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .b:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-left: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .c {
    top: 110px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .c:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-left: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 15px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -8px;
    border-left: 8px solid #000;
    border-right: 8px solid transparent;
    border-top: 15px solid #000;
  }
  .digit .d:after {
    right: -8px;
    border-right: 8px solid #000;
    border-left: 8px solid transparent;
    border-top: 15px solid #000;
  }
  .digit .e {
    top: 110px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-right: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .e:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-right: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .f {
    top: 15px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-right: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .f:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-right: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .g {
    top: 95px;
    left: 15px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid #000;
    border-bottom: 8px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 15px;
    height: 205px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 30px;
  }
  .separator .dot {
    background: #071205;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:929px) {
  .digit:not(:last-of-type) {
    margin-right: 12px;
  }
  .digit {
    width: 56px;
    height: 104px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 40px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 40px;
    height: 8px;
  }
  .digit .vertical {
    width: 8px;
    height: 40px;
  }
  .digit .a {
    top: 0;
    left: 8px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -4px;
    border-left: 4px solid #000;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #000;
  }
  .digit .a:after {
    right: -4px;
    border-right: 4px solid #000;
    border-left: 4px solid transparent;
    border-bottom: 8px solid #000;
  }
  .digit .b {
    top: 8px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .b:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-left: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .c {
    top: 56px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .c:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-left: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 8px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -4px;
    border-left: 4px solid #000;
    border-right: 4px solid transparent;
    border-top: 8px solid #000;
  }
  .digit .d:after {
    right: -4px;
    border-right: 4px solid #000;
    border-left: 4px solid transparent;
    border-top: 8px solid #000;
  }
  .digit .e {
    top: 56px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-right: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .e:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-right: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .f {
    top: 8px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-right: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .f:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-right: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .g {
    top: 48px;
    left: 8px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 4px solid transparent;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
    white-space: nowrap;
  }
  .separator {
    width: 8px;
    height: 104px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 16px;
    white-space: nowrap;
  }
  .separator .dot {
    background: #071205;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width: 500px) {
  .digit:not(:last-of-type) {
    margin-right: 6px;
  }
  .digit {
    width: 24px;
    height: 44px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 16px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 16px;
    height: 4px;
  }
  .digit .vertical {
    width: 4px;
    height: 16px;
  }
  .digit .a {
    top: 0;
    left: 4px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -2px;
    border-left: 2px solid #000;
    border-right: 2px solid transparent;
    border-bottom: 4px solid #000;
  }
  .digit .a:after {
    right: -2px;
    border-right: 2px solid #000;
    border-left: 2px solid transparent;
    border-bottom: 4px solid #000;
  }
  .digit .b {
    top: 4px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-left: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .b:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-left: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .c {
    top: 24px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-left: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .c:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-left: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 4px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -2px;
    border-left: 2px solid #000;
    border-right: 2px solid transparent;
    border-top: 4px solid #000;
  }
  .digit .d:after {
    right: -2px;
    border-right: 2px solid #000;
    border-left: 2px solid transparent;
    border-top: 4px solid #000;
  }
  .digit .e {
    top: 24px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-right: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .e:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-right: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .f {
    top: 4px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-right: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .f:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-right: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .g {
    top: 20px;
    left: 4px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 2px solid transparent;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 2px solid transparent;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
    white-space: nowrap;
  }
  .separator {
    width: 4px;
    height: 44px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 8px;
    white-space: nowrap;
  }
  .separator .dot {
    background: #071205;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
/*Material Card*/
.m-card {
  position: relative;
  overflow: hidden;
  margin: 3em auto 1em auto;
  padding: 1em;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  max-width: 450px;
  z-index: 1;
}
.m-card:hover {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.m-card h1 {
  border-bottom: 1px solid #311b92;
}
.m-card h1 #because {
  font-size: 0.35em;
  text-align: center;
  display: block;
  margin-bottom: 0.5em;
  font-weight: 300;
}
.m-card #logo {
  max-width: 300px;
  margin: 0 auto;
  display: block;
}
.m-card h5 {
  margin: 0.5em 0 0.7em;
}
.m-card #file-upload-container {
  cursor: pointer;
  border: 3px dashed #311b92;
  display: block;
  width: 100%;
  height: 200px;
  border-radius: 25px;
  text-align: center;
}
.m-card #file-upload-container input {
  display: none;
}
.m-card #file-upload-container #add-symbol {
  display: block;
  margin: 0 auto;
  height: 70%;
  fill: #616161;
  max-width: 40px;
}
.m-card #file-upload-container #add-symbol:hover {
  fill: #311b92;
}
.m-card #file-upload-container #file-name {
  display: block;
  margin: 0 auto;
  color: #616161;
  max-width: 90%;
  word-break: break-all;
}
.m-card #file-upload-container .file-added {
  color: #212121 !important;
}
.m-card #file-upload-container:hover #add-symbol {
  fill: #311b92;
}
.m-card button {
  width: 100%;
  padding-top: 1.3em;
}
.m-card button #upload-symbol {
  fill: #311b92;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  max-width: 36px;
  max-height: 36px;
  display: inline;
  vertical-align: middle;
  margin-top: -4px;
}
.m-card button span {
  display: inline-block;
}
.m-card button:hover #upload-symbol {
  fill: #fff;
}
.m-card button:hover #upload-symbol #arrow {
  top: -12px;
}
.m-card button.disabled {
  pointer-events: none;
  cursor: default;
  color: #616161;
  border-color: #616161;
  background: #eeeeee;
}
.m-card button.disabled #upload-symbol {
  fill: #616161;
}
.m-card .how-to {
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 1em;
  padding: 0.75em 0;
  font-weight: 300;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.m-card .how-to:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.m-card #how-to {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0!important;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 3;
  padding: 1em;
  display: none;
}
.m-card #how-to h3 {
  border-bottom: 1px solid #212121;
  padding-bottom: 0.25em;
}
.m-card #how-to #close {
  position: absolute;
  top: 1em;
  right: 1em;
}
.m-card #how-to #close #close-symbol {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  max-width: 20px;
  max-height: 20px;
  fill: #616161;
}
.m-card #how-to #close:hover #close-symbol {
  fill: #311b92;
}
.m-card .step {
  float: left;
  width: 100%;
}
.m-card .step img {
  max-width: 120px;
  display: block;
  float: left;
  margin-right: 0.5em;
  border: 1px solid #212121;
}
.m-card .step h6 {
  margin-bottom: 0.5em;
}
.m-card #upload-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 4;
  padding: 1em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.m-card #upload-animation h3 {
  margin-bottom: 0px;
}
.m-card #upload-animation.show {
  opacity: 1;
}</style> 

<div class="screen" id="app">
            <div class="time-display">
                <div class="hours">
                    <div class="digit h1">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                    <div class="digit h2">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                </div>
                <div class="separator">
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="minutes">
                    <div class="digit m1">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                    <div class="digit m2">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                </div>
                <div class="separator">
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="seconds">
                    <div class="digit s1">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                    <div class="digit s2">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                </div>
            </div>
        </div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://codepen.io/hello/" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/Island-Def-Love-Jones-M2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/digital-clock.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a> </div>
</header>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-ddaa1eeb67d762ab8aad46508017908c.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>
      var currentDate,
    currentHours,
    currentMinutes,
    currentSeconds;

var a = [2,3,5,6,7,8,9,0],
    b = [1,2,3,4,7,8,9,0],
    c = [1,3,4,5,6,7,8,9,0],
    d = [2,3,5,6,8,0],
    e = [6,8,2,0],
    f = [4,5,6,8,9,0],
    g = [2,3,4,5,6,8,9];
var constants = [ [2,3,5,6,7,8,9,0],[1,2,3,4,7,8,9,0],[1,3,4,5,6,7,8,9,0],[2,3,5,6,8,0],[6,8,2,0],[4,5,6,8,9,0],[2,3,4,5,6,8,9] ];
var hours = [],
    minutes = [],
    seconds = [];
var map = ['a','b','c','d','e','f'];
function updateDate(){
    currentDate = new Date();
    currentHours = currentDate.getHours();
    if (currentHours < 10){
        currentHours = '0' + currentHours;
    }
    currentMinutes = currentDate.getMinutes();
    if (currentMinutes < 10){
        currentMinutes = '0' + currentMinutes;
    }
    currentSeconds = currentDate.getSeconds();
    if (currentSeconds < 10){
        currentSeconds = '0' + currentSeconds;
    }
}
function splitDigits(stringVal,array){
    var tempString = stringVal.toString();
    array.length = 0
    for (var i = 0; i < tempString.length; i++) {
        array.push(+tempString.charAt(i));
    }
}
function checkVal(val,array){
    for (var k = 0; k < array.length; k++){
        if (val == array[k]){
            return true;
        }
    }
    return false;
}
function printDigits(array, elem){
    for (var count = 0; count < array.length; count++) {
        for (var segmentCount = 0; segmentCount < 7; segmentCount++){
            if ( checkVal(array[count], constants[segmentCount] ) == true){
                turnOn(elem+(count+1)+' div:nth-of-type('+(segmentCount+1)+')');
            } else {
                turnOff(elem+(count+1)+' div:nth-of-type('+(segmentCount+1)+')');
            }
        }
    };
}
function turnOn(elem){
    $(elem).addClass('on');
}
function turnOff(elem){
    $(elem).removeClass('on');   
}
$( document ).ready(function() {
    setInterval(function(){
         $('.dot').toggleClass('on');
    },1000);
    console.log( checkVal(7,constants[4]) );
    setInterval(function(){
        updateDate();
        splitDigits(currentSeconds,seconds);
        printDigits(seconds,'.s');
        splitDigits(currentMinutes,minutes);
        printDigits(minutes,'.m');
        splitDigits(currentHours,hours);
        printDigits(hours,'.h');
    },1000);

});
    </script>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script> 

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>
Digital Clock code by. Maneesh
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy  and  paste you canDownload Here  Digital Clock Audio

Category:
Subscribe to: Posts (Atom)