Minimal CSS3 Digital Clock
Σελίδα 1 από 1 • Μοιραστείτε
- Port Admin
Admin - Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017 -
Port Admin Τετ Αυγ 30, 2017 12:30 am
HTML:
- Κώδικας:
<div>12:45:25</div>
<!--
Thanks for watching!!
-->
CSS:
- Κώδικας:
* Styling it all now! */
@font-face {
font-family: 'digi';
src: url('http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF');
}
* {
box-sizing: border-box;
}
html, body {
width: 100%; height: 100%;
}
body {
font-family: 'digi';
font-size: 76%;
background: #B9B7B1;
background-image: radial-gradient(
center 0,
white,
#B9B7B1
);
}
div {
width: 250px; height: 100px;
background: white;
font-size: 4em;
color: #707070;
/* Centering everything */
position: absolute;
left: 50%; top: 50%;
margin-left: -125px; margin-top: -50px;
text-align: center;
line-height: 100px;
border-top: 5px solid #E54B6B;
background-image: linear-gradient(#f0f0f0, white);
}
JavaScript:
- Κώδικας:
// Interactiveness now
(function() {
var clock = document.querySelector('div');
// But there is a little problem
// we need to pad 0-9 with an extra
// 0 on the left for hours, seconds, minutes
var pad = function(x) {
return x < 10 ? '0'+x : x;
};
var ticktock = function() {
var d = new Date();
var h = pad( d.getHours() );
var m = pad( d.getMinutes() );
var s = pad( d.getSeconds() );
var current_time = [h,m,s].join(':');
clock.innerHTML = current_time;
};
ticktock();
// Calling ticktock() every 1 second
setInterval(ticktock, 1000);
}());
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης