分类 JAVA SCRIPT 下的文章

资源:L2Dwidget 二次元前端插件


使用方法:

如下面代码一样,在HTML的head头内或body尾部引入L2Dwidget.js即可在页面中引入动画。

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> 
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.0.min.js"></script> 
<script>
  L2Dwidget.init({ 
  "model": {jsonPath:"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json","scale": 1 }, 
  "display": { "position": "left", "width": 150, "height": 300,"hOffset": 0, "vOffset": -20 }, 
  "mobile": { "show": true, "scale": 0.5 }, 
  "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } });
</script>

其中,model内的jsonPath对应的就是动画模型的json文件地址,不同模型,显示不同图形。

可选模型有:

模型类型url
小帅哥https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
萌娘https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
小可爱(女)https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
小可爱(男)https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
初音https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
z16https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
黑猫https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json

等有时间放到宝塔插件上去(但是最近良哥说插件无大bug不给与审核)。。。。


一个页面版的浏览器控制器输出


今天同学突然问我廖老的站立有个在输入框里输入js代码 就能像console里边一样的输出这里来段代码

<textarea id="code">console.log('123')</textarea>
<button onclick="exe()">t</button>
<div id="text"></div>
<script>

function exe(){
    var t=document.getElementById('code').value
    execute_javascript(t)
}
function execute_javascript(code) {
    
    var code = code;

    // var code = "";
    (function () {
        // prepare console.log
        var
            buffer = '',
            _log = function (s) {
                // console.log(s);
                buffer = buffer + s + '\n';
            },
            _warn = function (s) {
                // console.warn(s);
                buffer = buffer + s + '\n';
            },
            _error = function (s) {
                // console.error(s);
                buffer = buffer + s + '\n';
            },
            _console = {
                trace: _log,
                debug: _log,
                log: _log,
                info: _log,
                warn: _warn,
                error: _error
            };
        try {
            eval('(function() {\n var console = _console; \n' + code + '\n})();');
            if (!buffer) {
                buffer = '(no output)';
            }
            document.getElementById("text").innerHTML=buffer
        }
        catch (e) {
            buffer = buffer + String(e);
        }
    })();
}
</script>

Tampermonkey 脚本编写


室友推荐了个chrome的插件,我就发现了这东西好像有毒,原来网页还能加东西呢,就有了一个想法:

让每个网页都显示对应网址的IP地址和其他详细的信息。

第一件事就是给chrome添加Tampermonkey插件,然后添加脚本,虽然网上有挺多大神的脚本,但是本着发扬光大的思想......

来,我们看看添加新的脚本:

// ==UserScript==
// @name New Userscript //插件名字
// @namespace http://tampermonkey.net/  //插件所属名
// @version 0.1  //版本
// @description try to take over the world!
// @author You
// @match http:/// //地址范围
// @grant none  //
// ==/UserScript==

(function() {

'use strict';

// Your code here...

})();

再添一个jQ库,方便:

// @require http://code.jquery.com/jquery-1.11.0.min.js

在// your code here写我们想写js代码

先测试一下,在网页中加个文字:

// ==UserScript==
// @name test
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match *
// @grant none
// ==/UserScript==

(function() {

'use strict';

var div_test = document.createElement("div");
div_test.setAttribute("id", "id_test");
var a = document.body;
a.insertBefore(div_test, a.firstChild);
document.getElementById('id_test').innerHTML = 'test';

})();

Screenshot-at-2017-04-13-10-21-36.png

继续,那就直接去实现前面的想法,把比较详细的IP信息显示在浏览器的右下角,并且是透明的。