$.jQuery随机图

最新推荐文章于 2022-10-29 16:55:09 发布

pursuePeng

最新推荐文章于 2022-10-29 16:55:09 发布

阅读量130

点赞数

本文链接：https://blog.csdn.net/wujinpengjiusan/article/details/89483227

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <h1></h1>
    <button>随机图</button>
    <p></p>
    <img src="" alt="" />
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
//jquery文件  网上下载
<script type="text/javascript">
    var arr = []
    function num(n,m){
        return Math.round(Math.random()*(m-n)+n)
    }
    $.get({
        "url":"success.json",
        //文件内容在下面
        success:function(abc){
            var pop = abc.data.title;
                arr = abc.data.content;
                $("h1").html(pop);
                $("button").click(function(){
                    var arrnum = num(0,arr.length-1)
                    $("img").attr("src",arr[arrnum].src)
                    $("p").html(arr[arrnum].name)
                })
        }
    })
</script>
</html>

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”
}
]
}
}