☰

picture_collector

Collect pictures of paginated structure picture website

  1. // ==UserScript==
  2. // @name         picture_collector
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0.5
  5. // @description  Collect pictures of paginated structure picture website
  6. // @author       petitepluie
  7. // @match        http://pic.netbian.com/*
  8. // @match        http://www.gaoimg.com/*
  9. // @match        *://desk.zol.com.cn/*
  10. // @match        https://588ku.com/*
  11. // @match        https://www.pixivacg.com/*
  12. // @match        https://www.10wallpaper.com/*
  13. // @match        http://www.netbian.com/*
  14. // @grant        none
  15. // @license      MIT
  16. // ==/UserScript==
  17.  
  18.  
  19. (function(){
  20.     //获取本页地址
  21.     var selfUrl=window.location.href;
  22.     
  23.     //添加界面css
  24.     var mystyle=document.createElement("style");
  25.     mystyle.innerHTML=`#popUpBox {
  26.             position:fixed;
  27.             top:0;
  28.             right:-618px;
  29.             z-index:10000;
  30.             width:650px;
  31.             height:20px;
  32.             overflow-y:scroll;
  33.             border:1px solid blue;
  34.             background:#fff;
  35.         }
  36.         #boxCont {
  37.             display:none;
  38.         }
  39.         #showAllConfig {
  40.             width:100%;
  41.         }
  42.         #boxTitle {
  43.             width:100%;
  44.             height:22px;
  45.             color:#fff;
  46.             background:#0451ad;
  47.         }
  48.         #show_hid {
  49.             width:32px;
  50.             height:18px;
  51.             line-height:15px;
  52.             color:#0451ad;
  53.             font-size:15px;
  54.             font-weight:bold;
  55.         }
  56.         #baseOptionPlace {
  57.             width:100%;
  58.             height:50px;
  59.         }
  60.         #baseOptionCont {
  61.             float:left;
  62.             width:90%;
  63.             height:100%;
  64.         }
  65.         #baseOptionCont span {
  66.             font-size:12px;
  67.         }
  68.         #baseOptionCont input {
  69.             height:10px;
  70.         }
  71.         .baseOption {
  72.             width:100%;
  73.             height:50%;
  74.         }
  75.         .reqLinkTitle {
  76.             float:left;
  77.             width:15%;
  78.             height:100%;
  79.             text-indent:5px;
  80.             background:#c5dcfb;
  81.         }
  82.         .reqLinkCont {
  83.             float:left;
  84.             width:85%;
  85.             height:100%;
  86.         }
  87.         #baseOptionTitle {
  88.             float:right;
  89.             width:10%;
  90.             height:100%;
  91.             
  92.             background:#438dec;
  93.         }
  94.         #boxOptionPlace {
  95.             width:100%;
  96.         }
  97.         .boxOption {
  98.             width:100%;
  99.             height:100px;
  100.             margin-top:6px;
  101.             border-top:2px solid blue;
  102.             border-bottom:2px solid blue;
  103.         }
  104.         .boxOptionCont {
  105.             float:left;
  106.             width:90%;
  107.             height:100%;
  108.         }
  109.         .options {
  110.             width:100%;
  111.             height:33%;
  112.             border-bottom:0.5px solid blue;
  113.         }
  114.         .optionsTitle {
  115.             float:left;
  116.             width:15%;
  117.             height:100%;
  118.             line-height:30px;
  119.             text-indent:5px;
  120.             background:#c5dcfb;
  121.         }
  122.         .optionsCont {
  123.             float:right;
  124.             width:85%;
  125.             height:100%;
  126.         }
  127.         .options span {
  128.             font-size:12px;
  129.         }
  130.         .options input {
  131.             height:10px;
  132.         }
  133.         .optionsContCube {
  134.             float:left;
  135.             width:50%;
  136.             height:100%;
  137.         }
  138.         .optionsContName {
  139.             width:100%;
  140.             height:40%;
  141.             line-height:10px;
  142.             text-align:center;
  143.             border-left:2px solid #fff;
  144.             background:#deebf3;
  145.         }
  146.         .optionsContInput {
  147.             width:100%;
  148.             height:60%;
  149.             line-height:15px;
  150.         }
  151.         .inputName {
  152.             width:28%;
  153.         }
  154.         .inputNumb {
  155.             width:12%;
  156.         }
  157.         .inputLink {
  158.             width:56%;
  159.         }
  160.         .boxOptionTitle {
  161.             float:right;
  162.             width:10%;
  163.             height:100%;
  164.             background:#438dec;
  165.         }
  166.         .boxOptionTitle span {
  167.             font-size:18px;
  168.             color:#fff;
  169.         }
  170.         #dealOptionPlace {
  171.             width:100%;
  172.             height:36px;
  173.         }
  174.         .dealBtn {
  175.             float:left;
  176.             width:14%;
  177.             height:25px;
  178.             line-height:25px;
  179.             margin:5px 10px;
  180.             font-size:12px;
  181.             text-align:center;
  182.             border-radius:3px;
  183.             background:rgba(0,0,0,0.5);
  184.             transition:all 0.1s linear;
  185.             cursor: pointer;
  186.         }
  187.         #start {
  188.             background:#438dec;
  189.             color:#fff;
  190.         }
  191.         #add {
  192.             background:#c9defb;
  193.         }
  194.         #redu {
  195.             background:#c9defb;
  196.         }
  197.         #add:hover {
  198.             background:#438dec;
  199.             color:#fff;
  200.         }
  201.         #redu:hover {
  202.             background:#438dec;
  203.             color:#fff;
  204.         }
  205.         #showCollectState {
  206.             width:100%;
  207.             height:40px;
  208.             border-top:1px solid blue;
  209.         }
  210.         #sCsTitle {
  211.             float:left;
  212.             width:13%;
  213.             height:100%;
  214.             line-height:40px;
  215.             font-size:14px;
  216.             font-weight:bold;
  217.             text-align:center;
  218.             color:#0451ad;
  219.         }
  220.         #sCsCont {
  221.             float:left;
  222.             width:87%;
  223.             height:100%;
  224.             line-height:40px;
  225.         }
  226.         #showAllPicture {
  227.             width:100%;
  228.             height:490px;
  229.             background:#438dec;
  230.             overflow-y:scroll;
  231.         }
  232.         .cubeBox {
  233.             float:left;
  234.             width:85px;
  235.             height:50px;
  236.             margin:1px;
  237.             background:rgba(0,0,0,0.5);
  238.             overflow:hidden;
  239.         }
  240.         .cubeBox img {
  241.             width:100%;
  242.         }`;
  243.     document.head.append(mystyle);
  244.     
  245.     //创建界面html
  246.     var interFace=document.createElement('div');
  247.     interFace.id='popUpBox';
  248.     interFace.innerHTML=`
  249.         <div id="boxTitle">
  250.             <button id="show_hid">&lt;&lt;</button>
  251.             <span>图片采集器（v.1.0.5）</span>
  252.         </div>
  253.         <div id="boxCont">
  254.             <div id="showAllConfig">
  255.                 <div id="baseOptionPlace">
  256.                     <div id="baseOptionCont">
  257.                         <div class="baseOption">
  258.                             <div class="reqLinkTitle"><span>分页链接拆分</span></div>
  259.                             <div class="reqLinkCont">
  260.                                 <span>索引前：</span><input class="inputLink" type="text">
  261.                                 <span>索引后：</span><input class="inputNumb" type="text">
  262.                             </div>
  263.                         </div>
  264.                         <div class="baseOption">
  265.                             <div class="reqLinkTitle"><span>采集分页范围</span></div>
  266.                             <div class="reqLinkCont">
  267.                                 <span>开始索引：</span><input class="inputNumb" type="number" min="2">
  268.                                 <span>结束索引：</span><input class="inputNumb" type="number" min="2">
  269.                             </div>
  270.                         </div>
  271.                     </div>
  272.                     <div id="baseOptionTitle">基础信息配置</div>
  273.                 </div>
  274.                 <div id="boxOptionPlace"></div>
  275.                 <div id="dealOptionPlace">
  276.                     <div id="start" class="dealBtn">开始采集</div>
  277.                     <div id="add" class="dealBtn">选择器+</div>
  278.                     <div id="redu" class="dealBtn">选择器-</div>
  279.                 </div>
  280.             </div>
  281.             <div id="showCollectState">
  282.                 <div id="sCsTitle">采集状态：</div>
  283.                 <div id="sCsCont">null</div>
  284.             </div>
  285.             <div id="showAllPicture">
  286.                 <div class="cubeBox"></div>
  287.                 <div class="cubeBox"></div>
  288.                 <div class="cubeBox"></div>
  289.                 <div class="cubeBox"></div>
  290.                 <div class="cubeBox"></div>
  291.                 <div class="cubeBox"></div>
  292.                 <div class="cubeBox"></div>
  293.             </div>
  294.         </div>`;
  295.     document.body.append(interFace);
  296.     
  297.     //添加界面逻辑
  298.     var popUpBox=document.getElementById("popUpBox");
  299.     var boxCont=document.getElementById("boxCont");
  300.     var show_hid=document.getElementById("show_hid");
  301.     var display=false;
  302.     show_hid.onclick=function(){
  303.         if(display){
  304.             startMove(popUpBox,{
  305.                 "height":20,
  306.                 "right":-618
  307.             },function(){
  308.                 display=false;
  309.                 show_hid.innerHTML="&lt;&lt;";
  310.             })
  311.         } else {
  312.             boxCont.style.display="block";
  313.             startMove(popUpBox,{
  314.                 "height":750,
  315.                 "right":0
  316.             },function(){
  317.                 display=true;
  318.                 show_hid.innerHTML="&gt;&gt;";
  319.             })
  320.         }
  321.     }
  322.     
  323.     var boxOptionPlace=document.getElementById('boxOptionPlace');
  324.     boxOptionPlace.n=0;
  325.     var boxOption=document.getElementsByClassName("boxOption");
  326.     var add=document.getElementById("add");
  327.     var redu=document.getElementById("redu");
  328.     add.onclick=function(){
  329.         var boxOptionTemp=document.createElement('div');
  330.         boxOptionTemp.className='boxOption';
  331.         boxOptionTemp.innerHTML=`
  332.         <div class="boxOptionCont">
  333.             <div class="options">
  334.                 <div class="optionsTitle"><span>父级节点</span></div>
  335.                 <div class="optionsCont parent">
  336.                     <div class="optionsContCube">
  337.                         <div class="optionsContName"><span>id</span></div>
  338.                         <div class="optionsContInput">
  339.                             <span>名称：</span><input class="inputName" type="text">
  340.                         </div>
  341.                     </div>
  342.                     <div class="optionsContCube">
  343.                         <div class="optionsContName"><span>class</span></div>
  344.                         <div class="optionsContInput">
  345.                             <span>名称：</span><input class="inputName" type="text">
  346.                             <span>索引：</span><input class="inputNumb" type="number" min="0">
  347.                         </div>
  348.                     </div>
  349.                 </div>
  350.             </div>
  351.          
  352.             <div class="options">
  353.                 <div class="optionsTitle"><span>子级节点集</span></div>
  354.                 <div class="optionsCont children">
  355.                     <div class="optionsContCube">
  356.                         <div class="optionsContName"><span>tag</span></div>
  357.                         <div class="optionsContInput">
  358.                             <span>名称：</span><input class="inputName" type="text">
  359.                         </div>
  360.                     </div>
  361.                     <div class="optionsContCube">
  362.                         <div class="optionsContName"><span>class</span></div>
  363.                         <div class="optionsContInput">
  364.                             <span>名称：</span><input class="inputName" type="text">
  365.                         </div>
  366.                     </div>
  367.                 </div>
  368.             </div>
  369.          
  370.             <div class="options">
  371.                 <div class="optionsTitle"><span>目标元素位置</span></div>
  372.                 <div class="optionsCont flower">
  373.                     <div class="optionsContCube">
  374.                         <div class="optionsContName"><span>tag</span></div>
  375.                         <div class="optionsContInput">
  376.                             <span>名称：</span><input class="inputNumb" type="text">
  377.                             <span>索引：</span><input class="inputNumb" type="number" min="0">
  378.                             <span>属性：</span><input class="inputNumb" type="text" min="0">
  379.                         </div>
  380.                     </div>
  381.                     <div class="optionsContCube">
  382.                         <div class="optionsContName"><span>class</span></div>
  383.                         <div class="optionsContInput">
  384.                             <span>名称：</span><input class="inputNumb" type="text">
  385.                             <span>索引：</span><input class="inputNumb" type="number" min="0">
  386.                             <span>属性：</span><input class="inputNumb" type="text" min="0">
  387.                         </div>
  388.                     </div>
  389.                 </div>
  390.             </div>
  391.         </div>
  392.         <div class="boxOptionTitle"><span>${++boxOptionPlace.n}级</span>页面元素选择器</div>`;
  393.         boxOptionPlace.appendChild(boxOptionTemp);
  394.         
  395.     }
  396.         
  397.     redu.onclick=function(){
  398.         if(boxOptionPlace.n==0) return;
  399.         boxOptionPlace.removeChild(boxOption[--boxOptionPlace.n]);
  400.     }
  401.     add.click();
  402.         
  403.     /**
  404.      * 输入数据处理
  405.      */
  406.     //基础数据获取
  407.     var baseOptionCont=document.getElementById('baseOptionCont');
  408.     var baseOptionData=baseOptionCont.getElementsByTagName('input');
  409.     var arrUrlFirst=[];
  410.     
  411.     var start=document.getElementById('start');
  412.     //父级选择器获取
  413.     var parent=document.getElementsByClassName('parent');
  414.     //子级选择器获取
  415.     var children=document.getElementsByClassName('children');
  416.     //flower选择器获取
  417.     var flower=document.getElementsByClassName('flower');
  418.     
  419.     //存放临时选择器数据的容器
  420.     var arrPCFselect=[[],[],[]];
  421.     
  422.     //存放最终选择器数据的容器
  423.     var arrSelector=[];
  424.     
  425.     //显示提示的容器
  426.     var sCsCont=document.getElementById('sCsCont');
  427.     
  428.     start.onclick=function(){
  429.         arrUrlFirst=[];
  430.         if(baseOptionData[0].value!=''&&baseOptionData[1].value!=''&&baseOptionData[2].value!=''&&baseOptionData[3].value!=''){
  431.             if(parseInt(baseOptionData[2].value)>parseInt(baseOptionData[3].value)){
  432.                 sCsCont.innerHTML='<span style="color:red">开始索引勿大于结束索引！</span>';
  433.                 return;
  434.             }
  435.             for(let i=parseInt(baseOptionData[2].value);i<=parseInt(baseOptionData[3].value);i++){
  436.                 arrUrlFirst.push(baseOptionData[0].value+i+baseOptionData[1].value);
  437.             }
  438.         } else {
  439.             sCsCont.innerHTML='<span style="color:red">基础数据需填写完全，请检查！</span>';
  440.             return;
  441.         }
  442.         
  443.         //清空容器
  444.         arrPCFselect=[[],[],[]];
  445.         arrSelector=[];
  446.         
  447.         //存放临时选择器数据
  448.         for(let i=0;i<boxOptionPlace.n;i++){
  449.             //父级选择器
  450.             var prtInput=parent[i].getElementsByTagName('input');
  451.             if(prtInput[0].value!=''){
  452.                 arrPCFselect[0].push('id___'+prtInput[0].value);
  453.             } else if(prtInput[1].value!=''&&prtInput[2].value!='') {
  454.                 arrPCFselect[0].push('class___'+prtInput[1].value+'___'+prtInput[2].value);
  455.             } else {
  456.                 sCsCont.innerHTML='<span style="color:red">'+(i+1)+'级页面的父级节点选择器配置不能为空，请检查！</span>';
  457.                 return;
  458.             }
  459.             
  460.             //子级选择器
  461.             var cldInput=children[i].getElementsByTagName('input');
  462.             if(cldInput[0].value!=''){
  463.                 arrPCFselect[1].push('tag___'+cldInput[0].value);
  464.             } else if(cldInput[1].value!='') {
  465.                 arrPCFselect[1].push('class___'+cldInput[1].value);
  466.             } else {
  467.                 sCsCont.innerHTML='<span style="color:red">'+(i+1)+'级页面的子级节点集选择器配置不能为空，请检查！</span>';
  468.                 return;
  469.             }
  470.             
  471.             //flower选择器
  472.             var flrInput=flower[i].getElementsByTagName('input');
  473.             if(flrInput[0].value!=''&&flrInput[1].value!=''&&flrInput[2].value!=''){
  474.                 arrPCFselect[2].push('tag___'+flrInput[0].value+'___'+flrInput[1].value+'___'+flrInput[2].value);
  475.             } else if(flrInput[3].value!=''&&flrInput[4].value!=''&&flrInput[5].value!='') {
  476.                 arrPCFselect[2].push('class___'+flrInput[3].value+'___'+flrInput[4].value+'___'+flrInput[5].value);
  477.             } else {
  478.                 sCsCont.innerHTML='<span style="color:red">'+(i+1)+'级页面的目标元素选择器配置不能为空，请检查！</span>';
  479.                 return;
  480.             }
  481.             
  482.         }
  483.         //console.log("临时选择器数据如下：");
  484.         //console.log(JSON.stringify(arrPCFselect));
  485.         
  486.         //获取最终选择器数据
  487.         for(let i=0;i<boxOptionPlace.n;i++){
  488.             var timerObj={
  489.                 parent:`${arrPCFselect[0][i]}`,
  490.                 children:`${arrPCFselect[1][i]}`,
  491.                 flower:`${arrPCFselect[2][i]}`
  492.             }
  493.             arrSelector.push(timerObj);
  494.         }
  495.         
  496.         console.log("基础配置数据如下：");
  497.         console.log(arrUrlFirst);
  498.         console.log("最终选择器结果如下：");
  499.         console.log(arrSelector);
  500.         
  501.         
  502.         //清空待请求队列
  503.         watingRequest=[];
  504.         //设置清秋层级
  505.         intDiving=arrSelector.length;
  506.         //放入待请求队列集合
  507.         watingRequest.push(arrUrlFirst);
  508.         //记录队列长度
  509.         watingLength.push(arrUrlFirst.length);
  510.         
  511.         console.log("队列结果如下：");
  512.         console.log(watingRequest);
  513.         
  514.         if("当前没有其他采集任务"){
  515.             console.log("执行采集任务");
  516.             sCsCont.innerHTML='<span style="color:purple">采集中,请稍等...</span>';
  517.             //开启采集程序
  518.             spider();
  519.         }
  520.     }
  521.     
  522.     /*******************采集核心代码**************************/
  523.     //存放各级待请求队列集合
  524.     var watingRequest=[];
  525.     
  526.     var watingLength=[];
  527.     
  528.     var intDiving=0;
  529.     
  530.     var j=0;
  531.     
  532.     var finalResult=[];
  533.     
  534.     function spider(){
  535.         ajax({
  536.             url:watingRequest[j][0],
  537.             type:"GET",
  538.             sync:true,
  539.             responseType:"document",
  540.             success:function(xhr){
  541.                 var _document=xhr.responseXML.documentElement;
  542.                 var nowSelector=arrSelector[j];
  543.                 var parent=null;
  544.                 var children=null;
  545.                 var flower=null;
  546.  
  547.                 var ArrUrl=[];
  548.                 var parentMegs=nowSelector.parent.split("___");
  549.  
  550.                 switch(parentMegs[0]){
  551.                     case "id":parent=_document.getElementById(parentMegs[1]);break;
  552.                     case "class":parent=_document.getElementsByClassName(parentMegs[1])[parentMegs[2]];break;
  553.                     default: alert("parent空缺！");
  554.                 }
  555.                 
  556.                 var childrenMegs=nowSelector.children.split("___");
  557.                 switch(childrenMegs[0]){
  558.                     case "class":children=parent.getElementsByClassName(childrenMegs[1]);break;
  559.                     case "tag":children=parent.getElementsByTagName(childrenMegs[1]);break;
  560.                     default: alert("children空缺！");
  561.                 }
  562.                 
  563.                 var flowerMegs=nowSelector.flower.split("___");
  564.                 switch(flowerMegs[0]){
  565.                     case "class":getArrUrlByClass();break;
  566.                     case "tag":getArrUrlByTag();break;
  567.                     default: alert("flower空缺！");
  568.                 }
  569.                 
  570.                 function getArrUrlByClass(){
  571.                     for(let i=0;i<children.length;i++){
  572.                         flower=children[i].getElementsByClassName(flowerMegs[1])[flowerMegs[2]];
  573.                         var url=flower.getAttribute(flowerMegs[3]);
  574.                         if(url!=null){
  575.                             ArrUrl.push(url);
  576.                         }
  577.                     }
  578.                 }
  579.                 
  580.                 function getArrUrlByTag(){
  581.                     for(let i=0;i<children.length;i++){
  582.                         flower=children[i].getElementsByTagName(flowerMegs[1])[flowerMegs[2]];
  583.                         var url=flower.getAttribute(flowerMegs[3]);
  584.                         if(url!=null){
  585.                             ArrUrl.push(url);
  586.                         }
  587.                     }
  588.                 }
  589.                 
  590.                 if(ArrUrl.length==0){
  591.                     alert("队列为空！");   
  592.                     console.log(xhr);
  593.                     console.log(_document);
  594.                     console.log(arrSelector[j]);
  595.                     console.log(ArrUrl);
  596.                 } else {
  597.                     //console.log("成功获取队列！");
  598.                     //console.log(_document);
  599.                     //console.log(arrSelector[j]);
  600.                     //console.log(ArrUrl);
  601.                 }
  602.                 
  603.                 watingRequest[j].shift();
  604.                 
  605.                 if((j+1)==intDiving){
  606.                     var strName="_";
  607.                     for(let i=0;i<=j;i++){
  608.                         strName += (watingLength[i]-watingRequest[i].length)+"_";
  609.                     }
  610.                     
  611.                     /**
  612.                      * 获取到图片链接
  613.                      */
  614.                     //1.直接下载
  615.                     /*
  616.                     for(var i=0;i<ArrUrl.length;i++){
  617.                         var imgName=strName+(i+1)+".jpg";
  618.                         var imgUrl=ArrUrl[i];
  619.                         //downloadPicture(imgName,imgUrl);
  620.                         console.log("下载了: "+strName+(i+1)+".jpg"+" :"+ArrUrl[i]);  //后缀动态生成
  621.                     }
  622.                     */
  623.                     
  624.                     //2.添加到最终下载集合（推荐）
  625.                     /*
  626.                     for(var i=0;i<ArrUrl.length;i++){
  627.                         finalResult.push(ArrUrl[i]);
  628.                     }
  629.                     */
  630.                     
  631.                     //3.添加到页面显示 showAllPicture
  632.                     for(let i=0;i<ArrUrl.length;i++){
  633.                         var imgName=strName+(i+1)+".jpg";
  634.                         var imgUrl=ArrUrl[i];
  635.                         var elem=document.createElement('div');
  636.                         elem.className='cubeBox';
  637.                         elem.innerHTML=`<img src="${imgUrl}" title="${imgName}">`;
  638.                         showAllPicture.appendChild(elem);
  639.                     }
  640.                     
  641.                     if(watingRequest[j].length!=0){
  642.                         spider();
  643.                     } else {
  644.                         
  645.                         console.log("判断是否完成前的j和队列:");
  646.                         console.log(j);
  647.                         console.log(JSON.stringify(watingRequest));
  648.                         
  649.                         //判断是否完成
  650.                         function isEnd(){
  651.                             for(var i=j;i>=0;i--){
  652.                                 if(watingRequest[i].length!=0){
  653.                                     j=i;
  654.                                     return false;
  655.                                 } else {
  656.                                     watingRequest.pop();
  657.                                 }
  658.                             }
  659.                             return true;
  660.                         }
  661.                         var end=isEnd();
  662.                         
  663.                         console.log("判断是否完成后的j和队列:");
  664.                         console.log(j);
  665.                         console.log(JSON.stringify(watingRequest));
  666.                         
  667.                         if(end){
  668.                             console.log("程序结束，任务队列如下");
  669.                             var allImgLoaded=checkImgLoaded();
  670.                             var startCheckTime=Date.now();
  671.                             var timer=setInterval(function(){
  672.                                 if(allImgLoaded){
  673.                                     clearInterval(timer);
  674.                                     console.log('图片加载完，改变页面形态');
  675.  
  676.                                     var showAllConfig=document.getElementById('showAllConfig');
  677.                                     
  678.                                     boxCont.removeChild(showAllConfig);
  679.                                     
  680.                                     while(mystyle.previousElementSibling){
  681.                                         document.head.removeChild(document.head.firstChild);
  682.                                     }
  683.                                     var title=document.createElement('title');
  684.                                     title.innerHTML='采集图片——文件夹';
  685.                                     document.head.appendChild(title);
  686.                                     
  687.                                     while(popUpBox.previousElementSibling){
  688.                                         document.body.removeChild(document.body.firstChild);
  689.                                     }
  690.                                     
  691.                                     sCsCont.innerHTML='<span style="color:green">完成，请按组合键"Ctrl+S"选择一个位置保存采集的图片</span>&nbsp;&nbsp;&nbsp;&nbsp;'+
  692.                                         `<a href="${selfUrl}" alt="返回">否则返回</a>`;
  693.                                 } else {
  694.                                     if(Date.now()-startCheckTime>10000){
  695.                                         sCsCont.innerHTML='<span style="color:yellowgreen">图片大部分加载完...可以按组合键"Ctrl+S"选择一个位置保存采集的图片</span>';
  696.                                         allImgLoaded='true';
  697.                                     }
  698.                                     sCsCont.innerHTML='<span style="color:red">图片还未加载完,请稍等...</span>';
  699.                                 }
  700.                             },200);
  701.                             return;
  702.                         } else {
  703.                             spider();
  704.                         }
  705.                     }
  706.                 } else {
  707.                     watingRequest.push(ArrUrl);
  708.                     watingLength.push(ArrUrl.length);
  709.                     j++;
  710.                     spider();
  711.                 }
  712.             },
  713.             error:function(xhr){
  714.                 alert(xhr.status+":ajax请求"+this.url+"失败！");
  715.                 console.log(xhr);
  716.             }
  717.         })
  718.     }
  719.     
  720.     //ajax工具函数
  721.     function ajax(obj){
  722.         var xhr=null;
  723.         if(window.XMLHttpRequest){
  724.             xhr=new window.XMLHttpRequest();
  725.         } else {
  726.             xhr=new ActiveXObject("Microsoft.XMLHTTP");
  727.         }
  728.         xhr.responseType=obj.responseType;
  729.         xhr.onreadystatechange=function(){
  730.             if (xhr.readyState!=4) return;
  731.             if(xhr.status==200){
  732.                 obj.success(xhr);
  733.             } else {
  734.                 obj.error(xhr);
  735.             }
  736.         }
  737.         xhr.open(obj.type,obj.url,obj.sync);
  738.         xhr.send();
  739.     }
  740.     
  741.     
  742.     //工具函数4 下载图片(待完善)
  743.     function downloadPicture(imgName,imgUrl){
  744.         //return new Promise(function(resolve,reject){
  745.             var anchor=document.createElement("A");
  746.             anchor.href=imgUrl;
  747.             anchor.download=imgName;
  748.             anchor.target="_blank";
  749.             document.body.appendChild(anchor);
  750.             anchor.click();
  751.             //给单个图片下载任务分配0.5s
  752.         //    setTimeout(function(){
  753.         //        resolve();
  754.         //    },500)
  755.         //})
  756.     }
  757.     
  758.     
  759.     //动画工具函数
  760.     function startMove(obj,json,fn){
  761.         clearInterval(obj.timer);
  762.         obj.timer=setInterval(function(){
  763.             var now='';
  764.             var onStop=true;
  765.             for(var attr in json){
  766.                 if(attr=='opacity'){
  767.                     now=parseInt(parseFloat(getStyle(obj,attr))*100);
  768.                 } else {
  769.                     now=parseInt(getStyle(obj,attr));
  770.                 }
  771.                 var speed=(json[attr]-now)/5; 
  772.                 speed=speed>0?Math.ceil(speed):Math.floor(speed);
  773.                 if(now!=json[attr]){
  774.                     onStop=false;
  775.                 }
  776.                 if(attr=='opacity'){
  777.                     obj.style[attr]=(now+speed)/100;
  778.                 } else {
  779.                     obj.style[attr]=now+speed+'px';
  780.                 }
  781.             }
  782.             if(onStop){
  783.                 clearInterval(obj.timer);
  784.                 if(fn){
  785.                     fn();
  786.                 }
  787.             }
  788.         },50);
  789.     }
  790.     function getStyle(obj,attr){
  791.         if(obj.currentStyle){
  792.             return obj.currentStyle(attr);
  793.         } else {
  794.             return getComputedStyle(obj,false)[attr];
  795.         }
  796.     }
  797.     
  798.     var showAllPicture=document.getElementById('showAllPicture');
  799.     var allImg=showAllPicture.getElementsByTagName('img');
  800.     //检查所有图片是否加载完全(待优化：不一定是所有图片都加载);
  801.     function checkImgLoaded(){
  802.         for(let i=0;i<allImg.length;i++){
  803.             if(allImg[i].complete==false){
  804.                 return false;
  805.             }
  806.         }
  807.         return true;
  808.     }
  809.     
  810. })()