Javascript時鐘顏色造型

我是JS的新手，想知道是否有方法來修改「|」的顏色。在代碼中的時鐘和分鐘之間。我想它是紅色的。感謝您的幫助，提示和最重要的解釋:)Javascript時鐘顏色造型

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

\t @font-face { 
 
\t font-family: Steelfish; 
 
\t src: url(Images/Steelfish.ttf); 
 
} 
 

 
    \t body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t text-shadow: 0px 1px 1px black; 
 
\t font-family: Steelfish; 
 
\t font-weight:100; 
 
\t color:red; 
 
\t letter-spacing: 1px; 
 
} 
 

 
#clock { 
 
     position:absolute; top:-17px; left:205px; text-align:left; z-index:50; 
 
     font-size:10pt; 
 
\t 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; 
 
\t 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> 
 
\t \t <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> 
 
\t </div> 
 
            
 
           <script type="text/javascript"> 
 
\t \t \t "use strict"; 
 
\t \t \t 
 
\t \t \t var textElem = document.getElementById("clock"); 
 
\t \t \t var textNode = document.createTextNode(""); 
 
\t \t \t textElem.appendChild(textNode); 
 
\t \t \t var curFontSize = 24; // Do not changes 
 
\t \t \t 
 
\t \t \t function updateClock() { 
 
\t \t \t \t var d = new Date(); 
 
\t \t \t \t var s = ""; 
 
\t \t \t \t s += (10 > d.getHours () ? "0" : "") + d.getHours() + "|"; 
 
\t \t \t \t s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes(); 
 
\t \t \t \t textNode.data = s; 
 
\t \t \t \t setTimeout(updateClock, 60000 - d.getTime() % 60000 + 100); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t function updateTextSize() { 
 
\t \t \t \t var targetWidth = 0.9; // Proportion of full screen width 
 
\t \t \t \t for (var i = 0; 3 > i; i++) { // Iterate for better better convergence 
 
\t \t \t \t \t var newFontSize = textElem.parentNode.offsetWidth * targetWidth/textElem.offsetWidth * curFontSize; 
 
\t \t \t \t \t textElem.style.fontSize = newFontSize.toFixed(3) * "pt"; 
 
\t \t \t \t \t curFontSize = newFontSize; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t updateClock(); 
 
\t \t \t updateTextSize(); 
 
\t \t \t window.addEventListener("resize", updateTextSize); 
 
\t \t </script> 
 
              
 
</body> 
 
</html>

來源

2016-04-18 chesstu

替換「|」與「 |」 –

「感謝阿里的幫助，但它似乎並沒有工作......除非我不明白正確...如果我改變「|」就像你在腳本中說的那樣，結果是這樣的：http://imgur.com/4h3BNFL – chesstu

請檢查我的答案，你會看到一個更新的JS代碼 –

這裏的工作小提琴 - 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; 
}

現在我們可以注入var s爲使用的innerHTML方法的HTML到textElem。

textElem.innerHTML = s

注意，它的罰款，即使你創建一個textNode，但我們需要HTML樣式的|。所以沒有一個在那裏，而是將內容添加爲HTML。

希望有幫助

來源

2016-04-18 05:47:20

哇非常感謝所有的解釋:)腦是燃燒!!! – chesstu

不客氣！ –

Javascript時鐘顏色造型

回答

相關問題