外包网站制作营销推广活动策划方案

脚本信息

• 描述：当鼠标放在验证码图片上时，显示弹窗并提供识别选项

实现逻辑

1. 定义了一个isRectangle函数，用于判断图片是否符合验证码的特征。判断条件是：图片的宽高比大于1.5，宽度大于等于80且高度大于等于30，宽度小于等于150且高度小于等于100。
2. 定义了一个showPopup函数，用于显示弹窗。该函数接收一个图片的URL作为参数。
   • 创建一个固定定位的div元素作为弹窗。
   • 设置弹窗的样式，包括位置、背景颜色、内边距、边框等。
   • 创建一个img元素，设置其src属性为传入的图片URL，并设置样式。
   • 创建一个识别按钮和一个取消按钮，并设置对应的文本和样式。
   • 给识别按钮添加点击事件监听器，在点击时调用recognizeCaptcha函数进行验证码识别，并通过alert弹窗显示识别结果，最后移除弹窗。
   • 给取消按钮添加点击事件监听器，在点击时移除弹窗。
   • 将img、识别按钮和取消按钮添加到弹窗中。
   • 将弹窗添加到body元素中。
   • 给document添加点击事件监听器，当点击事件发生时，判断点击的目标元素是否在弹窗内，如果不在则移除弹窗。
3. 定义了一个recognizeCaptcha函数，用于调用验证码识别的API接口，并返回识别结果。目前该函数只是返回传入的图片URL。
4. 给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("不符合验证码特征");}});
})();