Skip to content

Instantly share code, notes, and snippets.

@leafiy

leafiy/Date-Time-layout.markdown

Created April 5, 2015 13:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save leafiy/49a58e208125b6017274 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save leafiy/49a58e208125b6017274 to your computer and use it in GitHub Desktop.
Download ZIP
Date/Time layout
Raw
index.html
<html>
<head>
<title>Created by JunesiPhone</title>
</head>
<body>
<div class="wrapper">
<div id="clock" class="center clock"></div>
<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>
</body>
</html>
Raw
script.js
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&#236', 'Marted&#236', 'Mercoled&#236', 'Gioved&#236', 'Venerd&#236', '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 = ["Janvie", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "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;
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();
day = currentTime.getDate();
oday = (day < 10 ? "0" : "") + day;
year = currentTime.getFullYear();
if (!twentyfour) {
currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
currentHours = (currentHours === 0) ? 12 : currentHours;
}
document.getElementById('clock').innerHTML = currentHours + ":" + currentMinutes;
document.getElementById('month').innerHTML = month[mnth - 1];
document.getElementById('date').innerHTML = oday;
document.getElementById('day').innerHTML = weekday[day];
document.getElementById('year').innerHTML = year;
adjDay(weekday[day], day);
setTimeout(function () {
clock();
}, 30000);
}());
Raw
style.css
*{
margin: 0;
padding: 0;
}
html{
color:white;
font-family: 'numbers';
-webkit-font-smoothing: antialiased;
background-color:#393939;
}
.wrapper{
position:absolute;
top:-300px;
}
.center{
width: 320px;
position: absolute;
text-align: center;
}
.clock{
top:400px;
font-size: 70px;
}
.month{
top:462px;
font-size: 30px;
font-family: 'letters';
font-weight: 200;
text-transform: uppercase;
}
.date{
position: absolute;
width: 160px;
text-align: right;
font-size: 52px;
top:480px;
}
.year{
position: absolute;
width: 160px;
text-align: left;
left:160px;
font-size: 30px;
top:499px;
}
.day{
position: absolute;
width: 160px;
text-align: left;
left:160px;
font-size: 15px;
top:489px;
font-family: 'letters';
letter-spacing: 0;
text-transform: uppercase;
}
#dates{
position: absolute;
}
@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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment