Wie css Elemente zu coundownt Uhr hinzufügen

Im Codierung (kopiert) diese Countdown-Uhr bis Juli zuerst. Mit der .foo-Klasse habe ich es geschafft, die Uhrfarbe rot und Schriftgröße 50px zu machen, aber wie kann ich eine separate Grenze für jeden Tag, jede Stunde, Minute, Sekunde erstellen?Wie css Elemente zu coundownt Uhr hinzufügen

Dies ist einer meiner ersten Codes so erklären Sie es bitte einfach.

<!DOCTYPE html> 

    <html lang="en"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="StyleSheet.css"> 

    <style> 

    h1{color:brown; 
    } 
    p 
    {font-size:50px; 
    color:lightcoral; 
    } 

    .foo{color:red; 
    font-size:50px; 



    } 

     </style> 
</head> 

<body style="background-color:cyan" "text-align:center"> 

<h1> </h1> 

<h2> </h2> 



    <div id="clockdiv" class="foo"> 

    Days:<span class="days"></span><br> 
    Hours: <span class="hours"></span><br> 
    Minutes: <span class="minutes"></span><br> 
    Seconds: <span class="seconds"></span> 
    </div> 








    <script> 
    var deadline = '7/1/2017'; 
    initializeClock('clockdiv', deadline); 

    function getTimeRemaining(endtime){ 
    var t = Date.parse(endtime) - Date.parse(new Date()); 
    var seconds = Math.floor((t/1000) % 60); 
    var minutes = Math.floor((t/1000/60) % 60); 
    var hours = Math.floor((t/(1000*60*60)) % 24); 
    var days = Math.floor(t/(1000*60*60*24)); 
    return { 
     'total': t, 
     'days': days, 
     'hours': hours, 
     'minutes': minutes, 
     'seconds': seconds 
    }; 

    } 

    function initializeClock(id, endtime){ 
     var clock = document.getElementById(id); 
     var daysSpan = clock.querySelector('.days'); 
     var hoursSpan = clock.querySelector('.hours'); 
     var minutesSpan = clock.querySelector('.minutes'); 
     var secondsSpan = clock.querySelector('.seconds'); 

     var timeinterval = setInterval(function(){ 
     var t = getTimeRemaining(endtime); 
     clock.innerHTML = 'days: ' + t.days + '<br>' + 
         'hours: '+ t.hours + '<br>' + 
         'minutes: ' + t.minutes + '<br>' + 
         'seconds: ' + ('0' + t.seconds).slice(-2); 
     if(t.total<=0){ 
     clearInterval(timeinterval); 
     } 
     },1000); 
    } 




</script> 
    </body> 
</html>

Quelle

2017-01-31 1000123123

Haben Sie Styles in Ihrer StyleSheet.css? Wenn ja, wäre es schön zu teilen. –

keine Stile auf StyleSheet.css – 1000123123

Willkommen bei Stack Overflow! Sie können lernen, wie Sie eine gute Frage stellen (http://stackoverflow.com/help/how-to-ask) und ein [Minimal, Complete und Verifable] erstellen (http://stackoverflow.com/help/). mcve) Beispiel. Das macht es einfacher für uns, Ihnen zu helfen –

assign CSS Klassen (Tage/Stunden/Minuten) etc

.days .hours .minutes .seconds { 
    border-style: solid; 
    border-width: 5px; 
}

, wenn Sie verschiedene Elemente wollten verschiedene Stile haben sie dann

.days { 
border-style: solid; 
    border-width: 5px; 
} 

.hours { 
border-style: solid; 
    border-width: 10px; 
}

beispielsweise trennen.

ref: http://www.w3schools.com/CSSref/pr_border.asp

Quelle

2017-01-31 23:37:36 Noneleft

Vielen Dank für Ihre Antwort, aus irgendeinem Grund funktioniert das nicht, muss etwas mit Javascript falsch sein? – 1000123123

Ganz Datei unten - eine zusätzliche Pause zwischen den Elementen hinzugefügt, um sie weiter zu trennen - nur entfernen, wenn Sie nicht wollen - Linien 63/64/65

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="StyleSheet.css"> 
    <style> 
     h1{color:brown; 
     } 
     p 
     {font-size:50px; 
      color:lightcoral; 
     } 

     .foo{color:red; 
      font-size:50px; 

     } 

     .days, .hours, .minutes, .seconds { 
      border-style: solid !important; 
      border-width: 5px !important; 

     } 
    </style> 
</head> 
<body style="background-color:cyan" "text-align:center"> 
<h1> </h1> 
<h2> </h2> 
<div id="clockdiv" class="foo"> 

    <span class="days"> Days:</span><br> 
    Hours: <span class="hours"></span><br> 
    Minutes: <span class="minutes"></span><br> 
    Seconds: <span class="seconds"></span> 
</div> 
<script> 
    var deadline = '7/1/2017'; 
    initializeClock('clockdiv', deadline); 

    function getTimeRemaining(endtime){ 
     var t = Date.parse(endtime) - Date.parse(new Date()); 
     var seconds = Math.floor((t/1000) % 60); 
     var minutes = Math.floor((t/1000/60) % 60); 
     var hours = Math.floor((t/(1000*60*60)) % 24); 
     var Days = Math.floor(t/(1000*60*60*24)); 
     return { 
      'total': t, 
      'Days': Days, 
      'hours': hours, 
      'minutes': minutes, 
      'seconds': seconds 
     }; 

    } 
    function initializeClock(id, endtime){ 
     var clock = document.getElementById(id); 
     var DaysSpan = clock.querySelector('.days'); 
     var hoursSpan = clock.querySelector('.hours'); 
     var minutesSpan = clock.querySelector('.minutes'); 
     var secondsSpan = clock.querySelector('.seconds'); 

     var timeinterval = setInterval(function(){ 
      var t = getTimeRemaining(endtime); 
      clock.innerHTML = '<span class="days">Days: ' + t.Days + '</span><br /><br />' + 
       '<span class="hours">hours: '+ t.hours + '</span><br /><br />' + 
       '<span class="minutes">minutes: ' + t.minutes + '</span><br /><br />' + 
       '<span class="seconds">seconds: ' + ('0' + t.seconds).slice(-2); 
      if(t.total<=0){ 
       clearInterval(timeinterval); 
      } 
     },1000); 
    } 
</script> 
</body> 
</html>

Der Problem war, dass die JS war über die Legung der HTML, also mussten wir die Klasse in die JS - so, wenn es über die HTML gelegt wurde, tat es so mit den Klassen intakt, die dann Styling aus der CSS

Quelle

2017-02-01 10:43:24 Noneleft

Wie css Elemente zu coundownt Uhr hinzufügen

Antwort

Verwandte Themen