随机出现一张图片

最新推荐文章于 2021-06-03 07:03:59 发布

var_

最新推荐文章于 2021-06-03 07:03:59 发布

阅读量2.2k

点赞数 2

文章标签： Ajax json

本文链接：https://blog.csdn.net/HANGTOK/article/details/89343448

版权

先把json里的内容放到定义好的一个空数组里面，然后弄一个随机数当数组的下标，当点击按钮时把数组里随机的图片的路径赋给提前设置好的图片。

效果图

JSON

{
    "status": "0",
    "message": "success",
    "data": {
        "title": "请认真对待考试,随机选取其中一张图片",
        "content": [
            {
                "id": "001",
                "name":"第一张图片",
                "src":"img/11.jpg"
            },
            {
                "id": "002",
                "name":"第二张图片",
                "src":"img/22.jpg"
            },
            {
                "id": "003",
                "name":"第三张图片",
                "src":"img/33.jpg"
            },
            {
                "id": "004",
                "name":"第四张图片",
                "src":"img/44.jpg"
            },
            {
                "id": "005",
                "name":"第五张图片",
                "src":"img/55.jpg"
            }
        ]
    }
}

代码片段

HTML部分

<body>
    <img src="" alt="" id="img"/>                      //定义一个空路径的img
    <button id="btn">点击按钮</button>
</body>

JS部分

<script type="text/javascript" src="ajax.js"></script> //外部引入封装好的ajax封装函数
<script type="text/javascript">
    var arr=[];                                        //声明一个空数组，用来存放之后需要用的数组 
    function num(n,m){                                 //封装n~m之间的随机数
        return Math.round(Math.random()*(m-n)+n);
    }                                                 
    ajax({                                         
        "url":"success.json",                           //路径引入json文件
        "method":"get",                                 //方法为得到，"GET"在键值对中可以不用大写
        "success":function(response){                   //成功之后会有一个函数
            var data=JSON.parse(response);              //JSON.parse转换为JSON对象
            arr=data.data.content;                      //把需要的数组放到之前定义的空数组中
            btn.function(){                     //给按钮增加单击事件
            title.innerHTML=arr[num(0,arr.length-1)].name; //调用n~m的随机数函数，找到需要内容对应的位置
            img.src=arr[num(0,arr.length-1)].src;        //调用随机数，让图片随机出现
            }
        }
 
    })
</script>

注：
num(0,arr.length)=num(n,m)
arr[num(0,arr.length-1)]=arr[随机下标]

var_

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
随机出现一张图片

先把json里的内容放到定义好的一个空数组里面，然后弄一个随机数当数组的下标，当点击按钮时把数组里随机的图片的路径赋给提前设置好的图片。效果图JSON{ "status": "0", "message": "success", "data": { "title": "请认真对待考试,随机选取其中一张图片", "content": [...
复制链接

扫一扫