工作任務遇到的這個問題,雖然很簡單,但是發現很多知識點沒有掌握熟練,使得最后東查西問,浪費時間,這里留文,以待后查。
思路整理:
-
我們需要解決兩個問題:一,隨機選取子元素;二,每隔一段時間展開某種行為。
隨機:需要使用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>