随机获取图片

最新推荐文章于 2024-09-15 08:14:48 发布

吴恒利

最新推荐文章于 2024-09-15 08:14:48 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/a2QWSDN/article/details/89338165

版权

<!DOCTYPE html>
<html lang="en">  
<head>
       <meta charset="UTF-8" />
       <title>Document</title>
</head>
<body>
       <h1 id="title"></h1><div id="names"></div>
       <button id="btn">随机获取图片</button>
       <img src="" alt="" / id="image">
   
</body>
<script type="text/javascript" src="ajax.js"></script>
//引入js
<script type="text/javascript">
       var arr=[ ]; 
       function num(m,n){
              var mathNUN= Math.round(Math.random()*(n-m)+m)
              return mathNUN
       }
       //获取随机数
       ajax({
       "url":"score/success.json",
       //路径
       "method":"get",
       //获得
     
       "success":function(response){
              var data=JSON.parse(response);
              //console.log(data)
              Objectdata: content: Array(5)0: {id: "001", 
              name: "第一张图片", src: "img/11.jpg"}1: {id: "002",
               name: "第二张图片", src: "img/22.jpg"}2: {id: "003", 
               name: "第三张图片", src: "img/33.jpg"}3: {id: "004", 
               name: "第四张图片", src: "img/44.jpg"}4: {id: "005",
                name: "第五张图片", src: "img/55.jpg"}length: 5__proto__: Array(0)
              title: "请认真对待考试,随机选取其中一张图片"__proto__: //

              title.innerHTML=data.data.title;
              arr=data.data.content;
             
              btn.onclick=function(){
                     names.innerHTML=arr[num(0,arr.length-1)].name;
                    //点击事件随机获取内容
                     image.src=arr[num(0,arr.length-1)].src;
                    //获取随机图片
              }
       }

        
        

       })





</script>
</html>