油猴 左下角新增按钮按下按钮会 弹出一个框以单选框的方式提供四个选项ABCD供选择
要在油猴脚本中添加一个左下角的新增按钮,并在按下按钮时弹出一个框,以单选框的方式提供四个选项A/B/C/D供选择,您可以按照以下步骤进行操作:
-
打开您的油猴脚本编辑器,创建一个新的脚本或打开您现有的脚本。
-
在脚本中添加以下代码来创建一个按钮并添加点击事件监听器:
// 创建按钮
var button = document.createElement('button');
button.innerHTML = '新增按钮';
// 设置按钮样式
button.style.position = 'fixed';
button.style.left = '10px';
button.style.bottom = '10px';
button.style.zIndex = '9999';
// 添加按钮到页面
document.body.appendChild(button);
// 点击事件监听器
button.addEventListener('click', function() {
// 创建弹出框
var dialog = document.createElement('div');
dialog.style.position = 'fixed';
dialog.style.top = '50%';
dialog.style.left = '50%';
dialog.style.transform = 'translate(-50%, -50%)';
dialog.style.padding = '20px';
dialog.style.backgroundColor = '#fff';
dialog.style.zIndex = '9999';
// 创建单选框选项
var options = ['A', 'B', 'C', 'D'];
for (var i = 0; i < options.length; i++) {
var radio = document.createElement('input');
radio.type = 'radio';
radio.name = 'option';
radio.value = options[i];
var label = document.createElement('label');
label.innerHTML = options[i];
dialog.appendChild(radio);
dialog.appendChild(label);
dialog.appendChild(document.createElement('br'));
}
// 创建确定按钮
var confirmButton = document.createElement('button');
confirmButton.innerHTML = '确定';
// 确定按钮点击事件
confirmButton.addEventListener('click', function() {
var selectedOption = document.querySelector('input[name="option"]:checked');
if (selectedOption) {
var optionValue = selectedOption.value;
console.log('选择了选项:' + optionValue);
// 在这里处理选项的逻辑
} else {
console.log('未选择任何选项');
}
// 移除弹出框
dialog.remove();
});
dialog.appendChild(confirmButton);
// 添加弹出框到页面
document.body.appendChild(dialog);
});
- 保存并启用油猴脚本。
现在,您将在页面的左下角看到一个新增按钮。当您点击该按钮时,将弹出一个框,以单选框的方式提供四个选项A/B/C/D供选择。当您选择一个选项并点击确定按钮时,选项的值将在控制台中显示,并且您可以在处理选项的逻辑中进行进一步的操作
原文地址: https://www.cveoy.top/t/topic/impy 著作权归作者所有。请勿转载和采集!