Code : Tout sélectionner
<! http://codepen.io/alldrops/pen/WQBgOg >
<div style="min-width:150px;min-height:60px;" class="cmd tooltips cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#">
<center>
<div class="wrapper">
<div id="month" class="center month"></div>
<div id="dates">
<div id="date" class="date"></div>
<div id="year" class="year"></div>
<div id="day" class="day"></div>
</div>
<div id="clock" class="center clock"></div>
</div>
</center>
<script>
var language = window.navigator.language;
if (language.length > 2) {
language = language.split('-');
language = language[0];
}
//language = "fr"; // manually set language
if (language === "en") {
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
} else if (language === "cz") {
var weekday = ["NedÄ›le", "PondÄ›lÃ", "Úterý", "StÅ™eda", "ÄŒtvrtek", "Pátek", "Sobota"];
var month = ["Leden", "Únor", "BÅ™ezen", "Duben", "KvÄ›ten", "ÄŒerven", "ÄŒervenec", "Srpen", "ZářÃ", "ŘÃjen", "Listopad", "Prosinec"];
} else if (language === "it") {
var weekday = ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'];
var month = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
} else if (language === "sp") {
var weekday = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
var month = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
} else if (language === "de") {
var weekday = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
var month = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Ju li", "August", "September", "Oktober", "November", "Dez ember"];
} else if (language === "fr") {
var weekday = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
var month = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aôut", "Septembre", "Octobre", "Novembre", "Décembre"];
} else if (language === "zh") {
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期å…'];
var month = ['一月', '二月', '三月', '四月', '五月', 'å…月', '七月', '八月', 'ä¹æœˆ', 'å月', 'å一月', 'å二月'];
} else {
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
}
(function clock() {
"use strict";
var adjDay, twentyfour, currentTime, currentHours, currentMinutes, mnth, day, oday, year, dat;
twentyfour = false; ///set twentyfour here.
adjDay = function (day, daynum) {
var offset, doffset, left;
switch (day.length) {
case 6:
offset = "0px";
doffset = "1px";
left = "-1px";
break;
case 7:
offset = "0px";
doffset = "0px";
left = "-1px";
break;
case 8:
offset = "2px";
doffset = "0px";
left = "-4px";
break;
case 9:
offset = "3.5px";
doffset = ".1px";
left = "-6px";
break;
default:
offset = "0px";
doffset = "0px";
left = "0px";
}
if (daynum === 1) {
offset = "1px";
left = "-2px";
}
if (daynum === 5) {
doffset = "1.5px";
}
if (daynum === 6) {
left = "-4px";
offset = "2px";
doffset = ".1px";
}
document.getElementById('year').style.letterSpacing = offset;
document.getElementById('day').style.letterSpacing = doffset;
document.getElementById('dates').style.left = left;
};
currentTime = new Date();
currentHours = currentTime.getHours();
currentMinutes = currentTime.getMinutes();
currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
mnth = currentTime.getMonth();
dat = currentTime.getDate();
day = currentTime.getDay();
oday = (dat < 10 ? "0" : "") + dat;
year = currentTime.getFullYear();
document.getElementById('clock').innerHTML = currentHours + ":" + currentMinutes;
document.getElementById('month').innerHTML = month[mnth];
document.getElementById('date').innerHTML = oday;
document.getElementById('day').innerHTML = weekday[day];
document.getElementById('year').innerHTML = year;
adjDay(weekday[day], day);
setTimeout(function () {
clock();
}, 30000);
}());
</script>
<meta charset="UTF-8">
<style>
.center{
width: 52px;
position: absolute;
text-align: center;
}
.clock{
color:#eeeeee;
font-family: 'numbers';
-webkit-font-smoothing: antialiased;
width: 250px;
height: 10px;
top:-18px;
font-size: 70px;
}
.month{
color: #eeeeee;
-webkit-font-smoothing: antialiased;
top:0px;
font-size: 25px;
font-family: 'letters';
font-weight: 200;
text-transform: uppercase;
}
.date{
color:#eeeeee;
font-family: 'numbers';
-webkit-font-smoothing: antialiased;
position: absolute;
width: 25px;
text-align: right;
font-size: 40px;
top:13px;
}
.year{
color:#eeeeee;
font-family: 'numbers';
-webkit-font-smoothing: antialiased;
position: absolute;
width: 160px;
text-align: left;
left:30px;
font-size: 20px;
top:34px;
}
.day{
color:#eeeeee;
-webkit-font-smoothing: antialiased;
position: absolute;
width: 160px;
text-align: left;
left:30px;
font-size: 15px;
top:23px;
font-family: 'letters';
letter-spacing: 0;
text-transform: uppercase;
}
#dates{
position: relative;
}
@font-face {
font-family: 'letters';
src: url(http://junesiphone.com/WebFonts/Building_Typeface.ttf);
}
@font-face {
font-family: 'numbers';
src: url(http://junesiphone.com/WebFonts/Dense-Regular.otf);
}
</style>
</div>