24小时倒计时

1、html

如果一个页面有多个倒计时

<div id="listOne">

<ul>

<li>

<img src="/img/list.png" />

<div>

<p>

<span>还剩</span>

<em></em>

<span>:</span>

<em></em>

<span>:</span>

<em></em>

</p>

</div>

</li>

</ul>

</div>

<div id="listTwo">

<ul>

<li>

<img src="/img/list.png" />

<div>

<p>

<span>还剩</span>

<em></em>

<span>:</span>

<em></em>

<span>:</span>

<em></em>

</p>

</div>

</li>

</ul>

</div>

2、js

function getTimeLi(liNum,endTime,flag){

    var obj;

    var timer = null;

    if(flag == true){

        obj = document.getElementById("listOne").getElementsByTagName("li");

    }else{

        obj = document.getElementById("listTwo").getElementsByTagName("li");

    }

    

    timer = setInterval(function(){

            var a = endTime;

            var b = new Date().getTime();

            var ee = obj[liNum].getElementsByTagName("em");

            var date = a - b;

            var hours = date/ 1000 / 60 / 60 ;

            var hoursRound = Math.floor(hours);

            var minutes = date / 1000 /60 - (60 * hoursRound);

            var minutesRound = Math.floor(minutes);

            var seconds = date/ 1000 - (60 * 60 * hoursRound) - (60 * minutesRound);

            var secondsRound = Math.floor(seconds);

            ee[0].innerHTML = getzf(hoursRound);

            ee[1].innerHTML = getzf(minutesRound);

            ee[2].innerHTML = getzf(secondsRound);

            

            if(a <= b){

                clearInterval(timer);

                ee[0].innerHTML = '00';

                ee[1].innerHTML = '00';

                ee[2].innerHTML = '00';

            }

        },1000);

}

//补零操作

function getzf(num){

    if(parseInt(num) < 10){

        num = '0'+num;

    }

    return num;

}

controller.js再调用该函数

getTimeLi(i,resp.list[i].time,listFlag);

3、css

em {

font-style: normal;

}