通过时间戳控制类

通过时间戳控制类的，给符合时间控制条件的加上类名：

效果：http://runjs.cn/code/jwl9fjvp

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间戳根据当前时间与设定时间对比</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #1cbfce;
    }
    .container{
        width: 800px;
        height:800px;
        margin: 50px auto;
    }
    .container li{
        width: 100px;
        height:100px;
        background-color: #000;
        border-radius: 50%;
        margin: 10px;
        list-style-type: none;
    }
    .container li.on{
        -webkit-animation:timer 1s ease infinite both;
    }
    @-webkit-keyframes timer {
        0%{opacity:0;-webkit-transform: scale(1,1);}
        50%{opacity:1;-webkit-transform: scale(1.5,1.5);}
        100%{opacity:0;-webkit-transform: scale(1,1);}
    }
</style>
<body>
    <div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var now = new Date()*1;
            var one = new Date(2016,3,1,10,23,0)*1;
            var two = new Date(2016,3,1,10,24,0)*1;
            var three = new Date(2016,3,1,10,25,0)*1;
            var four = new Date(2016,3,1,10,26,0)*1;
            var five = new Date(2016,3,1,10,27,0)*1;
            switch(true){
                case one<now&&now<two:
                    $('li').eq(0).addClass('on').siblings().removeClass('on');
                    break;
                case two<now&&now<three:
                    $('li').eq(1).addClass('on').siblings().removeClass('on');
                    break;
                case three<now && now<four:
                    $('li').eq(2).addClass('on').siblings().removeClass('on');
                    break;
                case four<now&&now<five:
                    $('li').eq(3).addClass('on').siblings().removeClass('on');
                    break;
                case five<now:
                    $('li').eq(4).addClass('on').siblings().removeClass('on');
                    break;
            }
        })
    </script>
</body>
</html>

posted @ 2016-04-01 10:36  黑客PK  阅读(213)  评论(0)  编辑  收藏  举报