风格对倒计时不起作用

Question

风格不工作ul li ...它只显示没有任何风格。
我创建了JavaScript的倒计时时间，但它不工作....
JavaScript函数正在工作，但我的ul li无法获得输出样式。

<style type="text/css"> 
    ul#countdown li { 
     display: inline-block; 
     width: 54px; 
     margin-bottom: 4em; 
     text-align: center; 
     /*padding-top: 20px;*/ 
     background: black; 
     background-repeat: repeat; 
    } 

    ul#countdown li span { 
     font-size: 3em; 
     font-weight: bold; 
     color: #FFFFFF; 
     height: 50px; 
     line-height: 50px; 
     position: relative; 
    } 

    ul#countdown li span::before { 
     content: ''; 
     width: 100%; 
     height: 1px; 
     position: absolute; 
     top: 31px; 
    } 

    ul#countdown li p.timeRefDays, 
    ul#countdown li p.timeRefHours, 
    ul#countdown li p.timeRefMinutes, 
    ul#countdown li p.timeRefSeconds { 
     /*margin-top: 1em;*/ 
     color: #a89256; 
     text-transform: uppercase; 
     font-size: .875em; 
    } 
    .timer-area .logo img { 
     background: #FFFFFF; 
     padding: 10px; 
    } 

</style> 
<script> 

function CountDownTimer(dt, id) { 
     var end = new Date(dt); 

     var _second = 1000; 
     var _minute = _second * 60; 
     var _hour = _minute * 60; 
     var _day = _hour * 24; 
     var timer; 

     function showRemaining() { 
      var now = new Date(); 
      var distance = end - now; 
      if (distance < 0) { 
       clearInterval(timer); 
       document.getElementById(id).innerHTML = 'EXPIRED!'; 

       return; 
      } 
      var days = Math.floor(distance/_day); 
      var hours = Math.floor((distance % _day)/_hour); 
      var minutes = Math.floor((distance % _hour)/_minute); 
      var seconds = Math.floor((distance % _minute)/_second); 

//   document.getElementById(id).innerHTML = days + 'days '; 
//   document.getElementById(id).innerHTML += hours + 'hrs '; 
//   document.getElementById(id).innerHTML += minutes + 'mins '; 
//   document.getElementById(id).innerHTML += seconds + 'secs'; 

      document.getElementById(id).innerHTML = "<ul id='countdown'>"; 
      document.getElementById(id).innerHTML += "<li><span class='days'>days</span>"; 
      document.getElementById(id).innerHTML += "<p class='timeRefDays'>"+ days +"</p>"; 
      document.getElementById(id).innerHTML += "<li>"; 
      document.getElementById(id).innerHTML += "<li><span class='hours'>hours</span>"; 
      document.getElementById(id).innerHTML += "<p class='timeRefHours'>"+ hours +"</p>"; 
      document.getElementById(id).innerHTML += "</li>"; 
      document.getElementById(id).innerHTML += "<li> <span class='minutes'>minutes</span>"; 
      document.getElementById(id).innerHTML += "<p class='timeRefMinutes'>"+ minutes +"</p>"; 
      document.getElementById(id).innerHTML += "</li>"; 
      document.getElementById(id).innerHTML += "<li> <span class='seconds'>seconds</span>"; 
      document.getElementById(id).innerHTML += "<p class='timeRefSeconds'>"+ seconds +"</p>"; 
      document.getElementById(id).innerHTML += "</li>"; 
      document.getElementById(id).innerHTML += "</ul>"; 
     } 
     timer = setInterval(showRemaining, 1000); 
    } 
</script> 

<div class="row"> 
    <!-- <h3>New Products</h3> --> 
    <?php //if ($this->getProducts()->getSize() > '0') { ?> 

     <?php foreach ($this->getProducts() as $_Product) { ?> 

      <?php //echo $timespan = strtotime($_Product['special_to_date']) - strtotime($_Product['special_from_date']);exit; ?> 
      <div style="float: left; margin-left: 10px;"> 
       <div><a href="<?php echo $_Product->getProductUrl(); ?>"><img src="<?php echo $this->helper('catalog/image')->init($_Product, 'small_image')->resize(145, 200) ?>" alt="<?php echo $_Product->getName(); ?>"></a></div> 
       <div align="center"><h4><?php echo $_Product->getName(); ?></h4></div> 
       <div align="center"><?php echo Mage::helper('core')->formatPrice($_Product->getPrice()); ?></div> 
       <?php //echo "<pre>"; print_r($_Product->toArray());exit; ?> 


       <script> 
        CountDownTimer("<?php echo $_Product['special_to_date'] ?>", "newcountdown<?php echo $_Product['sku']; ?>"); 
       </script> 
       <div id="newcountdown<?php echo $_Product['sku']; ?>"> 

       </div> 
      </div> 
     <?php } ?> 
    <?php //} ?> 
</div> 

Answer 1

你写document.getElementById(id).innerHTML = "<ul id='countdown'>";标签渐渐立即与<li>元素以外关闭的方式，把它改为1个字符串，而不是所有的+ =和从应用CSS格式和<ul>收在正确的地方。

从

document.getElementById(id).innerHTML = "<ul id='countdown'>"; 
      document.getElementById(id).innerHTML += "<li><span class='days'>days</span>"; 
      document.getElementById(id).innerHTML += "<p class='timeRefDays'>"+ days +"</p>"; 
      document.getElementById(id).innerHTML += "<li>"; 
      document.getElementById(id).innerHTML += "<li><span class='hours'>hours</span>"; 
      document.getElementById(id).innerHTML += "<p class='timeRefHours'>"+ hours +"</p>"; 
      document.getElementById(id).innerHTML += "</li>"; 
      document.getElementById(id).innerHTML += "<li> <span class='minutes'>minutes</span>"; 
      document.getElementById(id).innerHTML += "<p class='timeRefMinutes'>"+ minutes +"</p>"; 
      document.getElementById(id).innerHTML += "</li>"; 
      document.getElementById(id).innerHTML += "<li> <span class='seconds'>seconds</span>"; 
      document.getElementById(id).innerHTML += "<p class='timeRefSeconds'>"+ seconds +"</p>"; 
      document.getElementById(id).innerHTML += "</li>"; 
      document.getElementById(id).innerHTML += "</ul>"; 

到

document.getElementById(id).innerHTML = "<ul id='countdown'>" + 
     "<li><span class='days'>days</span>" + 
     "<p class='timeRefDays'>" + days + "</p>" + 
     "<li>" + 
     "<li><span class='hours'>hours</span>" + 
     "<p class='timeRefHours'>" + hours + "</p>" + 
     "</li>" + 
     "<li> <span class='minutes'>minutes</span>" + 
     "<p class='timeRefMinutes'>" + minutes + "</p>" + 
     "</li>" + 
     "<li> <span class='seconds'>seconds</span>" + 
     "<p class='timeRefSeconds'>" + seconds + "</p>" + 
     "</li>" + 
     "</ul>" 

DEMO：http://jsfiddle.net/fqs3L4pr/