麻烦高手帮忙写一个图片输出js

固始找房网 2018-10-28 08:50:00
1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg 这种带逗号链接的分割图,麻烦大神帮忙写个js代码。分别调用每一个图片。输出表单名是 bus
...全文
241 14 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复

<script>
let str = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg";
let regex = new RegExp("[^,]+[\.](jpg|png|gif)", "ig");
let resultArray = str.match(regex);
</script>


resultArray 里面的每一项就是一个图片的名称 通过循环可以放到你想要放的地方
  • 打赏
  • 举报
回复
注释自动换行了....你自己看看吧
  • 打赏
  • 举报
回复

<ul id="bus"></ul>
<script>
let str = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg";//固定声明
let regex = new RegExp("[^,]+[\.](jpg|png|gif)", "ig");
let resultArray = str.match(regex);//获取到处理结果的数组
let bus = document.getElementById("bus");//找到需要输出的表单元素 也可以通过document.createElement创建一个然后添加到body中
for (let i = 0; i < resultArray.length; i++) {//循环
let url = resultArray[i];//获取到的图片名称
let li = document.createElement("li");//创建li元素
li.innerHTML = "<img src='X" + url + "'>";//填充li元素 X是你图片文件夹的相对或者绝对路径 自己填写
bus.appendChild(li);//将生成的li元素添加到目标元素中
}//ul li样式自己调整
</script>
  • 打赏
  • 举报
回复
<script>
let str = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg";
let regex = new RegExp("[^,]+[\.](jpg|png|gif)", "ig");
let resultArray = str.match(regex);
for (let i = 0; i < resultArray.length; i++) {
console.log(resultArray[i]);
}
</script>
  • 打赏
  • 举报
回复
resultArray是一个数组 ,每一项代表着一个名称 老哥 你得循环获取每一项 每一项就是一个名称 然后你想干嘛就干嘛了
  • 打赏
  • 举报
回复

<ul id="bus"></ul>

<script>
let str = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg";
let regex = new RegExp("[^,]+[\.](jpg|png|gif)", "ig");
let bus = document.getElementById("bus");
let resultArray = str.match(regex);
for (let i = 0; i < resultArray.length; i++) {
let url = resultArray[i];
let li = document.createElement("li");
li.innerHTML = "<img src='" + url + "'>";
bus.appendChild(li);
}

</script>


ul li 不太会用 你自己看着改下吧 img的路径 应该也得要你自己打
固始找房网 2018-10-29
  • 打赏
  • 举报
回复

我这样设置了打开是空白的啊
固始找房网 2018-10-29
  • 打赏
  • 举报
回复
引用 8 楼 風灬雲的回复:
[quote=引用 5 楼 qq_28581243 的回复:]

我这样设置了打开是空白的啊

他这只是给你实现数据处理,还有DOM操作部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="app"></div>

</body>

<script>
let str = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg";
let regex = new RegExp("[^,]+[\.](jpg|png|gif)", "ig");
let resultArray = str.match(regex);
let App=document.querySelector("#app")
resultArray.forEach(e=>{
let Img=document.createElement("img");
Img.src=e;
App.appendChild(Img)
});
</script>
</html>

[/quote] 大神,能不能加上一个带li调用的
固始找房网 2018-10-29
  • 打赏
  • 举报
回复
调用出来的时候能不能加个<li><img src=></li>
就是图片用li分开
  • 打赏
  • 举报
回复
引用 5 楼 qq_28581243 的回复:

我这样设置了打开是空白的啊

这段代码你得到的是一个Array,你得到后要针对其中每一个元素进行操作
風灬雲 2018-10-29
  • 打赏
  • 举报
回复
引用 5 楼 qq_28581243 的回复:

我这样设置了打开是空白的啊

他这只是给你实现数据处理,还有DOM操作部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="app"></div>

</body>

<script>
let str = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg";
let regex = new RegExp("[^,]+[\.](jpg|png|gif)", "ig");
let resultArray = str.match(regex);
let App=document.querySelector("#app")
resultArray.forEach(e=>{
let Img=document.createElement("img");
Img.src=e;
App.appendChild(Img)
});
</script>
</html>

固始找房网 2018-10-28
  • 打赏
  • 举报
回复
引用 2 楼 囧的回复:

"1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg".split(',').forEach(img => console.log(img));
可以写个调用的js吗
2018-10-28
  • 打赏
  • 举报
回复

"1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg".split(',').forEach(img => console.log(img));
固始找房网 2018-10-28
  • 打赏
  • 举报
回复
来个大神帮忙,谢谢

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