MediaWiki:Gadget-RightToolbar.js - 版本历史

Maintenance script：添加JavaScript代码

2026-01-11T04:10:19Z

添加JavaScript代码

显示更改

Maintenance script：Inline fallback styles for RightToolbar

2026-01-11T03:05:38Z

Inline fallback styles for RightToolbar

显示更改

Maintenance script：拆分样式并优化性能

2025-12-27T04:30:50Z

拆分样式并优化性能

显示更改

XP-jia：简化提示

2025-11-10T16:35:56Z

简化提示

←上一版本		2025年11月11日 (二) 00:35的版本
第127行：		第127行：
	var localTimeStr = localParts.filter(p => p.type === 'hour' \|\| p.type === 'minute' \|\| p.type === 'second')		var localTimeStr = localParts.filter(p => p.type === 'hour' \|\| p.type === 'minute' \|\| p.type === 'second')
	.map(p => p.value).join(':');		.map(p => p.value).join(':');
	$('#local-date').text(~~'本地日期: ' +~~ localDateStr);		$('#local-date').text(localDateStr);
	$('#local-time').text(~~'本地时间: ' +~~ localTimeStr);		$('#local-time').text(localTimeStr);

	// UTC 时间		// UTC 时间
第142行：		第142行：
	var utcTimeStr = utcParts.filter(p => p.type === 'hour' \|\| p.type === 'minute' \|\| p.type === 'second')		var utcTimeStr = utcParts.filter(p => p.type === 'hour' \|\| p.type === 'minute' \|\| p.type === 'second')
	.map(p => p.value).join(':');		.map(p => p.value).join(':');
	$('#utc-time').text('UTC 时间: ' + utcDateStr + ' ' + utcTimeStr);		$('#utc-time').text('UTC: ' + utcDateStr + ' ' + utcTimeStr);
	}		}

XP-jia：切换优化

2025-11-10T16:33:42Z

切换优化

显示更改

XP-jia：修改bug

2025-11-10T16:24:04Z

修改bug

