如何添加css元素coundownt時鐘

Im編碼（複製）這個倒計時時鐘到7月首先。使用.foo類我設法使時鐘顏色爲紅色，字體大小爲50px，但我怎樣才能爲每一天，幾小時，幾分鐘，幾秒製作一個單獨的邊框？如何添加css元素coundownt時鐘

這是我的第一個代碼之一，所以請解釋它簡單。

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

來源

2017-01-31 1000123123

你的StyleSheet.css中有一些樣式嗎？如果是這樣，將很高興分享。 –

StyleSheet.css上沒有樣式尚未 – 1000123123

歡迎使用堆棧溢出！你可以學習[如何提出一個好問題]（http://stackoverflow.com/help/how-to-ask）並創建一個[Minimal，Complete，and Verifiable]（http://stackoverflow.com/help/） mcve）的例子。這使我們更容易幫助您 –

分配CSS的類（天/小時/分鐘）等

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

如果你想不同的元素有不同的風格，然後

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

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

分隔，例如。

裁判：http://www.w3schools.com/CSSref/pr_border.asp

來源

2017-01-31 23:37:36 Noneleft

感謝您的回答，由於某種原因，這不起作用，必須是JavaScript錯誤？ – 1000123123

下面

整個文件 - 添加的元素之間的一個額外的休息，以進一步將它們分開 - 只是刪除，如果你不想要的 - 線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>

的問題在於JS是在鋪設html，所以我們不得不將這個類添加到JS中 - 這樣，當它放置了html時，它完成了這些類，然後從css中取出樣式

來源

2017-02-01 10:43:24 Noneleft

如何添加css元素coundownt時鐘

回答

相關問題