<!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>
图片百度找的用“fireworks“ 切的,切的不是很平整,做个小test凑活着用吧。
链接是图片素材
链接:https://pan.baidu.com/s/1Drrez7ky4JY-LTL2A78XtQ
提取码:ne5m*