纯js油猴插件版GUI页面助手

想必大部分人都知道,油猴插件是个好东西，他可以在指定的页面加入一些js的功能，来快速地实现网页填表等功能

今天我写的内容不仅仅是这些简单操作，而是包含了以下知识点的操作:

1.纯js在指定页面上生成类似gui的界面，基本控件包含按钮用于点击执行功能，带滚轮编辑框用于显示日志，

以及右下角弹出窗口，大概样子是这样的:

2.js脚本的按钮对应的功能，写在服务器上的php文件里，每点击按钮时对该文件发出post请求，获得返回的文本进行执行

。这里需要ajax基础知识和php代码的编写

好了，直接上代码:

js部分(这里我命令为gui.js，弄好后复制粘贴到油猴插件里面):

// ==UserScript==
// @name        游戏辅助gui
// @namespace    http://playdreamer.cn/
// @include      http://*
// @version      1.0.0
// @description  道长发布的强大脚本，by道长论剑论坛。
// @author       道长
// @grant        none
// ==/UserScript==

//---用户自定义设置区域----------
buju='auto';
pifu=0;

//--服务端可见区域---------------
function IsPC() {
	var a = navigator.userAgent;
	var b = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
	var c = true;
	for (var v = 0; v < b.length; v++) {
		if (a.indexOf(b[v]) > 0) {
			c = false;
			break
		}
	}
	if (c == false) {
		console.log("你的当前设备为移动端，已为你优化默认布局");
		buju = 80
	} else if (buju == "auto") {
		if (window.screen.height == 1080) {
			buju = 300
		} else if (window.screen.height == 768) {
			buju = 100
		} else if (window.screen.height == 720) {
			buju = 50
		} else if (window.screen.height < 720) {
			buju = 0
		} else if (window.screen.height > 1080) {
			buju = 500
		} else {
			buju = 300
		}
		console.log("功能按钮布局已自动优化为" + buju)
	}
}
IsPC();
var btnList = {},
	paddingLeft = '0px',
	paddingRight = '0px',
	clrs1 = 'color',
	clrs2 = 'ground',
	color0 = '#E0EEEE',
	ground0 = '#9370DB',
	color1 = '#BFEFFF',
	ground1 = '#BDB76B',
	color2 = '#E0EEE0',
	ground2 = '#CD661D',
	color3 = '#FFFAFA',
	ground3 = '#FFB6C1',
	color4 = null,
	ground4 = null,
	color = eval(clrs1 + pifu),
	ground = eval(clrs2 + pifu),
	buttonWidth = '70px',
	buttonHeight = '20px',
	currentPos = 5,
	delta = 30,
	nowversion = "1.1.0",
	database = window.localStorage;
var btnBox2 = document.createElement('div');
btnBox2.style.position = 'absolute';
btnBox2.style.top = '210px';
btnBox2.style.left = 460 + buju + 'px';
btnBox2.style.width = buttonWidth;
btnBox2.style.height = buttonHeight;
document.body.appendChild(btnBox2);

var btnBox1 = document.createElement('div');
btnBox1.style.position = 'absolute';
btnBox1.style.top = '210px';
btnBox1.style.left = 540 + buju + 'px';
btnBox1.style.width = buttonWidth;
btnBox1.style.height = buttonHeight;
document.body.appendChild(btnBox1);

