样式在倒数的ul li上不起作用

Question

Style not working on ul li ... It is only showing without any style.
I'm creating countdown of time by JavaScript but its not working....
JavaScript function is working but my ul li could not get style on output.

<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

the way you wrote document.getElementById(id).innerHTML = "<ul id='countdown'>"; the tag was getting closed instantly with the <li> elements outside, changed it to 1 string instead of all the += and the formatting from CSS applied and the <ul> closed at the right place.

from

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

to

    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/