用图像替换Javascript文本/数字

Javascript text/number replace with image

本文关键字：数字 文本 Javascript 图像 替换      更新时间：2023-09-26

我是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 )"

假设文档中有一个IMG元素，ID为your_img:

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

其中CCD_ 2应当根据某些条件被设置为指向CCD_ 3或CCD_。

如果没有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。

这是我的例子，我使用JQuery，但您可以很容易地用JavaScriptDOM方法替换。

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

//编辑修改了我的示例+小演示http://jsfiddle.net/staar2/nXuHV/1/

我用自己的方式——用我理解的方式。。。在我学习的过程中，我想了解语法和所有内容，这样我就可以理解我在做什么并放入

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

相关文章：