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

私は体でこれを実行しています：

あなたがどこかにID your_imgた、ドキュメント内にIMG要素を持っていると仮定すると

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

Answer 1

：0.pngか1.pngからpath_to_imgがURLに設定する必要があり

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

いくつかの状態に応じて。

あなたはそれを作成し、このようにDOMに追加することができます何のIMG要素が存在しない場合：parent_element_idは、新しいIMG要素を追加したいの下に要素のIDです

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

。

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

で動作して見ることができるということであるかを理解することができます