←上一版本		2025年11月11日 (二) 00:24的版本
第1行：		第1行：
	/* ================================================================		/* ================================================================
	MediaWiki Gadget: Custom Tools ~~Bar（多语言时间显示版）~~		MediaWiki Gadget: Custom Tools Bar with Localized Clock
	功能：		功能：
	- 回到顶部 / 回到底部按钮		- 回到顶部 / 回到底部按钮
	- 实时~~时钟（~~显示浏览器时区 + UTC）		- 本地化日期和时间显示（浏览器时区 + UTC）
	- 根据用户语言切换日期时间格式
	- 深色模式自动适配		- 深色模式自动适配
	- 动态显示按钮 + 平滑动画		- 动态显示按钮 + 平滑动画
			作者：你自己
	================================================================= */		================================================================= */

	mw.loader.using(['mediawiki.util', 'mediawiki.~~user~~'], function () {		mw.loader.using(['mediawiki.util', 'mediawiki.language'], function () {

	function updateClock(~~userLang~~) {		function updateClock() {
	~~var~~ ~~now = new Date();~~		// 浏览器本地时间
			var local = new Date();
			// UTC 时间，从浏览器系统获取即可
			var utc = new Date(local.getTime() + local.getTimezoneOffset() * 60000);

	// 使用 ~~Intl.DateTimeFormat 根据用户~~语言~~格式化~~		// MediaWiki 提供的语言设置
	var ~~localFormatter~~ = ~~new Intl~~.~~DateTimeFormat~~(~~userLang,~~ {		var userLang = mw.config.get('wgUserLanguage') \|\| 'en';

⚫	year: 'numeric', month: '~~2-digit~~', day: '~~2-digit~~',
		⚫	// 本地化格式化函数
			// dateStyle/timeStyle 采用 Intl.DateTimeFormat 可选参数，也可以用短/长格式
		⚫	var localString = new Intl.DateTimeFormat(userLang, {
		⚫	year: 'numeric', month: 'long', day: 'numeric',
	hour: '2-digit', minute: '2-digit', second: '2-digit',		hour: '2-digit', minute: '2-digit', second: '2-digit',
	hour12: false~~, timeZoneName: 'short'~~		hour12: false
	});		}).format(local);
	var localStr = localFormatter.format(now);

			var utcString = new Intl.DateTimeFormat(userLang, {
⚫	// ~~UTC~~ 格式
		⚫	year: 'numeric', month: 'long', day: 'numeric',
⚫	var ~~utcFormatter~~ = new Intl.DateTimeFormat(~~'en-US'~~, {
⚫	year: 'numeric', month: '~~2-digit~~', day: '~~2-digit~~',
	hour: '2-digit', minute: '2-digit', second: '2-digit',		hour: '2-digit', minute: '2-digit', second: '2-digit',
	hour12: false, timeZone: 'UTC~~', timeZoneName: 'short~~'		hour12: false, timeZone: 'UTC'
	});		}).format(utc);
	var utcStr = utcFormatter.format(now);

	$('#current-local').text(~~localStr~~);		$('#current-local-time').text(localString);
	$('#current-utc').text(~~utcStr~~);		$('#current-utc-time').text(utcString);
	}		}

	$(function () {		$(function () {
	var isMobile = window.innerWidth <= 768;		var isMobile = window.innerWidth <= 768;

	/* ---------- 获取用户语言 ---------- */
	var userLang = mw.config.get('wgUserLanguage') \|\| 'en';

	/* ---------- 深色模式检测 ---------- */		/* ---------- 深色模式检测 ---------- */
第81行：		第82行：
	}		}

	/* ---------- ~~回到顶部 / 底部~~按钮 ---------- */		/* ---------- 按钮 ---------- */
	var $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {		var $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
	$('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });		$('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
	});		});

	var $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {		var $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
	$('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });		$('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });
	});		});

	/* ---------- 时钟区域（桌面端） ---------- */		/* ---------- 时钟（桌面端） ---------- */
	if (!isMobile) {		if (!isMobile) {
	var $clockDiv = $('<div id="current-clock"></div>').css({		var $clockDiv = $('<div id="current-clock"></div>').css({
第103行：		第105行：
	backdropFilter: 'blur(4px)'		backdropFilter: 'blur(4px)'
	}).append(		}).append(
	$('<div id="current-local">加载中...</div>'),		$('<div id="current-local-time">加载中...</div>'),
	$('<div id="current-utc">加载中...</div>')		$('<div id="current-utc-time">加载中...</div>')
	);		);
	$container.append($clockDiv);		$container.append($clockDiv);
第112行：		第114行：
	$container.append($topButton, $bottomButton);		$container.append($topButton, $bottomButton);

	/* ---------- 初次进入的动画效果 ---------- */		/* ---------- 初次进入动画 ---------- */
	$container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);		$container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);

	/* ---------- 时钟定时更新 ---------- */		/* ---------- 时钟定时更新 ---------- */
	if (!isMobile) {		if (!isMobile) {
	updateClock(~~userLang~~);		updateClock();
	setInterval(~~function () {~~ updateClock~~(userLang); }~~, 1000);		setInterval(updateClock, 1000);
	}		}

	/* ---------- 滚动动态控制按钮显示 ---------- */		/* ---------- 滚动动态控制按钮显示 ---------- */
	$topButton.hide();		$topButton.hide(); // 初始隐藏
	$(window).on('scroll', function () {		$(window).on('scroll', function () {
	var scrollTop = $(this).scrollTop();		var scrollTop = $(this).scrollTop();

XP-jia：功能增强v2

2025-11-10T16:17:40Z

功能增强v2

←上一版本		2025年11月11日 (二) 00:17的版本
第1行：		第1行：
	/* ================================================================		/* ================================================================
	MediaWiki Gadget: Custom Tools ~~Bar (本地化~~时间版)		MediaWiki Gadget: Custom Tools Bar（多语言时间显示版）
	功能：		功能：
	- 回到顶部 / 回到底部按钮		- 回到顶部 / 回到底部按钮
	- ~~本地化~~时钟（~~桌面端）~~		- 实时时钟（显示浏览器时区 + UTC）
			- 根据用户语言切换日期时间格式
	- 深色模式适配		- 深色模式自动适配
	- 动态显示按钮 + 平滑动画		- 动态显示按钮 + 平滑动画
	================================================================= */		================================================================= */

	mw.loader.using(['mediawiki.util'], function () {		mw.loader.using(['mediawiki.util', 'mediawiki.user'], function () {

	function updateClock() {		function updateClock(userLang) {
	var now = new Date();		var now = new Date();

	// 获取用~~户语言设置（~~用户界面语言）		// 使用 Intl.DateTimeFormat 根据用户语言格式化
	var ~~userLang~~ = mw.~~config.get~~(~~'wgUserLanguage') \|\|~~ ~~'en';~~		var localFormatter = new Intl.DateTimeFormat(userLang, {
			year: 'numeric', month: '2-digit', day: '2-digit',
		⚫	hour: '2-digit', minute: '2-digit', second: '2-digit',
			hour12: false, timeZoneName: 'short'
		⚫	});
			var localStr = localFormatter.format(now);

	// ~~日期和时间本地化~~		// UTC 格式
	var ~~dateString~~ = ~~now~~.~~toLocaleDateString~~(~~userLang~~, {		var utcFormatter = new Intl.DateTimeFormat('en-US', {
	year: 'numeric',		year: 'numeric', month: '2-digit', day: '2-digit',
	~~month~~: '~~long~~',		hour: '2-digit', minute: '2-digit', second: '2-digit',
	~~day~~: '~~numeric~~'		hour12: false, timeZone: 'UTC', timeZoneName: 'short'
⚫	});
	var timeString = now.toLocaleTimeString(userLang, {
	hour: '2-digit',
⚫	minute: '2-digit',
	second: '2-digit'
	});		});
			var utcStr = utcFormatter.format(now);

	$('#current-~~date~~').text(~~dateString~~);		$('#current-local').text(localStr);
	$('#current-~~time~~').text(~~timeString~~);		$('#current-utc').text(utcStr);
	}		}

	$(function () {		$(function () {
	var isMobile = window.innerWidth <= 768;		var isMobile = window.innerWidth <= 768;

			/* ---------- 获取用户语言 ---------- */
			var userLang = mw.config.get('wgUserLanguage') \|\| 'en';

	/* ---------- 深色模式检测 ---------- */		/* ---------- 深色模式检测 ---------- */
第76行：		第81行：
	}		}

	/* ---------- 按钮 ---------- */		/* ---------- 回到顶部 / 底部按钮 ---------- */
	var $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {		var $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
	$('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });		$('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
	});		});

	var $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {		var $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
	$('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });		$('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });
	});		});

	/* ---------- 时钟（桌面端） ---------- */		/* ---------- 时钟区域（桌面端） ---------- */
	if (!isMobile) {		if (!isMobile) {
	var $clockDiv = $('<div id="current-clock"></div>').css({		var $clockDiv = $('<div id="current-clock"></div>').css({
第99行：		第103行：
	backdropFilter: 'blur(4px)'		backdropFilter: 'blur(4px)'
	}).append(		}).append(
	$('<div id="current-~~date~~">加载中...</div>'),		$('<div id="current-local">加载中...</div>'),
	$('<div id="current-~~time~~"></div>')		$('<div id="current-utc">加载中...</div>')
	);		);
	$container.append($clockDiv);		$container.append($clockDiv);
第108行：		第112行：
	$container.append($topButton, $bottomButton);		$container.append($topButton, $bottomButton);

	/* ---------- 初次进入动画 ---------- */		/* ---------- 初次进入的动画效果 ---------- */
	$container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);		$container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);

	/* ---------- 时钟定时更新 ---------- */		/* ---------- 时钟定时更新 ---------- */
	if (!isMobile) {		if (!isMobile) {
	updateClock();		updateClock(userLang);
	setInterval(updateClock, 1000);		setInterval(function () { updateClock(userLang); }, 1000);
	}		}

	/* ---------- 滚动动态控制按钮显示 ---------- */		/* ---------- 滚动动态控制按钮显示 ---------- */
	$topButton.hide(); ~~// 初始隐藏~~		$topButton.hide();
	$(window).on('scroll', function () {		$(window).on('scroll', function () {
	var scrollTop = $(this).scrollTop();		var scrollTop = $(this).scrollTop();
第127行：		第131行：
	}		}
	});		});

	});		});
	});		});

