Текст Javascript / номер заменить на изображение

Question

Я новичок в javascript и пытаюсь это выяснить, создавая немного бинарных часов (я знаю, это ужасно отвратительно)

Я написал большую часть этого, единственное, что я хочу сделать сейчас, - это экспортировать мои строки в виде серии нулей и единиц, и теперь я хотел бы, чтобы эти числа были заменены моими изображениями 0.png и 1. .png которые находятся в одном каталоге ...

ниже мой код, я бы очень хотел, чтобы он выполнялся в той же функции ...

function binClock ( )
{
    var currentTime = new Date ( );

    var currentYear = currentTime.getFullYear ( );
    var currentMonth = currentTime.getMonth ( ) +1;
    var currentDate = currentTime.getDate ( );
    var currentHours = currentTime.getHours ( );
    var currentMinutes = currentTime.getMinutes ( );
    var currentSeconds = currentTime.getSeconds ( );

    currentYear = currentYear.toString(2);
    currentMonth = currentMonth.toString(2);
    currentDate = currentDate.toString(2);
    currentHours = currentHours.toString(2);
    currentMinutes = currentMinutes.toString(2);
    currentSeconds = currentSeconds.toString(2);

    document.getElementById("year").firstChild.nodeValue = currentYear;
    document.getElementById("month").firstChild.nodeValue = currentMonth;
    document.getElementById("date").firstChild.nodeValue = currentDate;
    document.getElementById("hour").firstChild.nodeValue = currentHours;
    document.getElementById("min").firstChild.nodeValue = currentMinutes;
    document.getElementById("second").firstChild.nodeValue = currentSeconds;
}

Я запускаю это на теле с:

onload="binClock(); setInterval('binClock()', 1000 )"

Answer 1

Вот мой пример, как вы могли бы это сделать, я использую JQuery, но вы можете легко заменить его методом DOM javascript.

new Date().getFullYear().toString(2).split('')
.forEach(function(data) { 
    $('#year').append('<img src="../img/digit' + data + '.png');
});

// Изменить измененный пример + небольшая демонстрация http://jsfiddle.net/staar2/nXuHV/1/

Answer 2

Я понял это по-своему - способами, которые я понимаю ... поскольку я учусь, я хочу получить синтаксис и все, чтобы я мог понять, что я делаю и вкладываю1003 * Вы можете видеть, что он работает на http://www.simonbrowndesign.com/test/datestamp.php

Answer 3

Предполагается, что где-то в документе есть элемент IMG с идентификатором your_img:

var path_to_img = ...
var image = document.getElementById('your_img');
image.setAttribute('src', path_to_img);

, где path_to_img должен быть установлен на URL-адрес 0.png или 1.png в зависимости от некоторых условий.

Если нет элемента IMG, вы можете создать его и добавить в DOM следующим образом:

var path_to_img = ...;
var parent_element_id = ...;
var parent = document.getElementById(parent_element_id);
var image = document.createElement('IMG');
image.setAttribute('src', path_to_img);
parent.appendChild(image);

где parent_element_id - идентификатор элемента, под которым вы хотите добавить новый элемент IMG.