Jqery实现书籍换一换

最新推荐文章于 2024-11-05 22:07:06 发布

qq_42307546

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量117

点赞数 3

分类专栏： js 文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_42307546/article/details/139973116

版权

js 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        ul{
            width: 404px;
            list-style: none;
            padding: 0;
           
            overflow: hidden;
            border: solid 0px red;
        }
        ul>li{
            float: left;
            border: solid 0px red;
            text-align: center;
          
           
            
        }
        .top{
            width: 404px;
            overflow: hidden;
        }
        .tip{
            float: left;
        }
        .change{
            float: right;
        }
     
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
   
        <div class="top">
            <div class="tip">相关书籍</div>
            <div class="change">换一换</div>
            </div>
         
     
       
       
       
       

            <ul>
               
           
                   
                    
            </ul>
    
    
      
   

    <script>
        var arrBooks=[
            {'url':'./img/01.png','name':'python','cls':'第一类'},
            {'url':'./img/02.png','name':'pytho2','cls':'第2类'},
            {'url':'./img/03.png','name':'python3','cls':'第3类'},
            {'url':'./img/04.png','name':'python','cls':'第4类'},
            {'url':'./img/05.png','name':'python5','cls':'第5类'}
        ]
        var HTML="";
        $(".change").on("click",function(){
            //将生成的数组保存在变量中
           var _empArr =  createNum(2);
           //遍历数组获取数据
           for (var i=0;i<_empArr.length;i++){
        //    console.log(i);
        //根据索引获取数据
         HTML += '<li>'
            HTML+='<img src="'+arrBooks[_empArr[i]].url+'" alt="">'
            HTML+='<h3><a href="javascript:;">'+arrBooks[_empArr[i]].name+'</a></h3>'
            HTML+=' <p>'+arrBooks[_empArr[i]].cls+'</p>'

           }
          
           $('ul').html(HTML);
           HTML= "";

        }
  )

        
        //定义一个函数生成指定位的随机数
        function createNum(count){
          
            var arrTmp=[]
            for(var i=0;i<count;i++){
                console.log(Math.random());
                var _index = Math.floor(Math.random()*arrBooks.length);
                console.log(arrBooks.length);
                arrTmp.push(_index)


            }
            return arrTmp
        }
    </script>
</body>
</html>