XP-jia：功能优化

2025-11-10T16:12:27Z

功能优化

←上一版本		2025年11月11日 (二) 00:12的版本
第1行：		第1行：
	/* ================================================================		/* ================================================================
	MediaWiki Gadget: Custom Tools ~~Bar（增强~~版）		MediaWiki Gadget: Custom Tools Bar (本地化时间版)
	功能：		功能：
	- 回到顶部 / 回到底部按钮		- 回到顶部 / 回到底部按钮
	- 实时时钟（桌面端）		- 本地化时钟（桌面端）
	- 深色模式适配		- 深色模式适配
	- 动态显示按钮 + 平滑动画		- 动态显示按钮 + 平滑动画
	作者：你自己（改进自 Wikipedia 风格）
	================================================================= */		================================================================= */

	mw.loader.using(['mediawiki.util'], function () {		mw.loader.using(['mediawiki.util'], function () {

	function updateClock() {		function updateClock() {
	var now = new Date();		var now = new Date();

⚫	var dateString = now.~~getFullYear~~() ~~+ "年" +~~
			// 获取用户语言设置（用户界面语言）
	(now.getMonth() + 1).toString().padStart(2, '0') + "月" +
	~~now~~.~~getDate()~~.~~toString~~(~~).padStart(2,~~ '0') + ~~"日"~~;		var userLang = mw.config.get('wgUserLanguage') \|\| 'en';

⚫	var timeString = now.toLocaleTimeString();
			// 日期和时间本地化
		⚫	var dateString = now.toLocaleDateString(userLang, {
			year: 'numeric',
			month: 'long',
			day: 'numeric'
			});
		⚫	var timeString = now.toLocaleTimeString(userLang, {
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
			});

	$('#current-date').text(dateString);		$('#current-date').text(dateString);
	$('#current-time').text(timeString);		$('#current-time').text(timeString);
第40行：		第52行：
	zIndex: 9999,		zIndex: 9999,
	opacity: 0,		opacity: 0,
	transform: 'translateY(20px)', ~~// 初始位置~~		transform: 'translateY(20px)',
	}).appendTo('body');		}).appendTo('body');

第96行：		第108行：
	$container.append($topButton, $bottomButton);		$container.append($topButton, $bottomButton);

	/* ---------- 初次进入的动画效果 ---------- */		/* ---------- 初次进入动画 ---------- */
	$container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);		$container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);

第115行：		第127行：
	}		}
	});		});

	});		});
	});		});

XP-jia：功能增强和优化

2025-11-10T16:08:40Z

功能增强和优化

显示更改

XP-jia：修正

2025-03-19T05:31:12Z

修正

←上一版本		2025年3月19日 (三) 13:31的版本
第16行：		第16行：

	// 右下角按钮容器		// 右下角按钮容器
	var $container = $('<div id="mw-custom-tools"></div>').css({		var $container = $('<div id="mw-custom-tools"></div>').css({
	position: 'fixed',		position: 'fixed',
	bottom: '120px', // 避免与其他工具重叠		bottom: '120px', // 避免与其他工具重叠
	right: ~~'40px',~~		right: '50px', // 这里调整 right 值，使按钮向左移动
	display: 'flex',		display: 'flex',
	flexDirection: 'column',		flexDirection: 'column',
	alignItems: 'flex-end',		alignItems: 'flex-end',
	gap: '5px',		gap: '5px',
	zIndex: 9999		zIndex: 9999
	});		});

	// 统一按钮样式		// 统一按钮样式