function createButton(a, b, c) {
	btnList[a] = document.createElement('button');
	var d = btnList[a];
	d.innerText = a;
	d.style.marginTop = currentPos + "px";
	d.style.color = color;
	d.style.background = ground;
	d.style.paddingLeft = paddingLeft;
	d.style.paddingRight = paddingRight;
	d.style.width = '100%';
	d.style.height = '100%';;
	d.addEventListener('click', c);
	b.appendChild(d)
}
var html580ads = {
	init: function(a, c) {
		a = '<h2  id="outle" style="height: 40px; top:-15px; line-height: 30px; padding-left: 5px; font-size: 20px;text-align:center; color:' + color + ";background:" + ground + ';border-bottom: 1px solid #aaaaaa; position: relative; "><b>' + a + '</b><span style="width: 21px; height: 20px;position: absolute; top: 1px; right:30px;"><a id="btn_min" href="javascript:void(0); ">一</a>&nbsp&nbsp<a id="btn_close" href="javascript:void(0);" >X</a></span></h2><div id="mainoutle" style="height:150px; width:300px; overflow: hidden; font-size: 18px; line-height: 18px;text-decoration:underline; color:rgb(195, 66, 255);"><div style="padding:2px;"><b>' + c + "</b></div></div>";
		var b = this;
		c = document.body;
		b.oDiv = document.createElement("div");
		b.oDiv.id = "miaov_float_layer";
		b.oDiv.style.cssText = "border: 1px solid #aaaaaa; display:none;width:300px;";
		c.appendChild(b.oDiv);
		b.oDiv.innerHTML = a;
		var d = document.getElementById("btn_min");
		a = document.getElementById("btn_close");
		b.oDivContent = b.oDiv.getElementsByTagName("div")[0];
		var e = 0;
		c = window.navigator.userAgent.match(/MSIE 6/ig) && !window.navigator.userAgent.match(/MSIE 7|8/ig);
		b.oDiv.style.display = "block";
		e = b.oDivContent.offsetHeight;
		c ? (b.oDiv.style.position = "absolute", b.repositionAbsolute(), window.attachEvent("onscroll", function() {
			b.repositionAbsolute()
		}), window.attachEvent("onresize", function() {
			b.repositionAbsolute()
		})) : (b.oDiv.style.position = "fixed", b.repositionFixed());
		d.timer = null;
		d.isMax = !0;
		d.onclick = function() {
			b.startMove(b.oDivContent, (this.isMax = !this.isMax) ? e : 0, function() {
				d.className = "min" == d.className ? "max" : "min"
			})
		};
		a.onclick = function() {
			b.oDiv.remove()
		}
	},
	startMove: function(a, c, b) {
		a.timer && clearInterval(a.timer);
		var d = this;
		a.timer = setInterval(function() {
			d.doMove(a, c, b)
		}, 30)
	},
	doMove: function(a, c, b) {
		var d = (c - a.offsetHeight) / 8;
		a.offsetHeight == c ? (clearInterval(a.timer), a.timer = null, b && b()) : (d = 0 < d ? Math.ceil(d) : Math.floor(d), a.style.height = a.offsetHeight + d + "px", window.navigator.userAgent.match(/MSIE 6/ig) && 2 == window.navigator.userAgent.match(/MSIE 6/ig).length ? this.repositionAbsolute() : this.repositionFixed())
	},
	repositionFixed: function() {
		this.oDiv.style.right = 0;
		this.oDiv.style.bottom = 0
	},
	repositionAbsolute: function() {
		var a = document.body.scrollTop || document.documentElement.scrollTop,
			c = document.documentElement.clientHeight;
		this.oDiv.style.left = (document.body.scrollLeft || document.documentElement.scrollLeft) + document.documentElement.clientWidth - this.oDiv.offsetWidth + "px";
		this.oDiv.style.top = a + c - this.oDiv.offsetHeight + "px"
	},
	changemsgcss: function() {
		document.getElementById("outle").style.color = color;
		document.getElementById("outle").style.background = ground
	}
};

function alertmsg(a, c) {
	1 == database.alert_flag ? (document.getElementById("btn_close") && html580ads.oDiv.remove(), html580ads.init(a, c)) : console.log("你有一条弹窗消息待显示，可弹窗功能未开启")
}
function mainoutle(a, c) {
	document.getElementById("mainoutle").style.height = a + "px";
	document.getElementById("mainoutle").style.width = c + "px";
	html580ads.oDiv.style.width = c + "px"
};
database.alert_flag = 1;
alertmsg("道长仙人跳", "此脚本内测开发中，有新功能需求建议请联系道长。\n道长唯一qq：434857005");

