带图像的数字时钟答案

【问题标题】：Digital clock with images带图像的数字时钟
【发布时间】：2017-08-15 07:42:35
【问题描述】：

我想用图像制作一个数字时钟，但我不知道从哪里开始。该项目包括用 24 小时样式的图像替换时钟编号。

从 7 到 20（需要显示蓝色数字）（打开）从 20 到 7（需要显示红色数字）（关闭）。

我正在尝试使用 w3c 示例“https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock”

但我不知道如何用 2 个不同数组中的图像替换数字。它只需要在 javascript 中，因为这是我想要学习的。

我不知道我的问题是否清楚，但谢谢。

【问题讨论】：

标签： javascript

【解决方案1】：

好的，我们是如何将时间作为字符串获取的，我建议获取字符串的每个字母，并使用 HTML img 标签（我们可以使用纯 JavaScript 生成）使用图像来表示每个字母。看看下面的例子。我希望它有所帮助。

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  //this variable contains the time as a string
  var string = h + ":" + m + ":" + s;
  //this converts string to a set of HTML img tags containing images
  var img = stringToImage(string);
  //this puts the time on the website
  document.getElementById('txt').innerHTML =
    string + "<br>" + img;
  //this loops the function every 1000 milliseconds (1 second)
  var t = setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i
  } // add zero in front of numbers < 10
  return i;
}

//This function takes each letter of an array and pairs it to an image of the img array 
function stringToImage(s) {
  //create a temporary blank variable to hold HTML images
  var temp = ""
  for (var i = 0; i < s.length; i++) {
    //we take the URL from array img and shove it into an HTML img tag
    //also append it to the temporary variable
    temp = temp + "<img src='" + img[s[i]] + "'/>"
  }
  //uncomment below line to see what the temporary variable says
  //console.log(temp)
  return temp
}


//all image URLs are put into this array. feel free to change URLs
var img = {
  "1": "http://www.kidsmathgamesonline.com/images/pictures/numbers120/number1.jpg",
  "2": "http://www.kidsmathgamesonline.com/images/pictures/numbers120/number2.jpg",
  "3": "http://www.kidsmathgamesonline.com/images/pictures/numbers120/number3.jpg",
  "4": "http://www.kidsmathgamesonline.com/images/pictures/numbers120/number4.jpg",
  "5": "http://www.kidsmathgamesonline.com/images/pictures/numbers120/number5.jpg",
  "6": "http://www.kidsmathgamesonline.com/images/pictures/numbers120/number6.jpg",
  "7": "http://www.kidsmathgamesonline.com/images/pictures/numbers120/number7.jpg",
  "8": "http://www.kidsmathgamesonline.com/images/pictures/numbers120/number8.jpg",
  "9": "http://www.kidsmathgamesonline.com/images/pictures/numbers120/number9.jpg",
  "0": "http://www.kidsmathgamesonline.com/images/pictures/numbers120/number0.jpg",
  ":": "https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.colonsemicolon.com%2Fwp-content%2Fuploads%2F2012%2F02%2Fcolon.gif&f=1"
}

//credit images to:
//http://www.kidsmathgamesonline.com/pictures/numbers.html
//http://www.colonsemicolon.com/

<!DOCTYPE html>
<html>

<head>
  <!--<script type="text/javascript" src="topic.js">-->
  </script>
</head>

<body onload="startTime()">

  <div id="txt"></div>
</body>

</html>

【讨论】：

【解决方案2】：

setInterval(test,1000);
		function test()
		{
			$("body").load('#ch');
		}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!-- <meta http-equiv="refresh" content="1"> -->
	<script>
		
	</script>

</head>
<body>
<center>
	<h1>Digital Clock</h1>
	<hr>
	<div id="ch"><?php date_default_timezone_set("Asia/Kolkata"); echo date('h:i:s A e'); ?></div>
</center>
</body>
</html>

【讨论】：