app定制网站开发百度平台客服电话
脚本信息
- 描述:当鼠标放在验证码图片上时,显示弹窗并提供识别选项
实现逻辑
- 定义了一个
isRectangle
函数,用于判断图片是否符合验证码的特征。判断条件是:图片的宽高比大于1.5,宽度大于等于80且高度大于等于30,宽度小于等于150且高度小于等于100。 - 定义了一个
showPopup
函数,用于显示弹窗。该函数接收一个图片的URL作为参数。- 创建一个固定定位的
div
元素作为弹窗。 - 设置弹窗的样式,包括位置、背景颜色、内边距、边框等。
- 创建一个
img
元素,设置其src
属性为传入的图片URL,并设置样式。 - 创建一个
识别
按钮和一个取消
按钮,并设置对应的文本和样式。 - 给
识别
按钮添加点击事件监听器,在点击时调用recognizeCaptcha
函数进行验证码识别,并通过alert
弹窗显示识别结果,最后移除弹窗。 - 给
取消
按钮添加点击事件监听器,在点击时移除弹窗。 - 将
img
、识别
按钮和取消
按钮添加到弹窗中。 - 将弹窗添加到
body
元素中。 - 给
document
添加点击事件监听器,当点击事件发生时,判断点击的目标元素是否在弹窗内,如果不在则移除弹窗。
- 创建一个固定定位的
- 定义了一个
recognizeCaptcha
函数,用于调用验证码识别的API接口,并返回识别结果。目前该函数只是返回传入的图片URL。 - 给
document
添加mouseover
事件监听器,当鼠标放在某个元素上时触发,判断目标元素是否为IMG
标签且符合验证码特征,如果是则调用showPopup
函数显示弹窗,否则打印"不符合验证码特征"。 以上是该验证码识别脚本的实现逻辑,你可以根据自己的需求进行修改和优化。
// ==UserScript==
// @name 验证码识别脚本
// @namespace your-namespace
// @version 1.0
// @description 当鼠标放在验证码图片上时,显示弹窗并提供识别选项
// @author your-name
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {'use strict';var isRectangle = function(image) {return image.width / image.height > 1.5 && image.width >= 80 && image.height >= 30 && image.width <= 150 && image.height <= 100;};var showPopup = function(src) {var popup = document.createElement('div');popup.style.position = 'fixed';popup.style.top = '50%';popup.style.left = '50%';popup.style.transform = 'translate(-50%, -50%)';popup.style.backgroundColor = 'white';popup.style.padding = '20px';popup.style.border = '1px solid black';var img = document.createElement('img');img.src = src;img.style.display = 'block';img.style.marginBottom = '20px';var recognizeBtn = document.createElement('button');recognizeBtn.textContent = '识别';recognizeBtn.style.marginRight = '20px';var cancelBtn = document.createElement('button');cancelBtn.textContent = '取消';recognizeBtn.addEventListener('click', function() {var result = recognizeCaptcha(src);alert(result);popup.remove();});cancelBtn.addEventListener('click', function() {popup.remove();});popup.appendChild(img);popup.appendChild(recognizeBtn);popup.appendChild(cancelBtn);document.body.appendChild(popup);document.addEventListener('click', function(e) {if (!popup.contains(e.target)) {popup.remove();}});};var recognizeCaptcha = function(src) {// 在这里调用你的验证码识别API接口,并返回识别结果return src;};document.addEventListener('mouseover', function(e) {var target = e.target;if (target.tagName === 'IMG' && isRectangle(target)) {showPopup(target.src);} else {console.log("不符合验证码特征");}});
})();