要在油猴脚本中添加一个左下角的新增按钮,并在按下按钮时弹出一个框,以单选框的方式提供四个选项A/B/C/D供选择,您可以按照以下步骤进行操作:

  1. 打开您的油猴脚本编辑器,创建一个新的脚本或打开您现有的脚本。

  2. 在脚本中添加以下代码来创建一个按钮并添加点击事件监听器:

// 创建按钮
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);
});
  1. 保存并启用油猴脚本。

现在,您将在页面的左下角看到一个新增按钮。当您点击该按钮时,将弹出一个框,以单选框的方式提供四个选项A/B/C/D供选择。当您选择一个选项并点击确定按钮时,选项的值将在控制台中显示,并且您可以在处理选项的逻辑中进行进一步的操作

油猴 左下角新增按钮按下按钮会 弹出一个框以单选框的方式提供四个选项ABCD供选择

原文地址: https://www.cveoy.top/t/topic/impy 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录