Add an overlay to the entire webpage with a brightness slider positioned at the center below the screen. The brightness or slider Appear and Disappear when 'b' or 'c' is clicked.
当前为
// ==UserScript==
// @name Useless Things Series: Brightness Overlay with Slider
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Add an overlay to the entire webpage with a brightness slider positioned at the center below the screen. The brightness or slider Appear and Disappear when 'b' or 'c' is clicked.
// @match *://*/*
// @grant none
// @license MIT
// @namespace https://greasyfork.org/users/1126616
// ==/UserScript==
(function() {
'use strict';
let overlayVisible = false;
let brightnessSliderVisible = false;
const defaultBrightnessValue = 100;
let brightnessValue = localStorage.getItem('brightness') || defaultBrightnessValue;
// Create overlay element
const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = 0;
overlay.style.left = 0;
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = `rgba(0, 0, 0, ${1 - brightnessValue / 100})`;
overlay.style.zIndex = 9999;
overlay.style.display = 'none';
// Create brightness slider element
const brightnessSlider = document.createElement('input');
brightnessSlider.type = 'range';
brightnessSlider.min = '0';
brightnessSlider.max = '100';
brightnessSlider.value = brightnessValue;
brightnessSlider.style.width = '80%';
brightnessSlider.style.margin = '20px auto';
brightnessSlider.style.position = 'fixed';
brightnessSlider.style.bottom = '50px';
brightnessSlider.style.left = '50%';
brightnessSlider.style.transform = 'translateX(-50%)';
brightnessSlider.style.zIndex = 10000;
brightnessSlider.style.background = 'linear-gradient(to right, #333, #fff)';
brightnessSlider.style.borderRadius = '5px';
brightnessSlider.style.border = 'none';
brightnessSlider.style.padding = '5px';
brightnessSlider.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.3)';
brightnessSlider.style.display = 'none';
// Append overlay and slider to the body
document.body.appendChild(overlay);
document.body.appendChild(brightnessSlider);
// Function to update brightness
function updateBrightness(value) {
overlay.style.backgroundColor = `rgba(0, 0, 0, ${1 - value / 100})`;
localStorage.setItem('brightness', value);
}
// Event listener for slider input
brightnessSlider.addEventListener('input', function() {
const brightnessValue = this.value;
updateBrightness(brightnessValue);
// Reset the auto-hide timeout whenever the slider is interacted with
resetAutoHideTimeout();
});
// Variable to hold timeout for automatic slider disappearance
let autoHideTimeout;
// Function to reset the auto-hide timeout
function resetAutoHideTimeout() {
// Clear the existing timeout
clearTimeout(autoHideTimeout);
// Set a new timeout to hide slider after 3 seconds if user is not adjusting it
autoHideTimeout = setTimeout(() => {
brightnessSlider.style.display = 'none';
brightnessSliderVisible = false;
}, 3000);
}
// Event listener for keydown events
document.addEventListener('keydown', function(event) {
if (event.key === 'b') {
if (overlayVisible) {
overlay.style.display = 'none';
brightnessSlider.style.display = 'none';
brightnessSliderVisible = false;
} else {
overlay.style.display = 'block';
if (!brightnessSliderVisible) {
brightnessSlider.style.display = 'block';
brightnessSliderVisible = true;
// Reset the auto-hide timeout
resetAutoHideTimeout();
}
}
overlayVisible = !overlayVisible;
} else if (event.key === 'c') {
if (brightnessSliderVisible) {
brightnessSlider.style.display = 'none';
brightnessSliderVisible = false;
} else {
brightnessSlider.style.display = 'block';
brightnessSliderVisible = true;
}
}
});
})();