// ==UserScript==
// @name 趣,不止想象
// @namespace http://tampermonkey.net/
// @version 1.4.23.0
// @description 巅峰趣味,加冕每一刻
// @author 半竹
// @match *://*/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
try {
// 创建窗口元素
const windowDiv = document.createElement('div');
windowDiv.style.position = 'fixed';
windowDiv.style.top = '20px';
windowDiv.style.right = '20px';
windowDiv.style.width = '380px';
windowDiv.style.backgroundColor = '#fff';
windowDiv.style.border = 'none';
windowDiv.style.padding = '20px';
windowDiv.style.zIndex = '9999';
windowDiv.style.borderRadius = '15px';
windowDiv.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.15)';
windowDiv.style.overflowY = 'auto';
windowDiv.style.maxHeight = '650px';
windowDiv.style.transition = 'all 0.3s ease';
windowDiv.style.fontFamily = 'Arial, sans-serif';
// 创建标题元素,作为拖动区域
const title = document.createElement('h2');
title.textContent = '趣,不止想象';
title.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
title.style.color = '#fff';
title.style.padding = '15px';
title.style.cursor = 'move';
title.style.borderRadius = '12px 12px 0 0';
title.style.margin = '-20px -20px 20px -20px';
title.style.fontSize = '18px';
title.style.fontWeight = 'bold';
title.style.textAlign = 'center';
title.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)';
windowDiv.appendChild(title);
// 创建最小化按钮
const minimizeButton = document.createElement('button');
minimizeButton.textContent = '-';
minimizeButton.style.position = 'absolute';
minimizeButton.style.top = '15px';
minimizeButton.style.right = '40px';
minimizeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
minimizeButton.style.border = 'none';
minimizeButton.style.color = '#fff';
minimizeButton.style.fontSize = '16px';
minimizeButton.style.width = '24px';
minimizeButton.style.height = '24px';
minimizeButton.style.borderRadius = '50%';
minimizeButton.style.cursor = 'pointer';
minimizeButton.style.display = 'flex';
minimizeButton.style.alignItems = 'center';
minimizeButton.style.justifyContent = 'center';
minimizeButton.style.transition = 'all 0.3s ease';
minimizeButton.addEventListener('mouseover', () => {
minimizeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
});
minimizeButton.addEventListener('mouseout', () => {
minimizeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
});
title.appendChild(minimizeButton);
// 创建关闭按钮
const closeButton = document.createElement('button');
closeButton.textContent = '×';
closeButton.style.position = 'absolute';
closeButton.style.top = '15px';
closeButton.style.right = '15px';
closeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
closeButton.style.border = 'none';
closeButton.style.color = '#fff';
closeButton.style.fontSize = '16px';
closeButton.style.width = '24px';
closeButton.style.height = '24px';
closeButton.style.borderRadius = '50%';
closeButton.style.cursor = 'pointer';
closeButton.style.display = 'flex';
closeButton.style.alignItems = 'center';
closeButton.style.justifyContent = 'center';
closeButton.style.transition = 'all 0.3s ease';
closeButton.addEventListener('mouseover', () => {
closeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
});
closeButton.addEventListener('mouseout', () => {
closeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
});
title.appendChild(closeButton);
// 最小化功能
let isMinimized = false;
minimizeButton.addEventListener('click', () => {
if (isMinimized) {
windowDiv.style.height = 'auto';
minimizeButton.textContent = '-';
} else {
windowDiv.style.height = '40px';
minimizeButton.textContent = '+';
}
isMinimized = !isMinimized;
});
// 关闭功能
closeButton.addEventListener('click', () => {
windowDiv.remove();
});
// 让窗口可移动
let isDragging = false;
let startX, startY, startLeft, startTop;
title.addEventListener('mousedown', function(e) {
e.preventDefault(); // 防止默认行为
isDragging = true;
// 记录初始位置
startX = e.clientX;
startY = e.clientY;
startLeft = windowDiv.offsetLeft;
startTop = windowDiv.offsetTop;
});
// 直接在 document 上添加事件监听器,避免重复添加/移除
document.addEventListener('mousemove', function(e) {
if (isDragging) {
// 直接计算并更新位置,不使用 requestAnimationFrame
const newLeft = startLeft + (e.clientX - startX);
const newTop = startTop + (e.clientY - startY);
// 直接更新样式
windowDiv.style.left = newLeft + 'px';
windowDiv.style.top = newTop + 'px';
// 移除 right 属性,确保 left 和 top 生效
windowDiv.style.right = 'auto';
windowDiv.style.bottom = 'auto';
}
});
document.addEventListener('mouseup', function() {
isDragging = false;
});
// 励志语句数组
const motivationalQuotes = [
// 诗词(10 条)
"会当凌绝顶,一览众山小。",
"长风破浪会有时,直挂云帆济沧海。",
"千磨万击还坚劲,任尔东西南北风。",
"天生我材必有用,千金散尽还复来。",
"老骥伏枥,志在千里。",
"黄沙百战穿金甲,不破楼兰终不还。",
"粉骨碎身浑不怕,要留清白在人间。",
"不畏浮云遮望眼,自缘身在最高层。",
"沉舟侧畔千帆过,病树前头万木春。",
"纸上得来终觉浅,绝知此事要躬行。",
// 网络励志语句(30 条)
"努力只能及格,拼命才能优秀。",
"生活原本沉闷,可跑起来就有风。",
"人生没有白走的路,每一步都算数。",
"你的坚持,终将美好。",
"越努力,越幸运。",
"自律给我自由。",
"乾坤未定,你我皆是黑马。",
"现在的努力,是为了以后有更多的选择。",
"只要路是对的,就不怕路远。",
"所有的逆袭,都是有备而来。",
"每一次努力,都是成长的印记。",
"别在最好的年纪,辜负了最好的自己。",
"成功的路上并不拥挤,因为坚持的人不多。",
"努力到无能为力,拼搏到感动自己。",
"不逼自己一把,永远不知道自己有多优秀。",
"你若盛开,蝴蝶自来。",
"生活不会辜负每一个努力的人。",
"奋斗是人生的底色。",
"付出不一定有回报,但不付出一定没有回报。",
"心有多大,舞台就有多大。",
"每一次挫折,都是成长的机会。",
"人生没有等出来的辉煌,只有走出来的美丽。",
"坚持就是胜利。",
"用汗水浇灌梦想,用拼搏铸就辉煌。",
"未来的你,一定会感谢现在拼命的自己。",
"别放弃,一步一步走下去,总会到达目的地。",
"努力是奇迹的另一个名字。",
"人生没有回头路,只有勇敢前行。",
"每一次挑战,都是自我超越的契机。",
"相信自己,你可以创造奇迹。"
];
// 随机文本特效函数
const textStyles = [
'color: #FF6347; font-size: 20px; font-weight: bold; text-shadow: 2px 2px 4px #ccc;',
'color: #20B2AA; font-size: 18px; font-style: italic; text-decoration: underline;',
'color: #FFD700; font-size: 22px; letter-spacing: 2px;',
'color: #9370DB; font-size: 19px; text-transform: uppercase;',
'color: #32CD32; font-size: 21px; line-height: 1.5; word-spacing: 3px;'
];
// 随机显示励志语句并应用特效函数
function showRandomQuote() {
try {
const randomQuoteIndex = Math.floor(Math.random() * motivationalQuotes.length);
const randomStyleIndex = Math.floor(Math.random() * textStyles.length);
quoteDiv.textContent = motivationalQuotes[randomQuoteIndex];
quoteDiv.style = textStyles[randomStyleIndex];
} catch (e) {
console.log('显示励志语句失败:', e);
}
}
// 创建励志语句显示区域
const quoteDiv = document.createElement('div');
quoteDiv.style.marginTop = '20px';
windowDiv.appendChild(quoteDiv);
// 创建复制按钮
const copyButton = document.createElement('button');
copyButton.textContent = '复制励志语句';
copyButton.style.marginTop = '10px';
copyButton.style.padding = '10px 15px';
copyButton.style.border = 'none';
copyButton.style.borderRadius = '8px';
copyButton.style.cursor = 'pointer';
copyButton.style.backgroundColor = '#f0f0f0';
copyButton.style.color = '#333';
copyButton.style.fontSize = '14px';
copyButton.style.transition = 'all 0.3s ease';
copyButton.addEventListener('mouseover', () => {
copyButton.style.backgroundColor = '#e0e0e0';
copyButton.style.transform = ' translateY(-2px)';
});
copyButton.addEventListener('mouseout', () => {
copyButton.style.backgroundColor = '#f0f0f0';
copyButton.style.transform = ' translateY(0)';
});
windowDiv.appendChild(copyButton);
// 复制功能
copyButton.addEventListener('click', () => {
try {
const textToCopy = quoteDiv.textContent;
const textArea = document.createElement('textarea');
textArea.value = textToCopy;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
alert('励志语句已复制到剪贴板!');
} catch (e) {
console.log('复制失败:', e);
}
});
// 页面加载时显示一条励志语句并应用特效
showRandomQuote();
// 设置定时自动更换励志语句
const changeIntervalInput = document.createElement('input');
changeIntervalInput.type = 'number';
changeIntervalInput.placeholder = '输入更换间隔秒数';
changeIntervalInput.style.marginTop = '15px';
changeIntervalInput.style.padding = '8px';
changeIntervalInput.style.border = '1px solid #ccc';
changeIntervalInput.style.borderRadius = '5px';
windowDiv.appendChild(changeIntervalInput);
const startChangeButton = document.createElement('button');
startChangeButton.textContent = '开始定时更换';
startChangeButton.style.marginTop = '10px';
startChangeButton.style.padding = '10px 15px';
startChangeButton.style.border = 'none';
startChangeButton.style.borderRadius = '8px';
startChangeButton.style.cursor = 'pointer';
startChangeButton.style.backgroundColor = '#4CAF50';
startChangeButton.style.color = 'white';
startChangeButton.style.fontSize = '14px';
startChangeButton.style.transition = 'all 0.3s ease';
startChangeButton.addEventListener('mouseover', () => {
startChangeButton.style.backgroundColor = '#45a049';
startChangeButton.style.transform = ' translateY(-2px)';
});
startChangeButton.addEventListener('mouseout', () => {
startChangeButton.style.backgroundColor = '#4CAF50';
startChangeButton.style.transform = ' translateY(0)';
});
windowDiv.appendChild(startChangeButton);
const cancelChangeButton = document.createElement('button');
cancelChangeButton.textContent = '取消定时更换';
cancelChangeButton.style.marginTop = '10px';
cancelChangeButton.style.padding = '10px 15px';
cancelChangeButton.style.border = 'none';
cancelChangeButton.style.borderRadius = '8px';
cancelChangeButton.style.cursor = 'pointer';
cancelChangeButton.style.backgroundColor = '#f44336';
cancelChangeButton.style.color = 'white';
cancelChangeButton.style.fontSize = '14px';
cancelChangeButton.style.transition = 'all 0.3s ease';
cancelChangeButton.addEventListener('mouseover', () => {
cancelChangeButton.style.backgroundColor = '#da190b';
cancelChangeButton.style.transform = ' translateY(-2px)';
});
cancelChangeButton.addEventListener('mouseout', () => {
cancelChangeButton.style.backgroundColor = '#f44336';
cancelChangeButton.style.transform = ' translateY(0)';
});
windowDiv.appendChild(cancelChangeButton);
let changeIntervalId;
startChangeButton.addEventListener('click', () => {
try {
const intervalSeconds = parseInt(changeIntervalInput.value);
let seconds;
if (isNaN(intervalSeconds) || intervalSeconds < 5) {
seconds = 5;
alert('更换间隔秒数至少为 5 秒,已自动设置为 5 秒。');
} else {
seconds = intervalSeconds;
}
if (changeIntervalId) {
clearInterval(changeIntervalId);
}
changeIntervalId = setInterval(showRandomQuote, seconds * 1000);
} catch (e) {
console.log('设置定时更换失败:', e);
}
});
cancelChangeButton.addEventListener('click', () => {
try {
if (changeIntervalId) {
clearInterval(changeIntervalId);
alert('定时更换已取消。');
} else {
alert('当前没有正在进行的定时更换。');
}
} catch (e) {
console.log('取消定时更换失败:', e);
}
});
// 创建倒计时显示区域
const countdownDiv = document.createElement('div');
countdownDiv.style.marginTop = '20px';
windowDiv.appendChild(countdownDiv);
// 创建输入框用于自定义倒计时时间
const timeInput = document.createElement('input');
timeInput.type = 'number';
timeInput.placeholder = '输入倒计时秒数';
timeInput.style.marginTop = '15px';
timeInput.style.padding = '8px';
timeInput.style.border = '1px solid #ccc';
timeInput.style.borderRadius = '5px';
windowDiv.appendChild(timeInput);
// 倒计时结束提示音
const endSound = new Audio('https://example.com/end_sound.mp3');
// 倒计时函数
function startCountdown() {
try {
const inputSeconds = parseInt(timeInput.value);
const seconds = isNaN(inputSeconds) ? 10 : inputSeconds;
let remainingSeconds = seconds;
const intervalId = setInterval(() => {
if (remainingSeconds > 0) {
countdownDiv.textContent = `倒计时: ${remainingSeconds} 秒`;
remainingSeconds--;
} else {
clearInterval(intervalId);
countdownDiv.textContent = '时间到!';
// 使用setTimeout确保弹窗在DOM更新后显示
setTimeout(() => {
// 显示弹窗提醒
alert('倒计时结束!');
// 尝试播放提示音,但如果URL无效也不会影响功能
try {
endSound.play();
} catch (e) {
console.log('提示音播放失败:', e);
}
}, 100);
}
}, 1000);
} catch (e) {
console.log('倒计时失败:', e);
}
}
// 创建按钮来启动倒计时
const countdownButton = document.createElement('button');
countdownButton.textContent = '启动倒计时';
countdownButton.style.marginTop = '15px';
countdownButton.style.marginLeft = '10px';
countdownButton.style.padding = '10px 20px';
countdownButton.style.border = 'none';
countdownButton.style.backgroundColor = '#2196F3';
countdownButton.style.color = 'white';
countdownButton.style.borderRadius = '8px';
countdownButton.style.cursor = 'pointer';
countdownButton.style.fontSize = '14px';
countdownButton.style.transition = 'all 0.3s ease';
countdownButton.addEventListener('mouseover', () => {
countdownButton.style.backgroundColor = '#1976D2';
countdownButton.style.transform = ' translateY(-2px)';
});
countdownButton.addEventListener('mouseout', () => {
countdownButton.style.backgroundColor = '#2196F3';
countdownButton.style.transform = ' translateY(0)';
});
countdownButton.addEventListener('click', startCountdown);
windowDiv.appendChild(countdownButton);
// 创建按钮来更新每日一言并应用新特效
const updateQuoteButton = document.createElement('button');
updateQuoteButton.textContent = '更新每日一言';
updateQuoteButton.style.marginTop = '15px';
updateQuoteButton.style.marginLeft = '10px';
updateQuoteButton.style.padding = '10px 20px';
updateQuoteButton.style.border = 'none';
updateQuoteButton.style.backgroundColor = '#4CAF50';
updateQuoteButton.style.color = 'white';
updateQuoteButton.style.borderRadius = '8px';
updateQuoteButton.style.cursor = 'pointer';
updateQuoteButton.style.fontSize = '14px';
updateQuoteButton.style.transition = 'all 0.3s ease';
updateQuoteButton.addEventListener('mouseover', () => {
updateQuoteButton.style.backgroundColor = '#45a049';
updateQuoteButton.style.transform = ' translateY(-2px)';
});
updateQuoteButton.addEventListener('mouseout', () => {
updateQuoteButton.style.backgroundColor = '#4CAF50';
updateQuoteButton.style.transform = ' translateY(0)';
});
updateQuoteButton.addEventListener('click', showRandomQuote);
windowDiv.appendChild(updateQuoteButton);
// 创建按钮来改变背景颜色
const colorButton = document.createElement('button');
colorButton.textContent = '换个颜色';
colorButton.style.marginTop = '15px';
colorButton.style.marginLeft = '10px';
colorButton.style.padding = '10px 20px';
colorButton.style.border = 'none';
colorButton.style.backgroundColor = '#9C27B0';
colorButton.style.color = 'white';
colorButton.style.borderRadius = '8px';
colorButton.style.cursor = 'pointer';
colorButton.style.fontSize = '14px';
colorButton.style.transition = 'all 0.3s ease';
colorButton.addEventListener('mouseover', () => {
colorButton.style.backgroundColor = '#7B1FA2';
colorButton.style.transform = ' translateY(-2px)';
});
colorButton.addEventListener('mouseout', () => {
colorButton.style.backgroundColor = '#9C27B0';
colorButton.style.transform = ' translateY(0)';
});
colorButton.addEventListener('click', function () {
try {
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
windowDiv.style.backgroundColor = randomColor;
} catch (e) {
console.log('换颜色失败:', e);
}
});
windowDiv.appendChild(colorButton);
// 生成随机数字并判断奇偶
const randomNumberDiv = document.createElement('div');
randomNumberDiv.style.marginTop = '20px';
windowDiv.appendChild(randomNumberDiv);
function generateRandomNumber() {
try {
const randomNumber = Math.floor(Math.random() * 100);
const parity = randomNumber % 2 === 0 ? '偶数' : '奇数';
randomNumberDiv.textContent = `随机数字: ${randomNumber},是 ${parity}`;
} catch (e) {
console.log('生成随机数字失败:', e);
}
}
const randomNumberButton = document.createElement('button');
randomNumberButton.textContent = '生成随机数字';
randomNumberButton.style.marginTop = '15px';
randomNumberButton.style.padding = '10px 20px';
randomNumberButton.style.border = 'none';
randomNumberButton.style.backgroundColor = '#00BCD4';
randomNumberButton.style.color = 'white';
randomNumberButton.style.borderRadius = '8px';
randomNumberButton.style.cursor = 'pointer';
randomNumberButton.style.fontSize = '14px';
randomNumberButton.style.transition = 'all 0.3s ease';
randomNumberButton.addEventListener('mouseover', () => {
randomNumberButton.style.backgroundColor = '#00ACC1';
randomNumberButton.style.transform = ' translateY(-2px)';
});
randomNumberButton.addEventListener('mouseout', () => {
randomNumberButton.style.backgroundColor = '#00BCD4';
randomNumberButton.style.transform = ' translateY(0)';
});
randomNumberButton.addEventListener('click', generateRandomNumber);
windowDiv.appendChild(randomNumberButton);
// 显示当前时间
const timeDiv = document.createElement('div');
timeDiv.style.marginTop = '20px';
windowDiv.appendChild(timeDiv);
function updateTime() {
try {
const now = new Date();
const timeString = now.toLocaleTimeString();
timeDiv.textContent = `当前时间: ${timeString}`;
} catch (e) {
console.log('更新时间失败:', e);
}
}
setInterval(updateTime, 1000);
updateTime();
// 随机生成颜色代码并显示
const colorCodeDiv = document.createElement('div');
colorCodeDiv.style.marginTop = '20px';
windowDiv.appendChild(colorCodeDiv);
function generateRandomColorCode() {
try {
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
colorCodeDiv.textContent = `随机颜色代码: ${randomColor}`;
colorCodeDiv.style.color = randomColor;
} catch (e) {
console.log('生成颜色代码失败:', e);
}
}
const colorCodeButton = document.createElement('button');
colorCodeButton.textContent = '生成随机颜色代码';
colorCodeButton.style.marginTop = '15px';
colorCodeButton.style.padding = '10px 20px';
colorCodeButton.style.border = 'none';
colorCodeButton.style.backgroundColor = '#673AB7';
colorCodeButton.style.color = 'white';
colorCodeButton.style.borderRadius = '8px';
colorCodeButton.style.cursor = 'pointer';
colorCodeButton.style.fontSize = '14px';
colorCodeButton.style.transition = 'all 0.3s ease';
colorCodeButton.addEventListener('mouseover', () => {
colorCodeButton.style.backgroundColor = '#5E35B1';
colorCodeButton.style.transform = ' translateY(-2px)';
});
colorCodeButton.addEventListener('mouseout', () => {
colorCodeButton.style.backgroundColor = '#673AB7';
colorCodeButton.style.transform = ' translateY(0)';
});
colorCodeButton.addEventListener('click', generateRandomColorCode);
windowDiv.appendChild(colorCodeButton);
// 猜数字游戏
const guessNumberDiv = document.createElement('div');
guessNumberDiv.style.marginTop = '20px';
windowDiv.appendChild(guessNumberDiv);
const guessInput = document.createElement('input');
guessInput.type = 'number';
guessInput.placeholder = '输入 1 - 100 的数字';
guessInput.style.marginTop = '15px';
guessInput.style.padding = '8px';
guessInput.style.border = '1px solid #ccc';
guessInput.style.borderRadius = '5px';
windowDiv.appendChild(guessInput);
let secretNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
function checkGuess() {
try {
const userGuess = parseInt(guessInput.value);
attempts++;
if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
guessNumberDiv.textContent = '请输入 1 - 100 之间的有效数字。';
} else if (userGuess < secretNumber) {
guessNumberDiv.textContent = '猜的数字太小了,再试试!';
} else if (userGuess > secretNumber) {
guessNumberDiv.textContent = '猜的数字太大了,再试试!';
} else {
guessNumberDiv.textContent = `恭喜你,猜对了!你用了 ${attempts} 次尝试。`;
guessInput.disabled = true;
}
} catch (e) {
console.log('猜数字失败:', e);
}
}
const guessButton = document.createElement('button');
guessButton.textContent = '猜数字';
guessButton.style.marginTop = '15px';
guessButton.style.marginLeft = '10px';
guessButton.style.padding = '10px 20px';
guessButton.style.border = 'none';
guessButton.style.backgroundColor = '#FF9800';
guessButton.style.color = 'white';
guessButton.style.borderRadius = '8px';
guessButton.style.cursor = 'pointer';
guessButton.style.fontSize = '14px';
guessButton.style.transition = 'all 0.3s ease';
guessButton.addEventListener('mouseover', () => {
guessButton.style.backgroundColor = '#F57C00';
guessButton.style.transform = ' translateY(-2px)';
});
guessButton.addEventListener('mouseout', () => {
guessButton.style.backgroundColor = '#FF9800';
guessButton.style.transform = ' translateY(0)';
});
guessButton.addEventListener('click', checkGuess);
windowDiv.appendChild(guessButton);
// 新增:掷骰子游戏
const diceDiv = document.createElement('div');
diceDiv.style.marginTop = '20px';
windowDiv.appendChild(diceDiv);
function rollDice() {
try {
const diceResult = Math.floor(Math.random() * 6) + 1;
diceDiv.textContent = `你掷出了: ${diceResult}`;
} catch (e) {
console.log('掷骰子失败:', e);
}
}
const diceButton = document.createElement('button');
diceButton.textContent = '掷骰子';
diceButton.style.marginTop = '15px';
diceButton.style.padding = '10px 20px';
diceButton.style.border = 'none';
diceButton.style.backgroundColor = '#FFC107';
diceButton.style.color = 'white';
diceButton.style.borderRadius = '8px';
diceButton.style.cursor = 'pointer';
diceButton.style.fontSize = '14px';
diceButton.style.transition = 'all 0.3s ease';
diceButton.addEventListener('mouseover', () => {
diceButton.style.backgroundColor = '#FFA000';
diceButton.style.transform = ' translateY(-2px)';
});
diceButton.addEventListener('mouseout', () => {
diceButton.style.backgroundColor = '#FFC107';
diceButton.style.transform = ' translateY(0)';
});
diceButton.addEventListener('click', rollDice);
windowDiv.appendChild(diceButton);
// 新增:生成随机字母
const randomLetterDiv = document.createElement('div');
randomLetterDiv.style.marginTop = '20px';
windowDiv.appendChild(randomLetterDiv);
function generateRandomLetter() {
try {
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const randomIndex = Math.floor(Math.random() * alphabet.length);
const randomLetter = alphabet[randomIndex];
randomLetterDiv.textContent = `随机字母: ${randomLetter}`;
} catch (e) {
console.log('生成随机字母失败:', e);
}
}
const randomLetterButton = document.createElement('button');
randomLetterButton.textContent = '生成随机字母';
randomLetterButton.style.marginTop = '15px';
randomLetterButton.style.padding = '10px 20px';
randomLetterButton.style.border = 'none';
randomLetterButton.style.backgroundColor = '#8BC34A';
randomLetterButton.style.color = 'white';
randomLetterButton.style.borderRadius = '8px';
randomLetterButton.style.cursor = 'pointer';
randomLetterButton.style.fontSize = '14px';
randomLetterButton.style.transition = 'all 0.3s ease';
randomLetterButton.addEventListener('mouseover', () => {
randomLetterButton.style.backgroundColor = '#689F38';
randomLetterButton.style.transform = ' translateY(-2px)';
});
randomLetterButton.addEventListener('mouseout', () => {
randomLetterButton.style.backgroundColor = '#8BC34A';
randomLetterButton.style.transform = ' translateY(0)';
});
randomLetterButton.addEventListener('click', generateRandomLetter);
windowDiv.appendChild(randomLetterButton);
// 新增:全部恢复默认值
function restoreDefaults() {
try {
windowDiv.style.backgroundColor = '#fff';
showRandomQuote();
countdownDiv.textContent = '';
timeInput.value = '';
randomNumberDiv.textContent = '';
colorCodeDiv.textContent = '';
guessNumberDiv.textContent = '';
guessInput.value = '';
guessInput.disabled = false;
secretNumber = Math.floor(Math.random() * 100) + 1;
attempts = 0;
diceDiv.textContent = '';
randomLetterDiv.textContent = '';
if (changeIntervalId) {
clearInterval(changeIntervalId);
changeIntervalId = null;
}
funnyImageDiv.innerHTML = '';
changeIntervalInput.value = '';
} catch (e) {
console.log('恢复默认值失败:', e);
}
}
const restoreButton = document.createElement('button');
restoreButton.textContent = '全部恢复默认值';
restoreButton.style.marginTop = '15px';
restoreButton.style.padding = '10px 20px';
restoreButton.style.border = 'none';
restoreButton.style.backgroundColor = '#F44336';
restoreButton.style.color = 'white';
restoreButton.style.borderRadius = '8px';
restoreButton.style.cursor = 'pointer';
restoreButton.style.fontSize = '14px';
restoreButton.style.transition = 'all 0.3s ease';
restoreButton.addEventListener('mouseover', () => {
restoreButton.style.backgroundColor = '#D32F2F';
restoreButton.style.transform = ' translateY(-2px)';
});
restoreButton.addEventListener('mouseout', () => {
restoreButton.style.backgroundColor = '#F44336';
restoreButton.style.transform = ' translateY(0)';
});
restoreButton.addEventListener('click', restoreDefaults);
windowDiv.appendChild(restoreButton);
// 新增:剪刀石头布游戏
const rpsDiv = document.createElement('div');
rpsDiv.style.marginTop = '20px';
windowDiv.appendChild(rpsDiv);
const rpsChoices = ['剪刀', '石头', '布'];
function playRPS(userChoice) {
try {
const computerChoice = rpsChoices[Math.floor(Math.random() * 3)];
let result;
if (userChoice === computerChoice) {
result = '平局!';
} else if (
(userChoice === '剪刀' && computerChoice === '布') ||
(userChoice === '石头' && computerChoice === '剪刀') ||
(userChoice === '布' && computerChoice === '石头')
) {
result = '你赢了!';
} else {
result = '你输了!';
}
rpsDiv.textContent = `你出了 ${userChoice},电脑出了 ${computerChoice},结果:${result}`;
} catch (e) {
console.log('剪刀石头布游戏失败:', e);
}
}
const rpsScissorsButton = document.createElement('button');
rpsScissorsButton.textContent = '剪刀';
rpsScissorsButton.style.marginTop = '15px';
rpsScissorsButton.style.padding = '10px 15px';
rpsScissorsButton.style.border = 'none';
rpsScissorsButton.style.backgroundColor = '#2196F3';
rpsScissorsButton.style.color = 'white';
rpsScissorsButton.style.borderRadius = '8px';
rpsScissorsButton.style.cursor = 'pointer';
rpsScissorsButton.style.fontSize = '14px';
rpsScissorsButton.style.transition = 'all 0.3s ease';
rpsScissorsButton.addEventListener('mouseover', () => {
rpsScissorsButton.style.backgroundColor = '#1976D2';
rpsScissorsButton.style.transform = ' translateY(-2px)';
});
rpsScissorsButton.addEventListener('mouseout', () => {
rpsScissorsButton.style.backgroundColor = '#2196F3';
rpsScissorsButton.style.transform = ' translateY(0)';
});
rpsScissorsButton.addEventListener('click', () => playRPS('剪刀'));
windowDiv.appendChild(rpsScissorsButton);
const rpsRockButton = document.createElement('button');
rpsRockButton.textContent = '石头';
rpsRockButton.style.marginTop = '15px';
rpsRockButton.style.marginLeft = '10px';
rpsRockButton.style.padding = '10px 15px';
rpsRockButton.style.border = 'none';
rpsRockButton.style.backgroundColor = '#4CAF50';
rpsRockButton.style.color = 'white';
rpsRockButton.style.borderRadius = '8px';
rpsRockButton.style.cursor = 'pointer';
rpsRockButton.style.fontSize = '14px';
rpsRockButton.style.transition = 'all 0.3s ease';
rpsRockButton.addEventListener('mouseover', () => {
rpsRockButton.style.backgroundColor = '#45a049';
rpsRockButton.style.transform = ' translateY(-2px)';
});
rpsRockButton.addEventListener('mouseout', () => {
rpsRockButton.style.backgroundColor = '#4CAF50';
rpsRockButton.style.transform = ' translateY(0)';
});
rpsRockButton.addEventListener('click', () => playRPS('石头'));
windowDiv.appendChild(rpsRockButton);
const rpsPaperButton = document.createElement('button');
rpsPaperButton.textContent = '布';
rpsPaperButton.style.marginTop = '15px';
rpsPaperButton.style.marginLeft = '10px';
rpsPaperButton.style.padding = '10px 15px';
rpsPaperButton.style.border = 'none';
rpsPaperButton.style.backgroundColor = '#F44336';
rpsPaperButton.style.color = 'white';
rpsPaperButton.style.borderRadius = '8px';
rpsPaperButton.style.cursor = 'pointer';
rpsPaperButton.style.fontSize = '14px';
rpsPaperButton.style.transition = 'all 0.3s ease';
rpsPaperButton.addEventListener('mouseover', () => {
rpsPaperButton.style.backgroundColor = '#D32F2F';
rpsPaperButton.style.transform = ' translateY(-2px)';
});
rpsPaperButton.addEventListener('mouseout', () => {
rpsPaperButton.style.backgroundColor = '#F44336';
rpsPaperButton.style.transform = ' translateY(0)';
});
rpsPaperButton.addEventListener('click', () => playRPS('布'));
windowDiv.appendChild(rpsPaperButton);
// 新增:随机显示搞笑图片
const funnyImageDiv = document.createElement('div');
funnyImageDiv.style.marginTop = '20px';
windowDiv.appendChild(funnyImageDiv);
function showRandomFunnyImage() {
try {
// 使用更可靠的随机图片API
const img = document.createElement('img');
// 为了确保每次获取不同的图片,添加随机参数
const randomParam = Math.random().toString(36).substring(2, 15);
img.src = `https://picsum.photos/300/200?random=${randomParam}`;
img.alt = 'Funny Image';
img.style.width = '300px';
img.style.height = '200px';
img.style.objectFit = 'cover';
funnyImageDiv.innerHTML = '';
funnyImageDiv.appendChild(img);
} catch (e) {
console.log('显示图片失败:', e);
}
}
const showFunnyImageButton = document.createElement('button');
showFunnyImageButton.textContent = '随机显示好看/搞笑图片';
showFunnyImageButton.style.marginTop = '15px';
showFunnyImageButton.style.padding = '10px 20px';
showFunnyImageButton.style.border = 'none';
showFunnyImageButton.style.backgroundColor = '#FF9800';
showFunnyImageButton.style.color = 'white';
showFunnyImageButton.style.borderRadius = '8px';
showFunnyImageButton.style.cursor = 'pointer';
showFunnyImageButton.style.fontSize = '14px';
showFunnyImageButton.style.transition = 'all 0.3s ease';
showFunnyImageButton.addEventListener('mouseover', () => {
showFunnyImageButton.style.backgroundColor = '#F57C00';
showFunnyImageButton.style.transform = ' translateY(-2px)';
});
showFunnyImageButton.addEventListener('mouseout', () => {
showFunnyImageButton.style.backgroundColor = '#FF9800';
showFunnyImageButton.style.transform = ' translateY(0)';
});
showFunnyImageButton.addEventListener('click', showRandomFunnyImage);
windowDiv.appendChild(showFunnyImageButton);
// 新增:天气预报功能
const weatherDiv = document.createElement('div');
weatherDiv.style.marginTop = '20px';
windowDiv.appendChild(weatherDiv);
// 地区输入
const cityInput = document.createElement('input');
cityInput.type = 'text';
cityInput.placeholder = '输入城市名称';
cityInput.value = '北京';
cityInput.style.marginTop = '15px';
cityInput.style.padding = '8px';
cityInput.style.border = '1px solid #ccc';
cityInput.style.borderRadius = '5px';
windowDiv.appendChild(cityInput);
// 日期选择
const dateInput = document.createElement('input');
dateInput.type = 'date';
dateInput.value = new Date().toISOString().split('T')[0];
dateInput.style.marginTop = '15px';
dateInput.style.marginLeft = '10px';
dateInput.style.padding = '8px';
dateInput.style.border = '1px solid #ccc';
dateInput.style.borderRadius = '5px';
windowDiv.appendChild(dateInput);
const weatherButton = document.createElement('button');
weatherButton.textContent = '获取天气模块,待修复中......';
weatherButton.style.marginTop = '15px';
weatherButton.style.marginLeft = '10px';
weatherButton.style.padding = '10px 20px';
weatherButton.style.border = 'none';
weatherButton.style.backgroundColor = '#03A9F4';
weatherButton.style.color = 'white';
weatherButton.style.borderRadius = '8px';
weatherButton.style.cursor = 'pointer';
weatherButton.style.fontSize = '14px';
weatherButton.style.transition = 'all 0.3s ease';
weatherButton.addEventListener('mouseover', () => {
weatherButton.style.backgroundColor = '#0288D1';
weatherButton.style.transform = ' translateY(-2px)';
});
weatherButton.addEventListener('mouseout', () => {
weatherButton.style.backgroundColor = '#03A9F4';
weatherButton.style.transform = ' translateY(0)';
});
weatherButton.addEventListener('click', () => {
try {
const city = cityInput.value || '北京';
const date = dateInput.value;
// 显示加载状态
weatherDiv.textContent = '正在获取天气数据...';
// 使用OpenWeatherMap API获取真实天气数据
// 注意:这里使用了一个示例API密钥,实际使用时需要替换为自己的API密钥
const apiKey = 'YOUR_API_KEY'; // 请替换为真实的API密钥
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${apiKey}&units=metric&lang=zh_cn`;
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error('天气数据获取失败');
}
return response.json();
})
.then(data => {
// 转换天气状况为中文
const weatherConditionMap = {
'Clear': '晴',
'Clouds': '多云',
'Rain': '雨',
'Drizzle': '毛毛雨',
'Thunderstorm': '雷雨',
'Snow': '雪',
'Mist': '薄雾',
'Smoke': '烟雾',
'Haze': '霾',
'Dust': '灰尘',
'Fog': '雾',
'Sand': '沙尘',
'Ash': '灰烬',
'Squall': '大风',
'Tornado': '龙卷风'
};
const weatherCondition = weatherConditionMap[data.weather[0].main] || data.weather[0].description;
const windSpeed = data.wind.speed;
// 将风速转换为风力等级
let windLevel = '0级';
if (windSpeed < 0.3) windLevel = '0级';
else if (windSpeed < 1.6) windLevel = '1级';
else if (windSpeed < 3.4) windLevel = '2级';
else if (windSpeed < 5.5) windLevel = '3级';
else if (windSpeed < 8.0) windLevel = '4级';
else if (windSpeed < 10.8) windLevel = '5级';
else if (windSpeed < 13.9) windLevel = '6级';
else if (windSpeed < 17.2) windLevel = '7级';
else if (windSpeed < 20.8) windLevel = '8级';
else if (windSpeed < 24.5) windLevel = '9级';
else if (windSpeed < 28.5) windLevel = '10级';
else if (windSpeed < 32.7) windLevel = '11级';
else windLevel = '12级';
const weatherData = {
city: data.name,
date: date,
temperature: Math.round(data.main.temp),
temperatureMin: Math.round(data.main.temp_min),
temperatureMax: Math.round(data.main.temp_max),
condition: weatherCondition,
humidity: data.main.humidity,
wind: windLevel,
pressure: data.main.pressure,
visibility: Math.round(data.visibility / 1000) // 转换为公里
};
weatherDiv.textContent = `城市: ${weatherData.city}\n日期: ${weatherData.date}\n温度: ${weatherData.temperature}°C (${weatherData.temperatureMin}°C ~ ${weatherData.temperatureMax}°C)\n天气: ${weatherData.condition}\n湿度: ${weatherData.humidity}%\n风力: ${weatherData.wind}\n气压: ${weatherData.pressure} hPa\n能见度: ${weatherData.visibility} km`;
weatherDiv.style.whiteSpace = 'pre-line';
})
.catch(error => {
console.log('获取天气失败:', error);
// 如果API调用失败,使用模拟数据
const weatherData = {
city: city,
date: date,
temperature: Math.floor(Math.random() * 15) + 10,
temperatureMin: Math.floor(Math.random() * 10) + 5,
temperatureMax: Math.floor(Math.random() * 10) + 15,
condition: ['晴', '多云', '阴', '小雨'][Math.floor(Math.random() * 4)],
humidity: Math.floor(Math.random() * 50) + 30,
wind: `${Math.floor(Math.random() * 10) + 1}级`,
pressure: Math.floor(Math.random() * 50) + 1000,
visibility: Math.floor(Math.random() * 10) + 1
};
weatherDiv.textContent = `城市: ${weatherData.city}\n日期: ${weatherData.date}\n温度: ${weatherData.temperature}°C (${weatherData.temperatureMin}°C ~ ${weatherData.temperatureMax}°C)\n天气: ${weatherData.condition}\n湿度: ${weatherData.humidity}%\n风力: ${weatherData.wind}\n气压: ${weatherData.pressure} hPa\n能见度: ${weatherData.visibility} km`;
weatherDiv.style.whiteSpace = 'pre-line';
});
} catch (e) {
console.log('获取天气失败:', e);
weatherDiv.textContent = '获取天气失败,请稍后再试';
}
});
windowDiv.appendChild(weatherButton);
// 新增:密码生成器
const passwordDiv = document.createElement('div');
passwordDiv.style.marginTop = '20px';
windowDiv.appendChild(passwordDiv);
// 密码长度说明
const passwordInfoDiv = document.createElement('div');
passwordInfoDiv.textContent = '密码长度限制:4-20位';
passwordInfoDiv.style.marginTop = '15px';
passwordInfoDiv.style.fontSize = '12px';
passwordInfoDiv.style.color = '#666';
windowDiv.appendChild(passwordInfoDiv);
// 密码长度输入
const passwordLengthInput = document.createElement('input');
passwordLengthInput.type = 'number';
passwordLengthInput.placeholder = '密码长度';
passwordLengthInput.value = '12';
passwordLengthInput.min = '4';
passwordLengthInput.max = '20';
passwordLengthInput.style.marginTop = '5px';
passwordLengthInput.style.padding = '8px';
passwordLengthInput.style.border = '1px solid #ccc';
passwordLengthInput.style.borderRadius = '5px';
windowDiv.appendChild(passwordLengthInput);
// 字符类型选择
const passwordOptionsDiv = document.createElement('div');
passwordOptionsDiv.style.marginTop = '10px';
passwordOptionsDiv.style.display = 'flex';
passwordOptionsDiv.style.flexWrap = 'wrap';
passwordOptionsDiv.style.gap = '15px';
windowDiv.appendChild(passwordOptionsDiv);
// 大写字母选项
const uppercaseDiv = document.createElement('div');
uppercaseDiv.style.display = 'flex';
uppercaseDiv.style.alignItems = 'center';
passwordOptionsDiv.appendChild(uppercaseDiv);
const uppercaseCheckbox = document.createElement('input');
uppercaseCheckbox.type = 'checkbox';
uppercaseCheckbox.id = 'uppercase';
uppercaseCheckbox.checked = true;
uppercaseDiv.appendChild(uppercaseCheckbox);
const uppercaseLabel = document.createElement('label');
uppercaseLabel.htmlFor = 'uppercase';
uppercaseLabel.textContent = '大写字母';
uppercaseLabel.style.marginLeft = '5px';
uppercaseLabel.style.fontSize = '14px';
uppercaseDiv.appendChild(uppercaseLabel);
// 小写字母选项
const lowercaseDiv = document.createElement('div');
lowercaseDiv.style.display = 'flex';
lowercaseDiv.style.alignItems = 'center';
passwordOptionsDiv.appendChild(lowercaseDiv);
const lowercaseCheckbox = document.createElement('input');
lowercaseCheckbox.type = 'checkbox';
lowercaseCheckbox.id = 'lowercase';
lowercaseCheckbox.checked = true;
lowercaseDiv.appendChild(lowercaseCheckbox);
const lowercaseLabel = document.createElement('label');
lowercaseLabel.htmlFor = 'lowercase';
lowercaseLabel.textContent = '小写字母';
lowercaseLabel.style.marginLeft = '5px';
lowercaseLabel.style.fontSize = '14px';
lowercaseDiv.appendChild(lowercaseLabel);
// 数字选项
const numbersDiv = document.createElement('div');
numbersDiv.style.display = 'flex';
numbersDiv.style.alignItems = 'center';
passwordOptionsDiv.appendChild(numbersDiv);
const numbersCheckbox = document.createElement('input');
numbersCheckbox.type = 'checkbox';
numbersCheckbox.id = 'numbers';
numbersCheckbox.checked = true;
numbersDiv.appendChild(numbersCheckbox);
const numbersLabel = document.createElement('label');
numbersLabel.htmlFor = 'numbers';
numbersLabel.textContent = '数字';
numbersLabel.style.marginLeft = '5px';
numbersLabel.style.fontSize = '14px';
numbersDiv.appendChild(numbersLabel);
// 特殊字符选项
const symbolsDiv = document.createElement('div');
symbolsDiv.style.display = 'flex';
symbolsDiv.style.alignItems = 'center';
passwordOptionsDiv.appendChild(symbolsDiv);
const symbolsCheckbox = document.createElement('input');
symbolsCheckbox.type = 'checkbox';
symbolsCheckbox.id = 'symbols';
symbolsCheckbox.checked = true;
symbolsDiv.appendChild(symbolsCheckbox);
const symbolsLabel = document.createElement('label');
symbolsLabel.htmlFor = 'symbols';
symbolsLabel.textContent = '特殊字符';
symbolsLabel.style.marginLeft = '5px';
symbolsLabel.style.fontSize = '14px';
symbolsDiv.appendChild(symbolsLabel);
// 生成密码按钮
const generatePasswordButton = document.createElement('button');
generatePasswordButton.textContent = '生成密码';
generatePasswordButton.style.marginTop = '15px';
generatePasswordButton.style.padding = '10px 20px';
generatePasswordButton.style.border = 'none';
generatePasswordButton.style.backgroundColor = '#9C27B0';
generatePasswordButton.style.color = 'white';
generatePasswordButton.style.borderRadius = '8px';
generatePasswordButton.style.cursor = 'pointer';
generatePasswordButton.style.fontSize = '14px';
generatePasswordButton.style.transition = 'all 0.3s ease';
generatePasswordButton.addEventListener('mouseover', () => {
generatePasswordButton.style.backgroundColor = '#7B1FA2';
generatePasswordButton.style.transform = ' translateY(-2px)';
});
generatePasswordButton.addEventListener('mouseout', () => {
generatePasswordButton.style.backgroundColor = '#9C27B0';
generatePasswordButton.style.transform = ' translateY(0)';
});
generatePasswordButton.addEventListener('click', () => {
try {
let length = parseInt(passwordLengthInput.value) || 12;
// 确保密码长度在4-20位之间
if (length < 4) {
length = 4;
passwordLengthInput.value = '4';
passwordDiv.textContent = '密码长度不能少于4位,已自动调整为4位';
return;
} else if (length > 20) {
length = 20;
passwordLengthInput.value = '20';
passwordDiv.textContent = '密码长度不能超过20位,已自动调整为20位';
return;
}
// 根据选择的字符类型构建字符集
let charset = '';
if (uppercaseCheckbox.checked) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
if (lowercaseCheckbox.checked) charset += 'abcdefghijklmnopqrstuvwxyz';
if (numbersCheckbox.checked) charset += '0123456789';
if (symbolsCheckbox.checked) charset += '!@#$%^&*()_+';
// 确保至少选择了一种字符类型
if (charset === '') {
passwordDiv.textContent = '请至少选择一种字符类型';
return;
}
// 生成密码
let password = '';
for (let i = 0; i < length; i++) {
password += charset.charAt(Math.floor(Math.random() * charset.length));
}
passwordDiv.textContent = `生成的密码: ${password}`;
} catch (e) {
console.log('生成密码失败:', e);
passwordDiv.textContent = '生成密码失败';
}
});
windowDiv.appendChild(generatePasswordButton);
// 新增:单位转换器
const unitDiv = document.createElement('div');
unitDiv.style.marginTop = '20px';
windowDiv.appendChild(unitDiv);
// 创建单位转换容器
const unitConverterContainer = document.createElement('div');
unitConverterContainer.style.marginTop = '15px';
windowDiv.appendChild(unitConverterContainer);
// 第一行:输入框
const inputRow = document.createElement('div');
inputRow.style.display = 'flex';
inputRow.style.alignItems = 'center';
inputRow.style.marginBottom = '10px';
unitConverterContainer.appendChild(inputRow);
const unitInput = document.createElement('input');
unitInput.type = 'number';
unitInput.placeholder = '输入数值';
unitInput.style.padding = '12px 15px';
unitInput.style.border = '1px solid #ddd';
unitInput.style.borderRadius = '8px';
unitInput.style.width = '100%';
unitInput.style.fontSize = '14px';
unitInput.style.outline = 'none';
unitInput.style.transition = 'all 0.3s ease';
unitInput.addEventListener('focus', () => {
unitInput.style.borderColor = '#4CAF50';
unitInput.style.boxShadow = '0 0 0 3px rgba(76, 175, 80, 0.1)';
});
unitInput.addEventListener('blur', () => {
unitInput.style.borderColor = '#ddd';
unitInput.style.boxShadow = 'none';
});
inputRow.appendChild(unitInput);
// 第二行:单位选择
const selectRow = document.createElement('div');
selectRow.style.display = 'flex';
selectRow.style.alignItems = 'center';
selectRow.style.gap = '15px';
selectRow.style.marginBottom = '10px';
unitConverterContainer.appendChild(selectRow);
// 第一个单位选择框(转换前)
const fromUnitSelect = document.createElement('select');
fromUnitSelect.style.padding = '12px 10px';
fromUnitSelect.style.border = '1px solid #ddd';
fromUnitSelect.style.borderRadius = '8px';
fromUnitSelect.style.fontSize = '14px';
fromUnitSelect.style.width = '120px';
fromUnitSelect.style.minHeight = '40px';
fromUnitSelect.style.outline = 'none';
fromUnitSelect.style.transition = 'all 0.3s ease';
fromUnitSelect.addEventListener('focus', () => {
fromUnitSelect.style.borderColor = '#4CAF50';
fromUnitSelect.style.boxShadow = '0 0 0 3px rgba(76, 175, 80, 0.1)';
});
fromUnitSelect.addEventListener('blur', () => {
fromUnitSelect.style.borderColor = '#ddd';
fromUnitSelect.style.boxShadow = 'none';
});
fromUnitSelect.innerHTML = `
`;
selectRow.appendChild(fromUnitSelect);
// 箭头
const arrowSpan = document.createElement('span');
arrowSpan.textContent = '→';
arrowSpan.style.fontSize = '18px';
arrowSpan.style.fontWeight = 'bold';
arrowSpan.style.color = '#4CAF50';
selectRow.appendChild(arrowSpan);
// 第二个单位选择框(转换后)
const toUnitSelect = document.createElement('select');
toUnitSelect.style.padding = '12px 10px';
toUnitSelect.style.border = '1px solid #ddd';
toUnitSelect.style.borderRadius = '8px';
toUnitSelect.style.fontSize = '14px';
toUnitSelect.style.width = '120px';
toUnitSelect.style.minHeight = '40px';
toUnitSelect.style.outline = 'none';
toUnitSelect.style.transition = 'all 0.3s ease';
toUnitSelect.addEventListener('focus', () => {
toUnitSelect.style.borderColor = '#4CAF50';
toUnitSelect.style.boxShadow = '0 0 0 3px rgba(76, 175, 80, 0.1)';
});
toUnitSelect.addEventListener('blur', () => {
toUnitSelect.style.borderColor = '#ddd';
toUnitSelect.style.boxShadow = 'none';
});
toUnitSelect.innerHTML = `
`;
// 默认选择不同的单位
toUnitSelect.selectedIndex = 1;
selectRow.appendChild(toUnitSelect);
// 第三行:转换按钮
const buttonRow = document.createElement('div');
buttonRow.style.display = 'flex';
buttonRow.style.justifyContent = 'center';
unitConverterContainer.appendChild(buttonRow);
const convertButton = document.createElement('button');
convertButton.textContent = '转换';
convertButton.style.padding = '12px 30px';
convertButton.style.border = 'none';
convertButton.style.backgroundColor = '#4CAF50';
convertButton.style.color = 'white';
convertButton.style.borderRadius = '8px';
convertButton.style.cursor = 'pointer';
convertButton.style.fontSize = '14px';
convertButton.style.fontWeight = 'bold';
convertButton.style.minHeight = '40px';
convertButton.style.transition = 'all 0.3s ease';
convertButton.addEventListener('mouseover', () => {
convertButton.style.backgroundColor = '#45a049';
convertButton.style.transform = 'translateY(-2px)';
convertButton.style.boxShadow = '0 4px 8px rgba(76, 175, 80, 0.3)';
});
convertButton.addEventListener('mouseout', () => {
convertButton.style.backgroundColor = '#4CAF50';
convertButton.style.transform = 'translateY(0)';
convertButton.style.boxShadow = 'none';
});
buttonRow.appendChild(convertButton);
// 单位分类映射
const unitCategories = {
'celsius': 'temperature',
'fahrenheit': 'temperature',
'kilometer': 'length',
'mile': 'length',
'meter': 'length',
'centimeter': 'length',
'foot': 'length',
'inch': 'length',
'kilogram': 'mass',
'gram': 'mass',
'pound': 'mass',
'ounce': 'mass',
'liter': 'volume',
'milliliter': 'volume',
'gallon': 'volume',
'quart': 'volume',
'squareMeter': 'area',
'squareCentimeter': 'area',
'squareFoot': 'area',
'squareInch': 'area'
};
convertButton.addEventListener('click', () => {
try {
const value = parseFloat(unitInput.value);
const fromUnit = fromUnitSelect.value;
const toUnit = toUnitSelect.value;
// 检查两个单位是否属于同一类别
if (unitCategories[fromUnit] !== unitCategories[toUnit]) {
alert('这两个单位不能相互转换,请选择同一类别的单位');
return;
}
let result = '';
// 温度转换
if (unitCategories[fromUnit] === 'temperature') {
if (fromUnit === 'celsius' && toUnit === 'fahrenheit') {
const fahrenheit = (value * 9/5) + 32;
result = `${value}°C = ${fahrenheit.toFixed(2)}°F`;
} else if (fromUnit === 'fahrenheit' && toUnit === 'celsius') {
const celsius = (value - 32) * 5/9;
result = `${value}°F = ${celsius.toFixed(2)}°C`;
} else {
result = `${value}${fromUnit === 'celsius' ? '°C' : '°F'} = ${value}${toUnit === 'celsius' ? '°C' : '°F'}`;
}
}
// 长度转换
else if (unitCategories[fromUnit] === 'length') {
// 先转换为米
let meters = 0;
switch (fromUnit) {
case 'kilometer': meters = value * 1000;
break;
case 'mile': meters = value * 1609.34;
break;
case 'meter': meters = value;
break;
case 'centimeter': meters = value / 100;
break;
case 'foot': meters = value * 0.3048;
break;
case 'inch': meters = value * 0.0254;
break;
}
// 从米转换为目标单位
let convertedValue = 0;
switch (toUnit) {
case 'kilometer': convertedValue = meters / 1000;
break;
case 'mile': convertedValue = meters / 1609.34;
break;
case 'meter': convertedValue = meters;
break;
case 'centimeter': convertedValue = meters * 100;
break;
case 'foot': convertedValue = meters / 0.3048;
break;
case 'inch': convertedValue = meters / 0.0254;
break;
}
const unitNames = {
'kilometer': '公里',
'mile': '英里',
'meter': '米',
'centimeter': '厘米',
'foot': '英尺',
'inch': '英寸'
};
result = `${value}${unitNames[fromUnit]} = ${convertedValue.toFixed(2)}${unitNames[toUnit]}`;
}
// 质量转换
else if (unitCategories[fromUnit] === 'mass') {
// 先转换为克
let grams = 0;
switch (fromUnit) {
case 'kilogram': grams = value * 1000;
break;
case 'gram': grams = value;
break;
case 'pound': grams = value * 453.592;
break;
case 'ounce': grams = value * 28.3495;
break;
}
// 从克转换为目标单位
let convertedValue = 0;
switch (toUnit) {
case 'kilogram': convertedValue = grams / 1000;
break;
case 'gram': convertedValue = grams;
break;
case 'pound': convertedValue = grams / 453.592;
break;
case 'ounce': convertedValue = grams / 28.3495;
break;
}
const unitNames = {
'kilogram': '千克',
'gram': '克',
'pound': '磅',
'ounce': '盎司'
};
result = `${value}${unitNames[fromUnit]} = ${convertedValue.toFixed(2)}${unitNames[toUnit]}`;
}
// 体积转换
else if (unitCategories[fromUnit] === 'volume') {
// 先转换为毫升
let milliliters = 0;
switch (fromUnit) {
case 'liter': milliliters = value * 1000;
break;
case 'milliliter': milliliters = value;
break;
case 'gallon': milliliters = value * 3785.41;
break;
case 'quart': milliliters = value * 946.353;
break;
}
// 从毫升转换为目标单位
let convertedValue = 0;
switch (toUnit) {
case 'liter': convertedValue = milliliters / 1000;
break;
case 'milliliter': convertedValue = milliliters;
break;
case 'gallon': convertedValue = milliliters / 3785.41;
break;
case 'quart': convertedValue = milliliters / 946.353;
break;
}
const unitNames = {
'liter': '升',
'milliliter': '毫升',
'gallon': '加仑',
'quart': '夸脱'
};
result = `${value}${unitNames[fromUnit]} = ${convertedValue.toFixed(2)}${unitNames[toUnit]}`;
}
// 面积转换
else if (unitCategories[fromUnit] === 'area') {
// 先转换为平方厘米
let squareCentimeters = 0;
switch (fromUnit) {
case 'squareMeter': squareCentimeters = value * 10000;
break;
case 'squareCentimeter': squareCentimeters = value;
break;
case 'squareFoot': squareCentimeters = value * 929.03;
break;
case 'squareInch': squareCentimeters = value * 6.4516;
break;
}
// 从平方厘米转换为目标单位
let convertedValue = 0;
switch (toUnit) {
case 'squareMeter': convertedValue = squareCentimeters / 10000;
break;
case 'squareCentimeter': convertedValue = squareCentimeters;
break;
case 'squareFoot': convertedValue = squareCentimeters / 929.03;
break;
case 'squareInch': convertedValue = squareCentimeters / 6.4516;
break;
}
const unitNames = {
'squareMeter': '平方米',
'squareCentimeter': '平方厘米',
'squareFoot': '平方英尺',
'squareInch': '平方英寸'
};
result = `${value}${unitNames[fromUnit]} = ${convertedValue.toFixed(2)}${unitNames[toUnit]}`;
}
unitDiv.textContent = result;
} catch (e) {
console.log('单位转换失败:', e);
unitDiv.textContent = '转换失败,请输入有效数值';
}
});
windowDiv.appendChild(convertButton);
// 新增:笔记功能
const noteDiv = document.createElement('div');
noteDiv.style.marginTop = '20px';
windowDiv.appendChild(noteDiv);
const noteTextarea = document.createElement('textarea');
noteTextarea.placeholder = '在这里输入笔记...';
noteTextarea.style.marginTop = '15px';
noteTextarea.style.padding = '8px';
noteTextarea.style.border = '1px solid #ccc';
noteTextarea.style.borderRadius = '5px';
noteTextarea.style.width = '100%';
noteTextarea.style.height = '100px';
noteTextarea.style.resize = 'vertical';
windowDiv.appendChild(noteTextarea);
const saveNoteButton = document.createElement('button');
saveNoteButton.textContent = '保存笔记';
saveNoteButton.style.marginTop = '10px';
saveNoteButton.style.padding = '10px 20px';
saveNoteButton.style.border = 'none';
saveNoteButton.style.backgroundColor = '#FF9800';
saveNoteButton.style.color = 'white';
saveNoteButton.style.borderRadius = '8px';
saveNoteButton.style.cursor = 'pointer';
saveNoteButton.style.fontSize = '14px';
saveNoteButton.style.transition = 'all 0.3s ease';
saveNoteButton.addEventListener('mouseover', () => {
saveNoteButton.style.backgroundColor = '#F57C00';
saveNoteButton.style.transform = ' translateY(-2px)';
});
saveNoteButton.addEventListener('mouseout', () => {
saveNoteButton.style.backgroundColor = '#FF9800';
saveNoteButton.style.transform = ' translateY(0)';
});
saveNoteButton.addEventListener('click', () => {
try {
const note = noteTextarea.value;
if (note) {
// 保存为历史笔记
const notes = JSON.parse(localStorage.getItem('funnyWindowNotes') || '[]');
notes.push({
content: note,
date: new Date().toLocaleString()
});
// 只保留最近10条笔记
if (notes.length > 10) {
notes.shift();
}
localStorage.setItem('funnyWindowNotes', JSON.stringify(notes));
noteDiv.textContent = '笔记保存成功!';
} else {
noteDiv.textContent = '笔记内容不能为空';
}
} catch (e) {
console.log('保存笔记失败:', e);
noteDiv.textContent = '保存笔记失败';
}
});
windowDiv.appendChild(saveNoteButton);
// 查看历史笔记按钮
const viewNotesButton = document.createElement('button');
viewNotesButton.textContent = '查看历史笔记';
viewNotesButton.style.marginTop = '10px';
viewNotesButton.style.marginLeft = '10px';
viewNotesButton.style.padding = '10px 20px';
viewNotesButton.style.border = 'none';
viewNotesButton.style.backgroundColor = '#2196F3';
viewNotesButton.style.color = 'white';
viewNotesButton.style.borderRadius = '8px';
viewNotesButton.style.cursor = 'pointer';
viewNotesButton.style.fontSize = '14px';
viewNotesButton.style.transition = 'all 0.3s ease';
viewNotesButton.addEventListener('mouseover', () => {
viewNotesButton.style.backgroundColor = '#1976D2';
viewNotesButton.style.transform = ' translateY(-2px)';
});
viewNotesButton.addEventListener('mouseout', () => {
viewNotesButton.style.backgroundColor = '#2196F3';
viewNotesButton.style.transform = ' translateY(0)';
});
viewNotesButton.addEventListener('click', () => {
try {
const notes = JSON.parse(localStorage.getItem('funnyWindowNotes') || '[]');
if (notes.length > 0) {
let notesHtml = '历史笔记:\n\n';
notes.forEach((note, index) => {
notesHtml += `${index + 1}. [${note.date}]\n${note.content}\n\n`;
});
alert(notesHtml);
} else {
alert('没有历史笔记');
}
} catch (e) {
console.log('查看历史笔记失败:', e);
alert('查看历史笔记失败');
}
});
windowDiv.appendChild(viewNotesButton);
// 修改历史笔记按钮
const editNoteButton = document.createElement('button');
editNoteButton.textContent = '修改历史笔记';
editNoteButton.style.marginTop = '10px';
editNoteButton.style.marginLeft = '10px';
editNoteButton.style.padding = '10px 20px';
editNoteButton.style.border = 'none';
editNoteButton.style.backgroundColor = '#4CAF50';
editNoteButton.style.color = 'white';
editNoteButton.style.borderRadius = '8px';
editNoteButton.style.cursor = 'pointer';
editNoteButton.style.fontSize = '14px';
editNoteButton.style.transition = 'all 0.3s ease';
editNoteButton.addEventListener('mouseover', () => {
editNoteButton.style.backgroundColor = '#45a049';
editNoteButton.style.transform = ' translateY(-2px)';
});
editNoteButton.addEventListener('mouseout', () => {
editNoteButton.style.backgroundColor = '#4CAF50';
editNoteButton.style.transform = ' translateY(0)';
});
editNoteButton.addEventListener('click', () => {
try {
const notes = JSON.parse(localStorage.getItem('funnyWindowNotes') || '[]');
if (notes.length > 0) {
let noteOptions = '';
notes.forEach((note, index) => {
noteOptions += `${index + 1}. [${note.date}] ${note.content.substring(0, 20)}${note.content.length > 20 ? '...' : ''}\n`;
});
const noteIndex = prompt(`请输入要修改的笔记序号:\n\n${noteOptions}`);
const index = parseInt(noteIndex) - 1;
if (!isNaN(index) && index >= 0 && index < notes.length) {
const newContent = prompt('请输入新的笔记内容:', notes[index].content);
if (newContent !== null) {
notes[index] = {
content: newContent,
date: new Date().toLocaleString()
};
localStorage.setItem('funnyWindowNotes', JSON.stringify(notes));
noteDiv.textContent = '笔记修改成功!';
}
} else {
noteDiv.textContent = '无效的笔记序号';
}
} else {
alert('没有历史笔记');
}
} catch (e) {
console.log('修改历史笔记失败:', e);
noteDiv.textContent = '修改历史笔记失败';
}
});
windowDiv.appendChild(editNoteButton);
// 删除历史笔记按钮
const deleteNoteButton = document.createElement('button');
deleteNoteButton.textContent = '删除历史笔记';
deleteNoteButton.style.marginTop = '10px';
deleteNoteButton.style.marginLeft = '10px';
deleteNoteButton.style.padding = '10px 20px';
deleteNoteButton.style.border = 'none';
deleteNoteButton.style.backgroundColor = '#F44336';
deleteNoteButton.style.color = 'white';
deleteNoteButton.style.borderRadius = '8px';
deleteNoteButton.style.cursor = 'pointer';
deleteNoteButton.style.fontSize = '14px';
deleteNoteButton.style.transition = 'all 0.3s ease';
deleteNoteButton.addEventListener('mouseover', () => {
deleteNoteButton.style.backgroundColor = '#D32F2F';
deleteNoteButton.style.transform = ' translateY(-2px)';
});
deleteNoteButton.addEventListener('mouseout', () => {
deleteNoteButton.style.backgroundColor = '#F44336';
deleteNoteButton.style.transform = ' translateY(0)';
});
deleteNoteButton.addEventListener('click', () => {
try {
const notes = JSON.parse(localStorage.getItem('funnyWindowNotes') || '[]');
if (notes.length > 0) {
let noteOptions = '';
notes.forEach((note, index) => {
noteOptions += `${index + 1}. [${note.date}] ${note.content.substring(0, 20)}${note.content.length > 20 ? '...' : ''}\n`;
});
const noteIndex = prompt(`请输入要删除的笔记序号:\n\n${noteOptions}`);
const index = parseInt(noteIndex) - 1;
if (!isNaN(index) && index >= 0 && index < notes.length) {
if (confirm('确定要删除这条笔记吗?')) {
notes.splice(index, 1);
localStorage.setItem('funnyWindowNotes', JSON.stringify(notes));
noteDiv.textContent = '笔记删除成功!';
}
} else {
noteDiv.textContent = '无效的笔记序号';
}
} else {
alert('没有历史笔记');
}
} catch (e) {
console.log('删除历史笔记失败:', e);
noteDiv.textContent = '删除历史笔记失败';
}
});
windowDiv.appendChild(deleteNoteButton);
// 将窗口添加到页面
document.body.appendChild(windowDiv);
console.log('趣,不止想象脚本加载成功!');
} catch (e) {
console.error('脚本加载失败:', e);
// 显示错误信息
const errorDiv = document.createElement('div');
errorDiv.style.position = 'fixed';
errorDiv.style.top = '20px';
errorDiv.style.left = '20px';
errorDiv.style.backgroundColor = '#ffdddd';
errorDiv.style.border = '1px solid #ff0000';
errorDiv.style.padding = '10px';
errorDiv.style.zIndex = '9999';
errorDiv.textContent = '脚本加载失败,请检查控制台错误信息。';
document.body.appendChild(errorDiv);
}
})();