jq刷新页面随机显示元素内容信息

文章描述: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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容