1. Zuhause
  2. Frage und Antwort
  3. Javascript Uhr Farb-Styling

Javascript Uhr Farb-Styling

2016-04-18 7 views
0

Ich bin Neuling zu JS und würde gerne wissen, ob es eine Möglichkeit gibt, die Farbe der "|" Zwischen der Uhrzeit und den Minuten im Code. Ich hätte gerne, dass es rot ist. Dank für jede Hilfe, Tipps und vor allem Erklärungen :)Javascript Uhr Farb-Styling

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

Quelle

2016-04-18 chesstu

+1

ersetzen "|" mit " |" –

+1

Danke Ali für die Hilfe, aber es scheint nicht zu funktionieren ... Es sei denn, ich habe nicht richtig verstanden ... Wenn ich die ändern "| ' Wie du im Skript gesagt hast, endet es folgendermaßen: http://imgur.com/4h3BNFL – chesstu

+0

Bitte überprüfe meine Antwort unten. Du wirst einen aktualisierten JS-Code sehen. –

Antwort

0

Hier ist eine Arbeits Geige - https://jsfiddle.net/fhv6r0sL/

Sie möchten vielleicht ein Inline-Element hinzuzufügen, um die |

einzuwickeln

Da Sie einen textNode erstellt haben, können Sie kein HTML-Tag mehr hinzufügen.

Hier ist der aktualisierte JS-Code.

"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);

Hier habe ich das Teil entfernt, wo Sie eine textNode erstellt und angebracht, dass an den textElem div.

Nach dem statt | ist es jetzt "<span class='timePipe'>|</span>", so dass wir die timePipe Klasse stylen können.

CSS

.timePipe { 
color: red; 
}

Jetzt können wir die var s als HTML zum textElem mit der innerHTML- Methode injizieren.

textElem.innerHTML = s

Beachten Sie, dass es in Ordnung ist, auch wenn Sie eine textNode schaffen, aber wir brauchen HTML die | stylen. Es hat also keinen Sinn, dort einen zu haben, sondern den Inhalt als HTML hinzuzufügen.

Hoffe das hilft

Quelle

2016-04-18 05:47:20

+1

Wow, danke für all die Erklärungen :) Brain is brennen !!! – chesstu

+0

Gern geschehen! –

Verwandte Themen

 Verwandte Themen