纯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的按钮界面，任意点击一个按钮

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

成功，教程到此结束！

纯js油猴插件版GUI页面助手相关推荐

油猴插件 | JS实现当前网页添加固定按钮
借助油猴插件,在当前网页添加固定按钮当需要增强当前网页的按钮时,我们需要添加按钮实现特定功能,这个可以使用js代码实现,在代码实现过程中发现,style的一个属性z-index需要特定方式实现,详见 ...
chrome + IDM + 油猴插件实现百度网盘大文件的高速下载
chrome + IDM + 油猴插件实现百度网盘大文件的高速下载:这是一项非常成熟的技术,下载速度快, 不用担心被封 1. 下载chrome 这个直接跳过没有的话就不用看了 2. 下载idm软 ...
【记一次开发油猴插件的过程】——逆水寒
记一次开发过程基于油猴插件写的纯javascript代码第一步第二步第三步第四步第五步第六步基于油猴插件写的纯javascript代码一个朋友找我帮忙,我刚好闲着无聊写了一下,有需要 ...
油猴插件(隐藏知乎标题,屏蔽百度搜索广告)
1.隐藏知乎标题先下载安装一个浏览器插件"油猴插件"(Tampermonkey): https://www.aliyundrive.com/s/4rTXeq7R8bx 提取码: ...
QQ浏览器如何安装油猴插件
QQ浏览器安装油猴插件过程步骤? Tampermonkey油猴插件是一款非常强大的浏览器插件,可以为用户提供各种脚本运行所需要的环境.如何安装这款强的插件呢? 安装Tampermonkey的过程步骤: ...
百度云直链下载-IDM+油猴插件（一）
百度云直链下载[满速]-IDM 浏览器插件安装安装浏览器插件Tampermonkey 直链脚本安装 IDM下载方法 IDM下载&安装 IDMIDM配置直链获取&下载选定文件获取 ...
谷歌浏览器 Chrome 安装 Tampermonkey 油猴插件的方法
谷歌浏览器 Chrome 安装 Tampermonkey 油猴插件的方法一.什么是油猴脚本二.油猴安装方法方法一:Google官方商店安装(推荐) 方法二:本地安装(无需KX上网) 一.什么是油 ...
BigSur下Safari14.1.1安装油猴插件（Tampermonkey）
Tampermonkey for mac Safari是一款浏览器扩展和最为流行的用户脚本管理器,Tampermonkey 提供了诸如便捷脚本安装.自动更新检查.标签中的脚本运行状况速览.内置的编辑器 ...
tampermonkey油猴插件|tampermonkey油猴脚本
让你的电脑浏览器使用起来更加强大吗?那么可以试试tampermonkey油猴插件,这是专门为市面上主流常见的chrome谷歌浏览器.firefox火狐.360浏览器.Microsoft Edge.Op ...
Codeforces与洛谷题目之间跳转油猴插件
title: Codeforces与洛谷题目之间跳转油猴插件 date: 2023-05-04 15:32:39 categories: 其他 tags: 油猴脚本 Codeforces与洛谷题目之间 ...

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

纯js油猴插件版GUI页面助手相关推荐

最新文章

热门文章