云养宠物

在网页的右下角挂一个你喜欢的宠物咯
Stel een vraag, plaats een beoordeling of rapporteer dit script.
// ==UserScript==
// @name         云养宠物
// @version      2.0.1
// @description  在网页的右下角挂一个你喜欢的宠物咯
// @match        *
// @include      *
// @exclude      https://juejin.cn/editor/drafts/*
// @run-at       document-end
// @icon         https://img2.baidu.com/it/u=4226010475,2406859093&fm=26&fmt=auto
// @require      https://code.jquery.com/jquery-3.1.1.min.js
// @namespace    http://www.touch-fish.com/bin/1
// @grant        GM.setValue
// @grant        GM.getValue
// ==/UserScript==
{
    let defaultHTML = `<html>
    <head>
        <meta charset="utf-8">
        <title>CSS睡猫</title>
        <style>
            @keyframes tail{6.6666666667%{transform:rotate(0)}10%{transform:rotate(10deg)}16.6666666667%{transform:rotate(-5deg)}20%{transform:rotate(30deg)}26.6666666667%{transform:rotate(-2deg)}46.6666666667%{transform:rotate(10deg)}53.3333333333%{transform:rotate(-5deg)}56.6666666667%{transform:rotate(10deg)}}
            @keyframes body{6.6666666667%{transform:scaleY(1)}10%{transform:scaleY(1.15)}16.6666666667%{transform:scaleY(1)}20%{transform:scaleY(1.25)}26.6666666667%{transform:scaleY(1)}46.6666666667%{transform:scaleY(1.15)}53.3333333333%{transform:scaleY(1)}56.6666666667%{transform:scaleY(1.15)}}
            @keyframes left-whisker{6.6666666667%{transform:rotate(0)}10%{transform:rotate(0deg)}16.6666666667%{transform:rotate(-5deg)}20%{transform:rotate(0deg)}26.6666666667%{transform:rotate(0deg)}46.6666666667%{transform:rotate(10deg)}53.3333333333%{transform:rotate(-5deg)}56.6666666667%{transform:rotate(10deg)}}
            @keyframes right-whisker{6.6666666667%{transform:rotate(180deg)}10%{transform:rotate(190deg)}16.6666666667%{transform:rotate(180deg)}20%{transform:rotate(175deg)}26.6666666667%{transform:rotate(190deg)}46.6666666667%{transform:rotate(180deg)}53.3333333333%{transform:rotate(185deg)}56.6666666667%{transform:rotate(175deg)}}
            @keyframes left-ear{0%{transform:rotate(-20deg)}6.6666666667%{transform:rotate(-6deg)}13.3333333333%{transform:rotate(-15deg)}26.6666666667%{transform:rotate(-15deg)}33.3333333333%{transform:rotate(-30deg)}40%{transform:rotate(-30deg)}46.6666666667%{transform:rotate(0deg)}53.3333333333%{transform:rotate(0deg)}60%{transform:rotate(-15deg)}80%{transform:rotate(-15deg)}93.3333333333%{transform:rotate(-6deg)}100%{transform:rotateZ(-6deg)}}
            @keyframes right-ear{0%{transform:rotateZ(-16deg)}6.6666666667%{transform:rotateZ(-16deg)}13.3333333333%{transform:rotateZ(-19deg)}26.6666666667%{transform:rotateZ(-19deg)}33.3333333333%{transform:rotateZ(-30deg)}36.6666666667%{transform:rotateZ(-19deg)}37.3333333333%{transform:rotateZ(-30deg)}38%{transform:rotateZ(-19deg)}40%{transform:rotateZ(-19deg)}40.6666666667%{transform:rotateZ(-30deg)}41.3333333333%{transform:rotateZ(-19deg)}46.6666666667%{transform:rotateZ(-9deg)}53.3333333333%{transform:rotateZ(-9deg)}60%{transform:rotateZ(-19deg)}60.6666666667%{transform:rotateZ(-30deg)}61.3333333333%{transform:rotateZ(-19deg)}62.6666666667%{transform:rotateZ(-19deg)}63.3333333333%{transform:rotateZ(-30deg)}64%{transform:rotateZ(-19deg)}80%{transform:rotateZ(-19deg)}93.3333333333%{transform:rotateZ(-16deg)}100%{transform:rotateZ(-16deg)}}
            body{display:inline-flex;justify-content:center;align-items:center}.main{height:400px;width:400px;position:relative;top:-80px;left:-80px}.main .stand{position:absolute;top:50%;left:50%;transform:translate(-50%);height:20px;width:200px;border-radius:20px;background-color:#fd6e72;z-index:2}.main .stand::after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);height:10px;width:50px;border-radius:20px;background-color:#fdf9de;box-shadow:0 10px 0 #fdf9de,0 20px 0 #fdf9de,0 30px 0 #fdf9de,0 40px 0 #fdf9de,0 50px 0 #fdf9de,0 60px 0 #fdf9de,0 70px 0 #fdf9de,0 80px 0 #fdf9de,0 90px 0 #fdf9de,0 100px 0 #fdf9de,0 110px 0 #fdf9de,0 120px 0 #fdf9de,0 130px 0 #fdf9de,0 140px 0 #fdf9de,0 150px 0 #fdf9de,0 160px 0 #fdf9de,0 170px 0 #fdf9de}.main .cat{width:110px;height:50px;position:absolute;top:calc(50% - 50px);right:130px;border-top-left-radius:100px;border-top-right-radius:100px}.main .cat .body{width:110px;height:50px;background-color:#745260;position:absolute;border-top-left-radius:100px;border-top-right-radius:100px;animation:body 12s none infinite}.main .cat .head{content:"";width:70px;height:35px;background-color:#745260;position:absolute;top:calc(50% - 10px);left:-40px;border-top-left-radius:80px;border-top-right-radius:80px}.tail-container{position:absolute;right:0;bottom:-13px;z-index:3}.tail{position:absolute;height:30px;width:14px;bottom:-10px;right:0;border-bottom-right-radius:5px;background:#745260;z-index:0}.tail>.tail{animation:tail 12s none infinite;height:100%;width:14px;transform-origin:left;border-bottom-left-radius:20px 20px;border-bottom-right-radius:20px 20px;border-top-right-radius:40px}.ear{position:absolute;left:4px;top:-4px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:20px solid #745260;transform:rotate(-30deg);animation:left-ear 12s both infinite}.ear+.ear{animation:right-ear 12s both infinite;top:-12px;left:30px}.nose{position:absolute;bottom:10px;left:-10px;background-color:#fd6e72;height:5px;width:5px;border-radius:50%}.whisker-container{position:absolute;bottom:5px;left:-36px;width:20px;height:10px;transform-origin:right;animation:left-whisker 12s both infinite}.whisker-container:nth-child(2){left:-20px;bottom:12px;transform-origin:right;transform:rotate(180deg);animation:right-whisker 12s both infinite}.whisker{position:absolute;top:0;width:100%;border:1px solid #fdf9de;transform-origin:100% 0;transform:rotate(10deg)}.whisker:last-child{top:0;transform:rotate(-20deg)}
        </style>
    </head>
    <body><div style="height: 250px;width: 250px;overflow: hidden;display: inline-block;"><div class="main"><span class="stand"></span><div class="cat"><div class="body"></div><div class="head"><div class="ear"></div><div class="ear"></div></div><div class="face"><div class="nose"></div><div class="whisker-container"><div class="whisker"></div><div class="whisker"></div></div><div class="whisker-container"><div class="whisker"></div><div class="whisker"></div></div></div><div class="tail-container"><div class="tail"><div class="tail"><div class="tail"><div class="tail"><div class="tail"><div class="tail"><div class="tail"></div></div></div></div></div></div></div></div></div></div></div></body>
</html>
`;
    let html = `<div class="touch-fish" style="-webkit-user-select: none; width: 250px;height: 250px;z-index: 9998;position: fixed;right: 0;bottom: 0;">
        <iframe class="showHtml" style="width: 250px;height: 250px;position: absolute;border: none;">
        </iframe>
        <div class="touch-fish-toolbar" style="position: absolute;top: 0;left: 0;display:grid;z-index: 9999;">
           <span style="padding:10px;cursor:pointer" class="list" title="管理列表"><svg class="icon" style="width: 20px;height: 20px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="496"><path d="M187.392 70.656q28.672 0 48.64 19.456t19.968 48.128l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-54.272 0q-27.648 0-47.616-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.128t47.616-19.456l54.272 0zM889.856 70.656q27.648 0 47.616 19.456t19.968 48.128l0 52.224q0 28.672-19.968 48.64t-47.616 19.968l-437.248 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.128t48.64-19.456l437.248 0zM187.392 389.12q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 27.648-19.968 47.616t-48.64 19.968l-54.272 0q-27.648 0-47.616-19.968t-19.968-47.616l0-52.224q0-28.672 19.968-48.64t47.616-19.968l54.272 0zM889.856 389.12q27.648 0 47.616 19.968t19.968 48.64l0 52.224q0 27.648-19.968 47.616t-47.616 19.968l-437.248 0q-28.672 0-48.64-19.968t-19.968-47.616l0-52.224q0-28.672 19.968-48.64t48.64-19.968l437.248 0zM187.392 708.608q28.672 0 48.64 19.968t19.968 47.616l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-54.272 0q-27.648 0-47.616-19.968t-19.968-48.64l0-52.224q0-27.648 19.968-47.616t47.616-19.968l54.272 0zM889.856 708.608q27.648 0 47.616 19.968t19.968 47.616l0 52.224q0 28.672-19.968 48.64t-47.616 19.968l-437.248 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-27.648 19.968-47.616t48.64-19.968l437.248 0z" p-id="497"></path></svg></span>
            <span style="padding:10px;cursor:pointer" class="change" title="下一个"><svg class="icon" style="width: 20px;height: 20px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="946"><path d="M810.752 205.397333a213.333333 213.333333 0 0 1 213.333333 213.333334v128h-85.333333v-128a128 128 0 0 0-128-128h-768a42.666667 42.666667 0 0 1-24.746667-77.397334L316.586667 0l49.493333 69.461333-190.293333 135.936h634.88z m-597.333333 597.333334a213.333333 213.333333 0 0 1-213.333334-213.333334v-128h85.333334v128a128 128 0 0 0 128 128h768a42.666667 42.666667 0 0 1 24.746666 77.397334l-298.666666 213.333333-49.493334-69.461333 190.293334-135.936H213.333333z" p-id="947"></path></svg></span>
        </div>
    </div>`;
    console.log('test')
    let config = function() {
        let cache = JSON.parse(unsafeWindow.localStorage.touchFishDatas || null);
        if (cache == null) {
            cache = {};
            cache['currUse'] = 'sleepCat';
            cache.resource = {};
            cache.resource['sleepCat'] = defaultHTML;
            updateLocalStorage();
        }

        function updateLocalStorage() {
            unsafeWindow.localStorage.touchFishDatas = JSON.stringify(cache);
        }
        return {
            add(key, html) {
                cache.resource[key] = html;
                updateLocalStorage();
            },
            remove(key) {
                delete cache.resource[key];
                updateLocalStorage();
            },
            change(key) {
                cache['currUse'] = key;
                changeHTML(cache.resource[key]);
                updateLocalStorage();
            },
            curr() {
                return cache.resource[cache['currUse']];
            },
            next() {
                let keys = Object.keys(cache.resource);
                let i = keys.indexOf(cache['currUse']);
                return cache.resource[keys[(i + 1) % keys.length]];
            },
            update(old, newK, html) {
                delete cache.resource[old];
                cache.resource[newK] = html;
                updateLocalStorage();
            },
            resource() {
                return cache.resource;
            },
            currKey(){
                return cache['currUse'];
            }
        }
    }()
    $('body').prepend(html)
    $('head').append(`<style>
    .touch-fish,
    .touch-fish iframe {
        width: 250px;
        height: 250px;
        z-index: 9998;
        position: absolute;
        right: 0;
        bottom: 0;
        border: none;
    }
    .touch-fish-toolbar>span {
        padding: 10px;
        cursor: pointer;
    }
    .tf-list>* {
        padding: 5px 10px;
        margin: 5px;
        border-radius: 4px;
        background: #eee;
        cursor: pointer;
        border: none;
    }
    .tf-btn-add{
        padding: 10px 5px;
        text-align: center;
        background: #00a9;
        cursor: pointer;
        color: #fff;
        font-weight: bold;
        border-radius: 20px;
        margin: 10px;
    }
    .tf-btn-use{
        background: #0a0a;
        color: #fff;
    }
</style>`)
    let delayFunc = function() {
        let time;
        return {
            delay(func, t = 1200) {
                window.clearTimeout(time);
                time = setTimeout(() => func(), t);
            }
        }
    }();
    $('.list').click(function() {
        let rols = `<div class="tf-list" style="">
            <input old="oldK" name="key" placeholder="描述" style="width: 100px;">
            <input name="html" placeholder="网页内容">
            <input name="useThis" type="button" value="启用">
            <input name="del" type="button" value="删除">
        </div>`;
        let html =
            `<div class="tf-m-page" style="background:#fff;position: fixed;z-index: 99999;top: calc(50vh - 200px);left: calc(50vw - 260px); width: 520px;height: 400px;overflow: auto;border: 1px solid orangered;padding: 10px;">
            <div class="tf-btn-add" style="">ADD</div>
            </div>`;
        $('body').prepend(html);

        {
            let rtime; // 定时器交互
            $('.tf-m-page').mouseleave(function() {
                rtime = setTimeout(() => $('.tf-m-page').remove(), 600)
            }).mouseenter(function() {
                window.clearTimeout(rtime)
            });
        }
        $('.tf-m-page').on('input propertychange', 'input', function() {
            console.log('inpu')
            let $t = $(this).parent().find('input');
            let old = $($t[0]).attr('old'),
                newK = $($t[0]).val(),
                h = $($t[1]).val();
            delayFunc.delay(() => {
                config.update(old, newK, h);
            })
        }).on('click', 'input[name="del"]', function() {
            $(this).parent().remove();
            config.remove($(this).prev('[name="key"]').val())
        }).on('click', 'input[name="useThis"]', function() {
            if ($(this).hasClass('tf-btn-use')) {
                return false;
            }
            $('.tf-list input[name="useThis"]').removeClass('tf-btn-use');
            $(this).addClass('tf-btn-use');
            config.change($(this).prev().prev().val())
        });
        $('.tf-btn-add').click(function() {
            $(this).parent().append(rols);
        })
        // 初始化表单数据
        Object.keys(config.resource()).forEach(k => {
            $('.tf-m-page').append(rols);
            let $input = $('.tf-m-page>.tf-list:last>input');
            $($input[0]).attr('old', k).val(k);
            $($input[1]).val(config.resource()[k]);
        })
        // 并选中当前的
        $(`input[old="${config.currKey()}"]`).next().next().addClass('tf-btn-use')
    })
    $('.change').click(function() {
        console.log('change');
        changeHTML(config.next());
    })
    changeHTML(config.curr());
    $('.touch-fish-toolbar').hide()
    $('.touch-fish').mouseover(function() {
        $('.touch-fish-toolbar').show();
    }).mouseout(function() {
        $('.touch-fish-toolbar').hide()
    });

    function changeHTML(html) {
        $('iframe[class="showHtml"]').contents().find('html').empty().append(html);
    }
}