工作任务遇到的这个问题,虽然很简单,但是发现很多知识点没有掌握熟练,使得最后东查西问,浪费时间,这里留文,以待后查。
思路整理:
-
我们需要解决两个问题:一,随机选取子元素;二,每隔一段时间展开某种行为。
随机:需要使用random()。
-
原材料:
- Math.random();
- Math.random()函数的取值为:[0,1);
- Math.floor();
- Math.floor()函数是向下取整的作用。
- children();
- jquery中,选取父元素的所有子元素。
- Math.random();
-
每隔:需要使用setInterval();
- 原材料:
- setInterval();
- setInterval()与setTimeOut()一样,都是有两个参数:函数及时间。最好采用下述方式使用这样方便调用终止函数。
- setInterval();
- 原材料:
实现如下:
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<!-- <script type="text/javascript" src="./js/index.js"></script> -->
<script type="text/javascript">
var childrenNode
var over;
function overTurn(){
over = setInterval(turn, 3000);
};
function turn(){
var num = Math.floor(Math.random()*9);
$('.box2').eq(0).children().removeClass('animate');
$('.box2').eq(0).children().eq(num).addClass('animate');
};
function stopOverTurn(){
clearInterval(over);
}
overTurn();
</script>