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应用的格式以及{{1在正确的地方关闭。

来自

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

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

样式不在倒计时的ul li上工作

1 个答案: