Hellorf Extend

输入编号(多个编号以英文逗号","分割)

当前为 2022-05-29 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Hellorf Extend
// @namespace    使用图片编号在hellorf获取标题并生成excel表格
// @version      1.02
// @description  输入编号(多个编号以英文逗号","分割)
// @author       Yuzu
// @match        https://*.hellorf.com/*
// @icon      https://tse1-mm.cn.bing.net/th/id/R-C.f732f32bdda55fbe0757bbcd22e2645f?rik=JiXn9hkSYwD0Bw&riu=http%3a%2f%2fwx1.sinaimg.cn%2fbmiddle%2fbf4d90e8gy1ghc7tzufofj207v07d755.jpg
// @grant        none
// @connect      *
// @require      https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.js
// @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
// @license      Ookinayuzu


// ==/UserScript==

//类
class message {
    constructor(number, title) {
        this.number = number;
        this.title = title;
    }
}
window.hasZh= function(str){//判断字符串是否有中文
    for(var i = 0;i < str.length; i++)
    {
        if(str.charCodeAt(i) > 255){ //如果是汉字,则字符串长度加2
            return true;}
        return false;
    }
}

window.get_lastchild = function (n)
{
    var x=n.lastChild;
    while (x.nodeType!=1)
    {
        x=x.previousSibling;
    }
    return x;
}

window.myDisplayer= function() {
    'use strict';
    let num = document.getElementById("number").value;
    document.getElementById("num1").innerHTML = num;
}

window.getURL = function() {
    'use strict';
    let num = document.getElementById("number").value;
    var url = "https://www.hellorf.com/image/show/" + num;
    /*console.log(url);*/
    //myDisplayer(num);
    return url;
}

window.myDisplayer= function() {
    'use strict';
    let num = document.getElementById("number").value;
    document.getElementById("num1").innerHTML = num;
}

window.openFile = function(event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function() {
                if(reader.result) {
                    //显示文件内容
                    console.log(reader.result);
                    var number = document.getElementById("number");
                    number.value = reader.result;
                    //$("#output").html(reader.result);
                }
            };
            reader.readAsText(input.files[0]);
        };

window.newChart = function(){
    // 获取输入的值(即input中的value值)
    //var id = document.getElementById("id").value;
    //console.log("new chart");
    var id=1;
    var num2 = document.getElementById("num1").value;
    //console.log(num2);
    var title2 = document.getElementsByClassName("col3").innerHTML;
    //console.log(title2);

    // 改变原本得到的数据格式为textNode格式
    id = document.createTextNode(id);
    num2 = document.createTextNode(num2);//console.log(num2);
    title2 = document.createTextNode(title2);
    //console.log(title2);

    // 创建tr(创建行)
    var tr = document.createElement("tr");
    // 创建td,并赋于class和值(创建单元格,并输入值)
    var td1 = document.createElement("td");
    td1.className = "col1";
    td1.appendChild(id);
    var td2 = document.createElement("td");
    td2.className = "col2";
    td2.innerText= num2;
    td2.appendChild(num2);
    var td3 = document.createElement("td");
    td3.className = "col3";td3.innerText= col3.innerHTML;
    td3.appendChild(title2);

    // 创建input,并设置按键反应(编辑、删除 按钮)


    // 获取table1
    var table = document.getElementById("table1");
    // 将tr加入table中
    table.appendChild(tr);
    // 将td依次加入tr中
    tr.appendChild(td1);
    // tr.appendChild(idTd);
    tr.appendChild(td2);
    tr.appendChild(td3);

}


//css
var mainDiv ='<style type="text/css"> html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 10px; } ';
mainDiv += 'table { border-collapse: collapse; border-spacing: 0; margin:15px;width:90%;font-size:13px} .tableTitle{background-color:lightskyblue;font-weight: bold;} td, th { padding: 0; } .pure-table { border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 1px solid #cbcbcb; } .pure-table caption { color: #000; font: italic 85%/1 arial, sans-serif; padding: 1em 0; text-align: center; } .pure-table td, .pure-table th { border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; padding: 0.5em 1em; }';
mainDiv+=' .pure-table thead { background-color: #e0e0e0; color: #000; text-align: left; vertical-align: bottom; } .pure-table-bordered td { border-bottom: 1px solid #cbcbcb; } .pure-table-bordered tbody > tr:last-child > td { border-bottom-width: 0; }';
mainDiv += ' #col1{ font-weight: bold;} input#clip{margin : 15px;}input#btnClose { float: right; margin: 10px; padding: 3px 6px; }div#inputPlac2 { margin: 15px; width: 100%; align-items: center; } input#number {overflow:scroll;width: 80%;margin:10px} #keywords{margin: 10px 10px 10px 10px;width: 76%;}div#inputPlac{margin: 15px;width: 100%;align-items: center;} #main1 {overflow-x:auto;overflow-y:auto;right:10%;box-shadow: 1px 1px 20px #000000; z-index: 99999; text-align: left; border: 3px solid green; margin: 0px auto; width: 80%; height: 80%; position: fixed; top: 100px; background-color: white; align-items: center; justify-content: center; } ';
mainDiv += '.markdown-body .highlight pre, .markdown-body pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: var(--color-canvas-subtle); border-radius: 6px; } * { box-sizing: border-box; } .btn { position: relative; display: inline-block; padding: 5px 16px; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; user-select: none; border: 1px solid; border-radius: 6px; -webkit-appearance: none; appearance: none; } .ClipboardButton { position: relative; } .btn { color: var(--color-btn-text); background-color: var(--color-btn-bg); border-color: var(--color-btn-border); box-shadow: var(--color-btn-shadow),var(--color-btn-inset-shadow); transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); transition-property: color,background-color,box-shadow,border-color; }';
mainDiv +='</style>';
//mainDiv += '$color-gray: #666; $color-black: #000; $stripe-height: 6px; $btn-color: $color-gray; $btn-background: #fff; $btn-color-hover: #fff; $btn-background-hover: $color-gray; $border-color: $color-gray; $border-color-hover: $color-black; @mixin reset-button { overflow: visible; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; line-height: normal; cursor: pointer; -moz-user-select: text; &:-moz-focus-inner { padding: 0; border: 0; } } @keyframes stripe-slide { 0% { background-position: 0% 0; } 100% { background-position: 100% 0; } } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: sans-serif; } .btn {@include reset-button; z-index:99999;display: block; text-decoration: none; text-transform: uppercase; padding: 16px 36px 22px; background-color: $btn-background; color: $btn-color; border: 2px solid $border-color; border-radius: 6px; margin-bottom: 16px; transition: all 0.5s ease; &--stripe { overflow: hidden; position: relative; &:after { content:""; display: block; height: $stripe-height; width: 100%; background-image: repeating-linear-gradient( 45deg, $border-color, $border-color 1px, ); -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; left: 0; bottom: 0; background-size: $stripe-height $stripe-height; } &:hover { background-color: $btn-background-hover; color: $btn-color-hover; border-color: $border-color-hover; &:after { background-image: repeating-linear-gradient( 45deg, $btn-color-hover, $btn-color-hover 1px, ); } } } }';


//html
mainDiv +='<div id ="main1"><div><input id="btnClose" class = "btn btn--stripe" type="button" value="X" onClick="custom_close()" />';
//输入框
mainDiv +='<div style="border:3px dot grey;margin:10px;height:70%;width:90%;border-style:double;"><div id = "inputPlac" class = "input">  <span>编号:</span> <input type="text" id="number" name="number" > ';
mainDiv +='<p id="p1"><input type="file" id="txtFile" class="fileBtn" accept="text/plain" onchange="openFile(event)" style="display:inline-block"><input type ="button" class ="btn btn--stripe" id ="submit1" value="submit" style="display:inline-block"/></p>';
mainDiv +='</div>';
//输出结果
mainDiv +='</div><button class = "btn btn--stripe" style="margin:10px 10px 0px 15px;display:inline-block;"><a id="toExcel">导出excel</a></button><span id="loading"></span>';


mainDiv +='<table  class="pure-table pure-table-bordered" id="table1" cellspacing="0px" > <tr class="tableTitle" align="center"> <td class="col1">序号</td> <td class="col2">图片编号</td> <td class="col3">标题</td> </tr> </table></div></div></div>';




//console.log("1");//插入div至html
let div=document.createElement("div");
div.innerHTML = mainDiv;
document.body.append(div);



let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.js";
document.documentElement.appendChild(script);
//var Clipboard;
(function(){
    var clipboard = new ClipboardJS('.copy');
    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });})();

window.custom_close = function (){
    'use strict';
    if(confirm("确定要关闭脚本吗?")){
        window.opener=null;
        window.open('','_self');
        //window.close();
        var a = document.getElementById("main1");
        a.remove("div");
    }
    else{
    }
}

let btn = document.getElementById("submit1");

var col3 = document.getElementsByClassName("col3");
btn.onclick = function(){
    //输入框是否是空的
    var num = document.getElementById("number").value; //console.log("num ="+ num);
    if(num.length == 0){
        alert("输入框为空!");
    }else{

        //console.log(3);

        var numArray = num.split(",");//console.log(numArray);
        var i = 0;var url1;var xhr1=[];var urlArray = [];var j=1;
        for(i = 0; i < numArray.length; i++){
            console.log("正在获取第"+i+"个标题的信息");
            var loading = document.getElementById("loading")
            loading.innerHTML = "正在获取第"+i+"个标题的信息";
            var c = numArray[i];
            xhr1[i]= new XMLHttpRequest();
            xhr1[i].onreadystatechange = () => {
                urlArray[i] = "https://www.hellorf.com/image/show/"+ numArray[i]
                var col3 = document.getElementsByClassName("col3");
                //console.log(numArray[i]);
                //numArray[i] = document.getElementById("number").value;
                url1 = "https://www.hellorf.com/image/show/"+ numArray[i];

                //console.log("c1="+numArray[i]);
                //console.log("urlArray="+urlArray[i]);
                if (xhr1[i].readyState !== 4) {
                    return;
                }
                if (xhr1[i].readyState == 4 && xhr1[i].status == 200) {
                    var numIndex = numArray.indexOf(numArray[i]);
                    //url1 = "https://www.hellorf.com/image/show/"+ numArray[numIndex];
                    //console.log("??url1="+url1);

                    //console.log(xhr1[i].response);
                    //console.log(xhr1[i].responseXML);
                    /*this.ResponseXML;*/

                    var demo = xhr1[i].responseXML;
                    var a = 1 ;
                    a = demo.getElementsByTagName("title");

                    var b = a[0].innerHTML;
                    var n = b.replace("站酷海洛_正版图片_视频_字体_音乐素材交易平台_站酷旗下品牌", "");
                    //var n = b.split("_");
                    //console.log(n);

                    if(n.length <= 0){
                        j=j-1;
                        console.log("编号"+numArray[i]+"不正确");

                        //numArray.splice(numArray.indexOf(c[i]),1);
                        //console.log("j="+j+"Numarray = "+numArray);
                        //continue;
                    }
                    else {
                        b.indexOf("_");
                        b = b.slice(0,b.indexOf("_"));//console.log(b);
                        //document.getElementById("num1").innerHTML = numArray[i];

                        //document.getElementById("title1").innerHTML = b;
                        //document.getElementsByClassName("col3").innerHTML = b;
                        //title2 = b;




                        // 获取输入的值(即input中的value值)
                        //var id = document.getElementById("id").value;



                        var id= j;
                        //console.log("j="+j);
                        var num2 = numArray[i];
                        //console.log("num2 = "+num2);
                        var title2 = b;
                        // console.log("num2 = "+ title2);


                        // 改变原本得到的数据格式为textNode格式
                        id = document.createTextNode(id);
                        //id.innerHTML= "${vs1.index+1}";
                        num2 = document.createTextNode(num2);
                        //console.log("c2+"+num2);
                        title2 = document.createTextNode(title2);
                        //console.log(title2);

                        // 创建tr(创建行)
                        var tr = document.createElement("tr");
                        // 创建td,并赋于class和值(创建单元格,并输入值)
                        var td1 = document.createElement("td");
                        td1.className = "col1";
                        td1.appendChild(id);

                        var td2 = document.createElement("td");
                        td2.className = "col2";
                        //td2.innerText= num2;
                        td2.appendChild(num2);

                        var td3 = document.createElement("td");
                        td3.className = "col3";
                        //td3.innerText= col3.innerHTML;
                        var x = col3;var autoId = "autoTitleId" + j;
                        var autoIdTarget = "#"+autoId;

                        td3.setAttribute('id', autoId);
                        td3.appendChild(title2);

                        var copyBtn = document.createElement("input");
                        //copyBtn.setAttribute('id', 'clip');
                        copyBtn.setAttribute('class', 'btn copy btn--stripe"');
                        copyBtn.setAttribute('type', 'button');
                        copyBtn.setAttribute('data-clipboard-action', 'copy');
                        copyBtn.setAttribute('data-clipboard-target', autoIdTarget);
                        copyBtn.setAttribute('value', 'Copy');
                        td3.appendChild(copyBtn);
                        //td3.appendChild(copyBtn);copyBtn.innerHTML='<input id = "clip" class = "btn copy" type = "button" data-clipboard-action="copy" data-clipboard-target=autoIdTarget value = "Copy"/>';

                        // 获取table1
                        var table = document.getElementById("table1");
                        // 将tr加入table中
                        table.appendChild(tr);
                        // 将td依次加入tr中
                        tr.appendChild(td1);
                        // tr.appendChild(idTd);
                        tr.appendChild(td2);
                        tr.appendChild(td3); j++;
                        return b;
                    }

                }else {
                    console.log('request error');
                }

            };

            urlArray[i] = "https://www.hellorf.com/image/show/"+ numArray[i];
            //console.log(url1)
            xhr1[i].open("GET", urlArray[i], false);
            /* 如果已指明,responseType 必须是空字符串或 "document"*/
            //xhr1[i].responseType = "document";

            /* overrideMimeType() 用来强制解析 response 为 XML*/
            xhr1[i].overrideMimeType("text/xml");
            xhr1[i].send();

        } //console.log("跳出循环");

    }

}
// var num = document.getElementById("number").value;

var element = document.getElementById("toExcel");
var toExcel = function(event) {//生成excel文件
    console.log("5");
    // 获得表格数据的html标签和文本d;
    var html = "<html><head><meta charset='UTF-8'></head><body>"+document.getElementById("table1").outerHTML+"</body></html>";
    // 创建一个Blob对象,第一个参数是文件的数据,第二个参数是文件类型属性对象
    var blob = new Blob([html],{type:"application/vnd.ms-excel"});
    var a = event.target;
    // 利用URL的createObjectURL方法为元素a生成blobURL
    a.href = URL.createObjectURL(blob);
    //console.log(a.href);
    a.download = "chart";
    // 设置文件名
}
element.onclick = toExcel;