题目：点击页面按钮，调用两个API: api-a, api-b, 每个api返回10张图片，在页面上交叉显示20张图片: api1_img1, api2_img1, api1_img2, api2_img2, …
function load() {
// 实现代码逻辑, 用单页面，不要用vue等框架实现
}
<!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>Test</title>
</head>
<style>
#btn{
text-align: center;
}
</style>
<body>
<div id="btn">
<button onclick="load()">点击在两个api交叉显示图片</button> <hr />
</div>
<div id="photo"></div>
</body>
<script>
function $(id){
return document.getElementById(id);
}
//按钮点击事件
var flag = true;
//var stop = false;
function load(){
if(flag==true){ // if(flag==true && stop==false){
var apiImg = document.createElement("img");
apiImg.src = api_a();
apiImg.width = 50;
apiImg.height = 100;
$("photo").appendChild(apiImg);
flag = false;
console.log(1);
}else{ //else if(flag==false && stop==false){
var apiImg = document.createElement("img");
apiImg.src = api_b();
apiImg.width = 100;
apiImg.height = 50;
$("photo").appendChild(apiImg);
flag = true;
}
// else{
// return;
// }
}
//api-a图片
var numA=0;
function api_a(){
var apiA = [];
for(var i=1; i<=10; i++){
apiA.push("photo/api1_img"+ i +".webp");
}
if(numA<0 || numA>apiA.length-1){
numA = 0; //循环显示
// alert('全部图片已经全部显示');
// stop = true;
}
numA++;
return apiA[numA-1];
}
//api-b图片
var numB = 0;
function api_b(){
var apiB = [];
for(var i=1; i<=10; i++){
apiB.push("photo/api2_img"+ i +".webp");
}
if(numB<0 || numB>apiB.length-1){
numB = 0; //循环显示
// alert('全部图片已经全部显示');
// stop = true;
}
numB++;
return apiB[numB-1];
}
</script>
</html>
问题总结：
遇到的问题：
· 静态数组太长，将数组设置成用for循环添加
· flag，num要设置成全局，不能放在方法里面
不懂的问题：
· 把 appendChild() -> append() 也可以运行。百度了一下他们之间区别：
append()可以同时传入多个节点和字符串，没有返回值
appendChild()只能传一个节点，且不支持传字符串
· 如何将html的图片加入js？百度了以下代码：
var apiImg = document.createElement(“img”);
apiImg.src = api_b();
apiImg.width = 100;
apiImg.height = 50;
$(“photo”).appendChild(apiImg);
暂未解决的问题：
· 若不循环20张图片，到最后一张停止显示，即将三个方法的被注释部分打开，将“循环显示(numA=0/numB=0)”加上注释。
load()方法总会进入if语句但不显示图片，即显示出第21张图片的边框（裂开的图片）
未完成的问题：
*要求：图片要从服务器获取！
appendChild() 是原生dom对象的方法。而 append() 是 jquery 对象的方法。需要引入jquery库才能用
把你请求回来的数据合并成一个数组，然后循环创建元素，最后appendChild
var array=[{url:"aaa"},{url:"bbb"},{url:"ccc"}];
var array2=[{url:"ddd"},{url:"eee"},{url:"fff"}];
var arr=[];
var array3 = array.map(function(v, i) {
arr.push(v,array2[i]);
});
console.log(arr);