Javascript时钟颜色样式

Javascript clock color styling

本文关键字：样式 颜色 时钟 Javascript      更新时间：2023-09-26

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

这是一把正在工作的小提琴-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分区的部分

之后，它不再是|，而是现在的"<span class='timePipe'>|</span>"，这样我们就可以对timePipe类进行样式化。

CSS

.timePipe {
color: red;
}

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

textElem.innerHTML = s

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

希望对有所帮助

相关文章：