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

假设您在ID为your_img的文档中的某处有一个IMG元素：

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

其中path_to_img应设置为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元素的元素的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

Javascript文本/数字替换为图像

3 个答案: