通过时间戳控制类的，给符合时间控制条件的加上类名：
效果：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>
