利用pokers文件夹中的图片,用纯JS生成的扑克牌依次排列到页面上

最新推荐文章于 2023-02-28 14:49:04 发布

bearWeb

最新推荐文章于 2023-02-28 14:49:04 发布

阅读量491

点赞数

分类专栏： Web 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_45090657/article/details/121661971

版权

JavaScript DOM操作图片乱序扑克牌前端开发

关键词由CSDN通过智能技术生成

Web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扑克牌</title>
</head>

<body>
    <div id="divcontainer"></div>
    <p>利用pokers文件夹中的图片,用纯JS生成的图片依次排列到页面上，不允许使用样式</p>
    <script>
        var div = document.getElementById("divcontainer");
        for (var i = 1; i <= 13; i++) {
            for (var j = 1; j <= 4; j++) {
                // 创建一个新的元素img
               var img = document.createElement("img");
               img.src = `pokers/${i}-${j}.png`;
            //    appendChild添加子节点
               div.appendChild(img);
               img.style.margin = "30px"
            }
        }
        
    </script>
</body>

</html>

效果图

乱序版：每次刷新，都打乱牌的顺序。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扑克牌</title>
</head>

<body>
    <div id="divcontainer"></div>
    <p>利用pokers文件夹中的图片,用纯JS生成的图片依次排列到页面上，不允许使用样式</p>
    <script>
        var div = document.getElementById("divcontainer");
        var imgs = []; //数组接收
        for (var i = 1; i <= 13; i++) {
            for (var j = 1; j <= 4; j++) {
                imgs.push(createImg(`pokers/${i}-${j}.png`));
            }
        }
        imgs.push(createImg(`pokers/14-1.png`));
        imgs.push(createImg(`pokers/15-1.png`));
        imgs.sort(function () {
            return Math.random() - 0.5;
        });
        // 循环数组，添加图片
        imgs.forEach(function (img) {
            div.appendChild(img);
        });


        //函数：创造图片，把图片路径加进去
        function createImg(src) {
            var img = document.createElement("img");
            img.src = src; //写图片路径
            img.style.margin = "30px";
            return img;
        }
        
    </script>
</body>

</html>