SVG, который показывает актуальную дату

Очень интересный способ показать всегда актуальную дату нашли ребята на Хабре. Далее пример-цитата оттуда:

 

SVG поддерживает JavaScript. Это запускается сразу после загрузки изображения.

<svg onload="init(evt)" xmlns="http://www.w3.org/2000/svg"
aria-label="Calendar" role="img" viewBox="0 0 512 512">

Следующий этап — получить различные строки с датами. Я использую британскую локаль en-GB, поскольку нахожусь в Великобритании.

<script type="text/ecmascript"><![CDATA[
function init(evt) {
var time = new Date();
var locale = "en-gb";

Мне нужно что-то вроде “Sunday 25 FEB”. Настройки локали поддерживают короткие и длинные имена, так что вы можете выбрать “SUN 25 February”.

var DD = time.getDate();
var DDDD = time.toLocaleString(locale, {weekday: "long"});
var MMM = time.toLocaleString(locale, {month: "short"});

Наконец, добавляем текст на изображение.
var svgDocument = evt.target.ownerDocument;
var dayNode = svgDocument.createTextNode(DD);
svgDocument.getElementById("day").appendChild(dayNode);
var weekdayNode = svgDocument.createTextNode(DDDD);
svgDocument.getElementById("weekday").appendChild(weekdayNode);
var monthNode = svgDocument.createTextNode(MMM.toUpperCase());
svgDocument.getElementById("month").appendChild(monthNode);
}
]]></script>

← Instories.ru - удивительный сайт Этой карте точно нужен редизайн... ↑