的Javascript文字/數字替換圖像

Question

林新的JavaScript，並試圖弄清楚這一點，建立一個小的二進制時鐘的事（我知道非常令人討厭）

我已經寫了大部分，我唯一希望現在做的是，我有我的字符串導出爲一系列的0和1，現在我想這些數字被替換爲我的圖像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

假設你的地方有一個IMG元素的文檔與ID 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取決於某些條件。

如果有，你可以創建它，並把它添加到DOM這樣沒有IMG元素：

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元素的元素的ID。

Answer 2

那麼這裏是我的例子你如何做到這一點，我使用JQuery，但你可以用JavaScript DOM方法輕鬆替換。

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

//編輯修改我的示例+小的演示 http://jsfiddle.net/staar2/nXuHV/1/

Answer 3

我想通了我自己的方式 - 在我理解的方式......作爲即時通訊的學習我想要得到的語法和一切都那麼我可以理解它是什麼，即時通訊做，並把在

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); 

currentYear = currentYear.replace(/0/g,"<img src='0.png' />"); 
currentYear = currentYear.replace(/1/g,'<img src="1.png" />'); 

currentMonth = currentMonth.replace(/0/g,"<img src='0.png' />"); 
currentMonth = currentMonth.replace(/1/g,'<img src="1.png" />'); 

currentDate = currentDate.replace(/0/g,"<img src='0.png' />"); 
currentDate = currentDate.replace(/1/g,'<img src="1.png" />'); 

currentHours = currentHours.replace(/0/g,"<img src='0.png' />"); 
currentHours = currentHours.replace(/1/g,'<img src="1.png" />'); 

currentMinutes = currentMinutes.replace(/0/g,"<img src='0.png' />"); 
currentMinutes = currentMinutes.replace(/1/g,'<img src="1.png" />'); 

currentSeconds = currentSeconds.replace(/0/g,"<img src='0.png' />"); 
currentSeconds = currentSeconds.replace(/1/g,'<img src="1.png" />'); 

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

你可以看到它在運行 http://www.simonbrowndesign.com/test/datestamp.php