通过JavaScript实现随机图片

技之树 2021-9-3

1923 0

开头

图片随机显示主要还是for循环和图片地址的拼接，其中我还加入了a标签，添加了一个小小的查看原图的功能。

代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机生成图片</title>
    <style>
    //设置css样式
        a,div{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .d1{
            width: 700px;
            height: 700px;
        }
        img{
            display: block;
            width: 150px;
            height: 150px;
            float:left;
            margin:5px;
        }

    </style>
</head>
<body>
    <!-- 友情提示：开发步骤、结构、样式、js 
        先创建足够的img标签，用来将样式设置好，然后注释掉，通过js生成img
     -->
    <button id="btn">点击生成随机图片</button>

    <div id="div1" class="d1">
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
        <!-- <img src="" alt=""> -->
    </div>
</body>
<script>
    //获取元素
    var div1 = document.getElementById('div1')
    var btn = document.getElementById('btn');
    //生成一个临时容器
    var frag = document.createDocumentFragment();
    oImg(16)
        function oImg(numb){
            //通过for循环向HTML中添加图片标签
            for(var i=0;i<numb;i++){
            let num=Math.round((Math.random()+0.01)*50);//我准备了50张图片，所以乘50
            //生成img标签
            let aImg=document.createElement("img");
            //生成a标签，可以添加图片点击查看原图的效果,也可以不添加，个人随意
            let a=document.createElement("a");
            //使用拼接的方法给生成的img标签插入图片
            aImg.src = "./images/" + num +".jpg";
            //将生成的标签插入到它们的父元素中
            a.appendChild(aImg);
            frag.appendChild(a);
            a.href = aImg.src;
        }
        // frag.setAttribute('width','700px')
        div1.appendChild(frag);
        }
        //给按钮添加刷新功能，可以随机生成新的图片
        btn.onclick = function(){
            window.location.reload() 
    }
</script>
</html>

素材来源：https://www.cnblogs.com/changx/p/10930040.html

最后于 2021-9-3 被技之树编辑，原因：