Question

我是JS的新手，想知道是否有办法修改“|”的颜色在代码中的时钟小时和分钟之间。我希望它是红色的。感谢您提供任何帮助，提示和最重要的解释：）

<script type="text/javascript">
			"use strict";
			
			var textElem = document.getElementById("clock");
			var textNode = document.createTextNode("");
			textElem.appendChild(textNode);
			var curFontSize = 24;  // Do not changes
			
			function updateClock() {
				var d = new Date();
				var s = "";
				s += (10 > d.getHours  () ? "0" : "") + d.getHours() + "|";
				s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes();
				textNode.data = s;
				setTimeout(updateClock, 60000 - d.getTime() % 60000 + 100);
			}
			
			
			function updateTextSize() {
				var targetWidth = 0.9;  // Proportion of full screen width
				for (var i = 0; 3 > i; i++) {  // Iterate for better better convergence
					var newFontSize = textElem.parentNode.offsetWidth * targetWidth / textElem.offsetWidth * curFontSize;
					textElem.style.fontSize = newFontSize.toFixed(3) * "pt";
					curFontSize = newFontSize;
				}
			}
			
			updateClock();
			updateTextSize();
			window.addEventListener("resize", updateTextSize);
		</script>

	@font-face {
	font-family: Steelfish;
	src: url(Images/Steelfish.ttf);
}

   	body {
	margin: 0;
	padding: 0;
	text-shadow: 0px 1px 1px black;
	font-family: Steelfish;
	font-weight:100;
	color:red;
	letter-spacing: 1px;
}

#clock {
       position:absolute; top:-17px; left:205px; text-align:left; z-index:50;
       font-size:10pt;
	   color:gray;
}

#minute{color:gray;}

#icon{position:absolute; top:24px; left:0px; width:50px; z-index:50;}

#location{
       position:absolute; top:50px; left:80px; width:250px; height:50px; text-align:left; z-index:50;
       color:#f79b00;
       font-size:17px;
}
#temperature{
       position:absolute; top:66px; left:160px; width:250px; height:50px; text-align:left; z-index:50;
       color:#248ffc;
       font-size:19px;
}
#condition{
       position:absolute; top:14px; left:80px; width:250px; height:50px; text-align:left z-index:50;
       color:f16000;
       font-size:19px;
}

#barre{
       position:fixed; top:62px; left:60px; width:140px; height:64px; text-align:left; z-index:12;
	   border-top: 1px solid grey;
}

<html>
<body onload="didLoadPage()">

<div id="barre"></div>

  <div id="wrap">
    <section id="topSection">
      <div id="left" style="width:40%;vertical-align:middle;">
        <p id="location"">London</p>
		<p id="clock" style="font-size:36pt;"></p>
        <p id="condition">Mostly Clear</p>
      </div>
      
      <div id="middle" style="width:20%;">
        <center>
          <img id="icon" src="IconSets/Sink/0.png" style="width:75px;" alt="" />
        </center>
      </div>
      
      <div id="right" style="width:40%;">
        <p><span id="temperature">10</span>
      </div>
    </section>
	 </div>
                                 
                                 <script type="text/javascript">
			"use strict";
			
			var textElem = document.getElementById("clock");
			var textNode = document.createTextNode("");
			textElem.appendChild(textNode);
			var curFontSize = 24;  // Do not changes
			
			function updateClock() {
				var d = new Date();
				var s = "";
				s += (10 > d.getHours  () ? "0" : "") + d.getHours() + "|";
				s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes();
				textNode.data = s;
				setTimeout(updateClock, 60000 - d.getTime() % 60000 + 100);
			}
			
			
			function updateTextSize() {
				var targetWidth = 0.9;  // Proportion of full screen width
				for (var i = 0; 3 > i; i++) {  // Iterate for better better convergence
					var newFontSize = textElem.parentNode.offsetWidth * targetWidth / textElem.offsetWidth * curFontSize;
					textElem.style.fontSize = newFontSize.toFixed(3) * "pt";
					curFontSize = newFontSize;
				}
			}
			
			updateClock();
			updateTextSize();
			window.addEventListener("resize", updateTextSize);
		</script>
                                            
</body>
</html>

Answer 1

这是一个工作小提琴 - https://jsfiddle.net/fhv6r0sL/

您可能希望添加内联元素以包围|

由于您创建了textNode，因此无法立即添加任何HTML标记。

这是更新的JS代码。

"use strict";

            var textElem = document.getElementById("clock");
            // var textNode = document.createTextNode("");
            // textElem.appendChild(textNode);
            var curFontSize = 24;  // Do not changes

            function updateClock() {
                var d = new Date();
                var s = "";
                s += (10 > d.getHours  () ? "0" : "") + d.getHours() + "<span class='timePipe'>|</span>";
                s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes();
                textElem.innerHTML = s;
                setTimeout(updateClock, 60000 - d.getTime() % 60000 + 100);
            }


            function updateTextSize() {
                var targetWidth = 0.9;  // Proportion of full screen width
                for (var i = 0; 3 > i; i++) {  // Iterate for better better convergence
                    var newFontSize = textElem.parentNode.offsetWidth * targetWidth / textElem.offsetWidth * curFontSize;
                    textElem.style.fontSize = newFontSize.toFixed(3) * "pt";
                    curFontSize = newFontSize;
                }
            }

            updateClock();
            updateTextSize();
            window.addEventListener("resize", updateTextSize);

在这里，我删除了您创建textNode的部分，并将其附加到textElem div。

之后代替|它现在是"<span class='timePipe'>|</span>"，以便我们可以设置timePipe类的样式。

CSS

.timePipe {
color: red;
}

现在我们可以使用innerHTML方法将var s作为HTML注入textElem。

textElem.innerHTML = s

请注意，即使您创建了textNode也没问题，但我们需要HTML来设置|的样式。所以没有必要在那里有一个，而是将内容添加为HTML。

希望有所帮助

Javascript时钟颜色造型

1 个答案: