进一步有进一步惊喜

window.downloadImage = function (url) {
  var timeout = Math.random() * 5000;
  this.setTimeout(function () {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        var blob = this.response;
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = name; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    }
    xhr.send()
  }, timeout);
}

window.insertButtons = function (element) {
  console.log("=== element =======");
  console.log(element);
  console.log("=== end ========== ");
  var button = document.createElement("button");
  button.addEventListener("click", function () {
    console.log(element);
    // 获得该box的9个图片的url
    var urlList = element.firstElementChild.firstElementChild.children;
    for (var i = 0; i < urlList.length; i++) {
      var url = "https:" + urlList[i].firstElementChild.style.backgroundImage.split("url")[1].replace(/[\(\)\"]/g, "").split("@")[0].trim();
      console.log(url);
      // console.log(timeout);
      window.downloadImage(url);
    }
  });
  // button.style.backgroundColor = "#3388ff";
  // button.style.color = "white";
  button.style.borderRadius="10px";
  button.style.height = "35px";
  button.style.backgroundColor="white";
  button.style.opacity= "0.5";
  button.style.borderWidth="thin";
  button.style.position="absolute";
  button.classList.add("downBtn");
  button.innerText = "下载该九宫格的图片";
  element.append(button);
}

window.initImageBox = function(){
  // 先清除按钮
  var allDownBtn = document.getElementsByClassName("downBtn");
  var btnLength = allDownBtn.length;
  for(let i = 0;i < btnLength;i++){
      allDownBtn[0].remove();
  }
  var allImagesBox = document.getElementsByClassName("imagesbox");
  // 每个动态插入下载图片按钮
  console.log("=======allImagesBox======");
  console.log(allImagesBox);
  console.log("=======end============");
  for (var i = 0; i < allImagesBox.length; i++) {
    var element22 = allImagesBox[i];
      console.log("i="+i);
    window.insertButtons(element22);
  }
  console.log("call back initImageBox")
}
function insertFreshButton(){
    var freshButton = document.createElement("button");
    freshButton.style.backgroundColor = "#ABD6E6";
    freshButton.style.position = "fixed";
    freshButton.style.right="60px";
    // var buttonTop = screen.height / 2;
    // freshButton.style.top= buttonTop +"px";
    freshButton.style.bottom="40px";
    freshButton.style.zIndex="99";
    freshButton.style.color = "white";
    freshButton.style.borderWidth="thin";
    freshButton.style.height = "40px";
    freshButton.innerText = "刷新/查看下载按钮";
    freshButton.setAttribute("onclick","initImageBox()");
    document.body.append(freshButton);
}
(function() {
    'use strict';
    // Your code here...
    insertFreshButton()
})();