(function() {
	var e, isInitialized = false,
		_console = {};

	function createElement(a, b) {
		var c = document.createElement(a);
		c.style.cssText = b;
		return c
	}
	function createPanel(a) {
		a.bgColor = a.bgColor || ground;
		a.color = a.color || color;
		a.css = a.css || '';
		a.freeConsole = false;
		var b = createElement('div', 'font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;left:300px;top:216px;min-width:200px;max-height:50vh;overflow:auto;background:' + a.bgColor + ';color:' + a.color + ';' + a.css);
		b.style.left = 610 + buju + 'px';
		return b
	}
	function log() {
		var c = createElement('div', 'line-height:18px;background:' + (e.children.length % 2 ? 'rgba(255,255,255,0.2)' : ''));
		var d = [].slice.call(arguments).reduce(function(a, b) {
			return a + ' ' + b
		}, '');
		c.textContent = d;
		e.appendChild(c);
		e.scrollTop = e.scrollHeight - e.clientHeight
	}
	function clear() {
		e.innerHTML = ''
	}
	function init(a) {
		if (isInitialized) {
			return
		}
		isInitialized = true;
		a = a || {};
		e = createPanel(a);
		document.body.appendChild(e);
		if (!a.freeConsole) {
			_console.log = console.log;
			_console.clear = console.clear;
			console.log = originalFnCallDecorator(log, 'log');
			console.clear = originalFnCallDecorator(clear, 'clear')
		}
	}
	function destroy() {
		isInitialized = false;
		console.log = _console.log;
		console.clear = _console.clear;
		e.remove()
	}
	function hidelog() {
		e.style.visibility = "hidden"
	}
	function showlog() {
		e.style.visibility = "visible"
	}
	function changecss() {
		e.style.color = color;
		e.style.background = ground
	}
	function checkInitialized() {
		if (!isInitialized) {
			throw 'You need to call `screenLog.init()` first.';
		}
	}
	function checkInitDecorator(a) {
		return function() {
			checkInitialized();
			return a.apply(this, arguments)
		}
	}
	function originalFnCallDecorator(a, b) {
		return function() {
			a.apply(this, arguments);
			if (typeof _console[b] === 'function') {
				_console[b].apply(console, arguments)
			}
		}
	}
	window.screenLog = {
		init: init,
		log: originalFnCallDecorator(checkInitDecorator(log), 'log'),
		clear: originalFnCallDecorator(checkInitDecorator(clear), 'clear'),
		destroy: checkInitDecorator(destroy),
		hidelog: checkInitDecorator(hidelog),
		showlog: checkInitDecorator(showlog),
		changecss: checkInitDecorator(changecss)
	}
})();
screenLog.init();
screenLog.log('道长仙人跳By道长: version---' + nowversion);
//----函数类-------------------------------------

function GetFunc(name){
     var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
            var a=xmlhttp.responseText;
            eval(a);
		}
	}
    xmlhttp.open("POST","https://dashennet.cn/functions/?t="+Math.random(),true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("do="+name);    
    }
function go(s){
 console.log(s);   
}  
function Test(){
    GetFunc("签到");
}
//----按钮排列-------------------------------------
createButton('测试1-1',btnBox1,Test);
createButton('测试1-2',btnBox1,Test);
createButton('测试2-1',btnBox2,Test);
createButton('测试2-2',btnBox2,Test);

php部分，这里我命名为index.php，因为这样做在post的时候只需要post上个目录即可

我把它放在 https://dashennet.cn/functions/     目录下

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
$do=$_POST["do"];
   
$qd="console.log('签到一次！');go('jh 1;w;event_1_46497436;jh 5;n;n;n;w;sign7');";

$签到="function qd(){
console.log('签到一次！');
go('jh 1;w;event_1_46497436;jh 5;n;n;n;w;sign7;home');
}
qd();";

switch ($do)
{
case "签到":
    echo $签到;
    break;
default:
    echo "<h1>道长提示</h1><p>购买授权请加道长qq号:434857005</p>";
}
?>

 

完事儿后，任意一个网页刷新都可见我的js的按钮界面，任意点击一个按钮

看看调试控制台输出的信息如下

成功，教程到此结束！