Javascript clock style style

Я новичок в JS и хотел бы узнать, есть ли способ изменить цвет «|», между часами и минутами в коде. Я бы хотел, чтобы он был красным. Спасибо за любую помощь, советы и передовых объяснений :)Javascript clock style style

<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 дел.

После этого вместо | сейчас "<span class='timePipe'>|</span>", так что мы можем создать класс timePipe.

CSS

.timePipe { 
color: red; 
}

Теперь мы можем вводить var s как HTML к textElem с использованием метода innerHTML.

textElem.innerHTML = s

Обратите внимание, что это хорошо, даже если вы создаете TextNode, но нам нужно HTML, чтобы стиль |. Таким образом, нет смысла иметь его, скорее добавьте контент в HTML.

Надеюсь, что поможет

источник

2016-04-18 05:47:20

Ничего себе, спасибо за все объяснения :) Мозг сжигание !!! – chesstu

Добро пожаловать! –

Javascript clock style style

ответ

Смежные вопросы