【jQuery】随机不重复显示多个div
作者:广树 | 时间:2016-4-5 14:07:44 | 分类 : JavaScript/jQuery/Vue
JS:
- <script>
- $('#change_item_list .hot_susume_item_box').hide();//先全部隐藏
- //产生不重复随机排序数组
- function randomIndex(n){
- var i, j, tmp, a = new Array(n);
- a[0] = 0;
- for(i = n-1; i > 0; i--) {
- j = Math.floor(Math.random() * (i+1));
- tmp = a[i] || i;
- a[i] = a[j] || j;
- a[j] = tmp;
- };
- return a;
- }
- //一共有多少个项目
- var hot_item_nums = $('#change_item_list .hot_susume_item_box').length;
- hot_item_arr = randomIndex(hot_item_nums);
- radowm_Show()
- //对应显示
- function radowm_Show(){
- var new_hot_item_arr=hot_item_arr.slice(0, 5)
- var hot_max_nums = Math.max.apply(null, new_hot_item_arr);//最大值
- var arrvalue;//用于存放取出的数组的值
- for(var i=0;i<5;i++){
- arrvalue=new_hot_item_arr[i];//数组的索引是从0开始的.
- $('#change_item_list .hot_susume_item_box').eq(arrvalue).show();
- if(i==4){
- $('#change_item_list .hot_susume_item_box').eq(hot_max_nums).addClass('hot_item_last_one')
- }
- }
- }
- /*点击事件*/
- $('#hot_change').click(function(){
- $('#change_item_list .hot_susume_item_box.hot_item_last_one').removeClass('hot_item_last_one')
- $('#change_item_list .hot_susume_item_box').hide();
- var hot_item_nums = $('#change_item_list .hot_susume_item_box').length;
- hot_item_arr = randomIndex(hot_item_nums);
- radowm_Show()
- });
- </script>
1
2
6
8
12
赞一个1
发表评论: