control the speed of website timers and animations, aka speed up all javascript
目前為
// ==UserScript==
// @name Web Speed Controller
// @namespace http://tampermonkey.net/
// @version 1.8
// @description control the speed of website timers and animations, aka speed up all javascript
// @author Minoa
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Create UI elements
const controls = document.createElement('div');
controls.style.cssText = `
position: fixed;
top: 13px;
right: 18px;
background: rgba(15, 23, 42, 0.8);
padding: 4px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
z-index: 9999999;
display: flex;
gap: 4px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
align-items: center;
transition: all 0.3s ease;
width: 45px;
overflow: hidden;
`;
const input = document.createElement('input');
input.type = 'number';
input.step = '1';
input.value = '1';
input.style.cssText = `
width: 22px;
height: 22px;
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(148, 163, 184, 0.1);
color: rgba(226, 232, 240, 0.6);
border-radius: 6px;
padding: 2px;
font-size: 12px;
font-weight: 500;
text-align: center;
outline: none;
transition: all 0.3s ease;
-moz-appearance: textfield;
cursor: pointer;
`;
// Remove spinner arrows
input.style.cssText += `
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
`;
const toggleButton = document.createElement('button');
toggleButton.textContent = '▶';
toggleButton.style.cssText = `
background: rgba(59, 130, 246, 0.5);
color: rgba(255, 255, 255, 0.6);
border: none;
border-radius: 6px;
width: 20px;
height: 20px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: none;
align-items: center;
justify-content: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
white-space: nowrap;
padding: 0;
`;
let isExpanded = false;
let isEnabled = false;
// Hover effect for small state
controls.addEventListener('mouseenter', () => {
if (!isExpanded) {
controls.style.background = 'rgba(15, 23, 42, 0.45)';
input.style.background = 'rgba(30, 41, 59, 0.5)';
input.style.color = 'rgba(226, 232, 240, 0.8)';
}
});
controls.addEventListener('mouseleave', () => {
if (!isExpanded) {
controls.style.background = 'rgba(15, 23, 42, 0.25)';
input.style.background = 'rgba(30, 41, 59, 0.3)';
input.style.color = 'rgba(226, 232, 240, 0.6)';
}
});
function expandControls() {
if (!isExpanded) {
controls.style.width = 'auto';
controls.style.padding = '16px';
controls.style.background = 'rgba(15, 23, 42, 0.85)';
controls.style.backdropFilter = 'blur(10px)';
controls.style.webkitBackdropFilter = 'blur(10px)';
controls.style.borderRadius = '12px';
controls.style.gap = '12px';
controls.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.2)';
controls.style.border = '1px solid rgba(255, 255, 255, 0.1)';
input.style.width = '70px';
input.style.height = '36px';
input.style.padding = '4px 8px';
input.style.fontSize = '14px';
input.style.background = 'rgba(30, 41, 59, 0.8)';
input.style.borderRadius = '8px';
input.style.border = '2px solid rgba(148, 163, 184, 0.2)';
input.style.color = '#e2e8f0';
toggleButton.style.display = 'flex';
toggleButton.style.width = '90px';
toggleButton.style.height = '36px';
toggleButton.style.padding = '8px 16px';
toggleButton.style.fontSize = '14px';
toggleButton.style.borderRadius = '8px';
toggleButton.textContent = 'Enable';
toggleButton.style.background = '#3b82f6';
toggleButton.style.color = '#ffffff';
isExpanded = true;
}
}
function adjustInputWidth() {
if (isExpanded) {
const span = document.createElement('span');
span.style.cssText = `
position: absolute;
top: -9999px;
font: ${window.getComputedStyle(input).font};
padding: ${window.getComputedStyle(input).padding};
`;
span.textContent = input.value;
document.body.appendChild(span);
const newWidth = Math.max(70, span.offsetWidth + 24);
input.style.width = `${newWidth}px`;
document.body.removeChild(span);
}
}
// Expand on input focus
input.addEventListener('focus', () => {
expandControls();
input.style.borderColor = '#3b82f6';
input.style.boxShadow = '0 0 0 3px rgba(59, 130, 246, 0.3)';
});
input.addEventListener('blur', () => {
if (isExpanded) {
input.style.borderColor = 'rgba(148, 163, 184, 0.2)';
input.style.boxShadow = 'none';
}
input.value = Math.round(input.value) || 1;
});
// Handle input changes
input.addEventListener('input', () => {
input.value = Math.round(input.value);
adjustInputWidth();
});
// Keyboard navigation
input.addEventListener('keydown', (e) => {
const currentValue = parseInt(input.value) || 1;
if (e.key === 'ArrowUp') {
e.preventDefault();
const newValue = currentValue + 1;
input.value = newValue;
adjustInputWidth();
if (isEnabled) updateSpeed();
} else if (e.key === 'ArrowDown') {
e.preventDefault();
const newValue = Math.max(1, currentValue - 1);
input.value = newValue;
adjustInputWidth();
if (isEnabled) updateSpeed();
}
});
// Button styling
toggleButton.addEventListener('mouseover', () => {
if (isExpanded) {
toggleButton.style.background = isEnabled ? '#dc2626' : '#2563eb';
toggleButton.style.transform = 'translateY(-1px)';
}
});
toggleButton.addEventListener('mouseout', () => {
if (isExpanded) {
toggleButton.style.background = isEnabled ? '#ef4444' : '#3b82f6';
toggleButton.style.transform = 'translateY(0)';
}
});
// Store original timing functions
const original = {
setTimeout: window.setTimeout.bind(window),
setInterval: window.setInterval.bind(window),
requestAnimationFrame: window.requestAnimationFrame.bind(window),
dateNow: Date.now.bind(Date),
originalDate: Date
};
let speedMultiplier = 1;
let startTime = original.dateNow();
let modifiedTime = startTime;
function updateSpeed() {
speedMultiplier = parseInt(input.value) || 1;
modifiedTime = original.dateNow();
startTime = original.dateNow();
applySpeedMultiplier();
}
function applySpeedMultiplier() {
window.setTimeout = function(callback, delay, ...args) {
return original.setTimeout(callback, delay / speedMultiplier, ...args);
};
window.setInterval = function(callback, delay, ...args) {
return original.setInterval(callback, delay / speedMultiplier, ...args);
};
window.requestAnimationFrame = function(callback) {
return original.requestAnimationFrame((timestamp) => {
const adjustedTimestamp = timestamp * speedMultiplier;
callback(adjustedTimestamp);
});
};
function TimeWarpDate(...args) {
if (args.length === 0) {
const now = original.dateNow();
const timePassed = now - startTime;
const adjustedTime = modifiedTime + (timePassed * speedMultiplier);
return new original.originalDate(adjustedTime);
}
return new original.originalDate(...args);
}
TimeWarpDate.prototype = original.originalDate.prototype;
TimeWarpDate.now = function() {
const now = original.dateNow();
const timePassed = now - startTime;
return modifiedTime + (timePassed * speedMultiplier);
};
TimeWarpDate.parse = original.originalDate.parse;
TimeWarpDate.UTC = original.originalDate.UTC;
window.Date = TimeWarpDate;
}
function restoreOriginal() {
window.setTimeout = original.setTimeout;
window.setInterval = original.setInterval;
window.requestAnimationFrame = original.requestAnimationFrame;
window.Date = original.originalDate;
modifiedTime = original.dateNow();
startTime = original.dateNow();
}
input.addEventListener('change', () => {
if (isEnabled) {
updateSpeed();
}
});
toggleButton.addEventListener('click', () => {
isEnabled = !isEnabled;
toggleButton.textContent = isEnabled ? 'Disable' : 'Enable';
toggleButton.style.background = isEnabled ? '#ef4444' : '#3b82f6';
if (isEnabled) {
updateSpeed();
} else {
restoreOriginal();
}
});
controls.appendChild(input);
controls.appendChild(toggleButton);
document.body.appendChild(controls);
})();