文章描述:jq刷新页面随机显示内容
<!--html-->
<ul id="listBox">
<li style="background:#31708f;" class="listItem">1</li>
<li style="background:#AA8899;" class="listItem">2</li>
<li style="background:#CC8899;" class="listItem">3</li>
<li style="background:#EE8899;" class="listItem">4</li>
<li style="background:#f0ad4e;" class="listItem">5</li>
<li style="background:#AAAA99;" class="listItem">6</li>
</ul>
/*css*/
li{padding:20px;margin-top: 20px;font-size: 20pt;text-align:center;list-style:none;}
//js
<script>
$('#listBox .listItem').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 itemNums = $('#listBox .listItem').length;
itemArr = randomIndex(itemNums );
radowm_Show();
//对应显示
function radowm_Show(){
var newItemArr=itemArr .slice(0, 3);
var arrvalue;//用于存放取出的数组的值
for(var i=0;i<3;i++){
arrvalue=newItemArr[i];//数组的索引是从0开始的.
$('#listBox .listItem').eq(arrvalue).show();
}
}
</script>