滑动切换时间列表

首先创建HTML结构。

<time>
    <span></span>
    <span></span>
</time>
<time>
    <span></span>
    <span></span>
</time>
<time>
    <span></span>
    <span></span>
</time>

首先获取时间：

function gettime(){
    var data = new Date();
    //获取当前时间的时分秒
    var h = data.getHours();
    var m = data.getMinutes();
    var s = data.getSeconds();
    //将当前时间拼接成为字符串
    var t  = two(h)+two(m)+two(s);
}
//假如时间的时分秒小于10，将数字填写为0n，方便后面赋值。
function two(n){
    n<10?'0'+n:''+n;
}

滑动函数
思路：滑动大的time标签，当time的的top移动了一个span标签的高度的时候，让time的top值变为零（初始值也为0）。

function Move(obj){
    clearInterval(timer);
    var date = +new Date();     //起始时间
    var timer = setInterval(function(){
        var t = (+new Date()) - date;
//这里300为time上滑需要的时间
        if(t >= 300){
            t = 300;
            clearInterval(timer)
        }
//这里100为滑动的距离。
        var value = 0 - t/300*100;
        obj.style.top = value + 'px';
    },30)
}

重点：哪个时间变化哪个图片才滑动。
如何判断：首先获取时间，将现在的时间赋值给一个oldtime，然后将现在的时间赋值给time标签里面第一个span元素，运用for循环。然后封装一个addtime函数，获取一个新的时间，赋值给t，然后比较t的每一位与old的每一位（因为他们都是字符串，所以可以通过for循环找到每一个字符串），如果两个字符串哪一位的数字不一样，就可以执行滑动函数（传参），将不一样的数字所对应的time标签滑动，然后在addtime函数里面将前面获取的时间t赋值给oldtime，替换oldtime原来的值。先执行一次，然后定时器循环，一秒一次。

注意：第一次执行并不会出现滑动，因为先执行gettime，然后将时间赋值给oldtime，然后到执行这里的addtime函数，时间没有超过一秒，所以oldtime与t的比较没有不一样，然后将oldtime赋值为现在的t，但是后面的定时器循环器，1s执行一次，所有oldtime与t之间 差了一秒，所有就会开始滑动。然后传参执行move函数，并且将t值赋值给time【i】（要滑动的time标签）标签里面的第二个span标签，让下面的span标签比上面的span标签的值大1，出现滑动的效果。

function addTimes(){
    //拿时间拼接的字符串。
    var t = getTime();
    //把时间填充到对应的span中。
    for(var i=0;i<times.length;i++){    
        //判断时间的每一位，如果不想等说明这一个位置上的数字有变化需要滑动。
        if(oldTime[i]!=t[i]){
            console.log(i)
            //传入需要滑动的元素，和对应的时间。
            slied(times[i],t[i]);
        }

    }
    oldTime = t;
}

完整js代码：

<script type="text/javascript">
    var times = document.getElementsByTagName('time');
    //初始化
    var t = getTime();
    var oldTime = t;

    for(var i=0;i<times.length;i++){
        times[i].getElementsByTagName('span')[0].innerHTML = t[i];
    }

    addTimes();//这一次执行并不会滑动，因为时间差的问题没有到一秒。

    setInterval(addTimes, 1000);//这里会执行滑动，因为定时器的时间间隔为1秒。
    function addTimes(){
        //拿时间拼接的字符串。
        var t = getTime();
        //把时间填充到对应的span中。
        for(var i=0;i<times.length;i++){    
            //判断时间的每一位，如果不想等说明这一个位置上的数字有变化需要滑动。
            if(oldTime[i]!=t[i]){
                console.log(i)
                //传入需要滑动的元素，和对应的时间。
                slied(times[i],t[i]);
            }

        }
        oldTime = t;
    }

    function slied(time,s){
        //先修改下边span的内容，因为下边的span在开始的时候是隐藏的。
        var spans = time.getElementsByTagName('span'); 
        spans[1].innerHTML = s;
        //然后运动time，把下边的span显示出来。
        move(time，function(){
        //当time运动结束的时候，上边的span就隐藏了，这个时候修改上边的span，并且把time的位置回到最初。（回调函数）
            spans[0].innerHTML = s;
            time.style.top = '';
        });
    }
    function getTime(){
        //获取当前时间
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        //把时间拼成字符串。
        var str = zeroFill(h)+zeroFill(m)+zeroFill(s);
        //返回时间拼的字符串。
        return str;
    }

    function zeroFill(n){
        return n<10?'0'+n:''+n;
    }

    </script>