打开/关闭搜索
打开/关闭菜单
30
8
13
1.6K
陋室
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Gadget-RightToolbar.js：修订间差异

MediaWiki界面页面
更多操作
以互动方式浏览历史
←上一编辑
Maintenance script​（留言 | 贡献）
110次编辑
删除的内容 添加的内容
XP-jia​（留言 | 贡献）
行政员、​界面管理员、​管理员
1,047次编辑
小 切换优化
Maintenance script​（留言 | 贡献）
110次编辑
添加JavaScript代码
 
（未显示2个用户的3个中间版本）
第1行： 第1行：

/* ================================================================
/* ================================================================
MediaWiki Gadget: Localized Clock Bar (增强版)
MediaWiki Gadget: Localized Clock Bar
功能：
功能：
- 显示浏览器本地时间和 UTC 时间
- 显示浏览器本地时间和 UTC 时间
- 使用 MediaWiki 用户语言格式
- 使用 MediaWiki 用户语言格式
- 动态响应语言切换，无需刷新
- 深色模式适配 + 滑入动画
- 深色模式适配 + 滑入动画
作者：你自己
================================================================= */
================================================================= */


mw.loader.using(['mediawiki.util'], function () {
mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
var STYLE_ID = 'mw-right-toolbar-style';

function ensureToolbarStyles() {
if ( document.getElementById( STYLE_ID ) ) {
return;
}

var css = [
'#mw-right-toolbar, .mw-right-toolbar {',
' position: fixed;',
' bottom: 96px;',
' right: 24px;',
' display: flex;',
' flex-direction: column;',
' align-items: flex-end;',
' gap: 6px;',
' z-index: 2147483647;',
' opacity: 0;',
' transform: translateY(12px);',
' transition: opacity 0.4s ease, transform 0.4s ease;',
'}',
'',
'.mw-right-toolbar.is-visible {',
' opacity: 1;',
' transform: translateY(0);',
'}',
'',
'.mw-right-toolbar .mw-rt-button,',
'.mw-right-toolbar .mw-rt-clock {',
' background: var(--color-surface-0, rgba(255, 255, 255, 0.85));',
' border: 1px solid var(--border-color-base, #aaa);',
' color: var(--color-base, #333);',
' border-radius: 4px;',
' box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);',
' font-size: 12px;',
' line-height: 1.4;',
' padding: 6px 12px;',
' backdrop-filter: blur(4px);',
'}',
'',
'.mw-right-toolbar .mw-rt-button {',
' cursor: pointer;',
' opacity: 0.8;',
' transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;',
'}',
'',
'.mw-right-toolbar .mw-rt-button:hover {',
' opacity: 1;',
' background: var(--background-color-progressive-subtle, #ddd);',
'}',
'',
'.mw-right-toolbar .mw-rt-button:active {',
' transform: translateY(1px);',
'}',
'',
'.skin-theme-clientpref-night .mw-right-toolbar .mw-rt-button,',
'.skin-theme-clientpref-night .mw-right-toolbar .mw-rt-clock {',
' background: rgba(30, 30, 30, 0.85);',
' border-color: #555;',
' color: #eee;',
'}',
'',
'@media (max-width: 768px) {',
' #mw-right-toolbar, .mw-right-toolbar {',
' bottom: 72px;',
' right: 16px;',
' }',
'}'
].join( '\n' );

var styleNode = mw.loader.addStyleTag( css );
styleNode.id = STYLE_ID;
}


// 工具栏主函数
function initClockBar() {
function initClockBar() {
ensureToolbarStyles();

var isMobile = window.innerWidth <= 768;
var isMobile = window.innerWidth <= 768;
var container = document.getElementById( 'mw-right-toolbar' );


// ---------- 深色模式检测 ----------
if ( !container ) {
container = document.createElement( 'div' );
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const bg = isDark ? 'rgba(40,40,40,0.85)' : 'rgba(255,255,255,0.85)';
container.id = 'mw-right-toolbar';
const border = isDark ? '#555' : '#aaa';
container.className = 'mw-right-toolbar';
document.body.appendChild( container );
const color = isDark ? '#eee' : '#333';

// ---------- 创建工具栏容器 ----------
var $container = $('#mw-custom-tools');
if (!$container.length) {
$container = $('<div id="mw-custom-tools"></div>').css({
position: 'fixed',
bottom: '120px',
right: '50px',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
gap: '5px',
zIndex: 9999,
opacity: 0,
transform: 'translateY(20px)', // 初始位置
}).appendTo('body');
}
}


function createButton( id, text, tooltip, clickHandler ) {
// ---------- 按钮生成函数 ----------
var button = document.createElement( 'button' );
function createButton(id, text, tooltip, clickHandler) {
button.id = id;
return $('<div></div>', { id: id, title: tooltip, text: text }).css({
padding: '5px 10px',
button.className = 'mw-rt-button';
fontSize: '12px',
button.title = tooltip;
background: bg,
button.textContent = text;
border: '1px solid ' + border,
button.type = 'button';
borderRadius: '4px',
button.addEventListener( 'click', clickHandler );
boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
return button;
color: color,
cursor: 'pointer',
textAlign: 'center',
opacity: 0.7,
transition: 'background 0.3s, opacity 0.3s, transform 0.3s',
backdropFilter: 'blur(4px)'
}).hover(
function () { $(this).css({ background: isDark ? '#555' : '#ddd', opacity: 1 }); },
function () { $(this).css({ background: bg, opacity: 0.7 }); }
).click(clickHandler);
}
}


var topButton = document.getElementById( 'mw-scroll-top' );
// ---------- 创建按钮 ----------
var $topButton = $('#mw-scroll-top');
if ( !topButton ) {
if (!$topButton.length) {
topButton = createButton( 'mw-scroll-top', '▲', '回到顶部', function () {
window.scrollTo( {
$topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
$('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
top: 0,
});
behavior: 'smooth'
$container.append($topButton);
} );
} );
container.appendChild( topButton );
}
}


var $bottomButton = $('#mw-scroll-bottom');
var bottomButton = document.getElementById( 'mw-scroll-bottom' );
if (!$bottomButton.length) {
if ( !bottomButton ) {
$bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
bottomButton = createButton( 'mw-scroll-bottom', '▼', '回到底部', function () {
window.scrollTo( {
$('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });
});
top: document.body.scrollHeight,
$container.append($bottomButton);
behavior: 'smooth'
} );
} );
container.appendChild( bottomButton );
}
}


var clockDiv = document.getElementById( 'mw-right-toolbar-clock' );
// ---------- 时钟容器（桌面端） ----------
if ( !isMobile && !clockDiv ) {
var $clockDiv = $('#current-clock');
if (!isMobile && !$clockDiv.length) {
clockDiv = document.createElement( 'div' );
$clockDiv = $('<div id="current-clock"></div>').css({
clockDiv.id = 'mw-right-toolbar-clock';
padding: '6px 12px',
clockDiv.className = 'mw-rt-clock';
fontSize: '12px',
background: bg,
var localDateDiv = document.createElement( 'div' );
border: '1px solid ' + border,
localDateDiv.id = 'mw-local-date';
borderRadius: '4px',
localDateDiv.textContent = '加载中...';
boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
color: color,
var localTimeDiv = document.createElement( 'div' );
textAlign: 'center',
localTimeDiv.id = 'mw-local-time';
lineHeight: '1.4',
backdropFilter: 'blur(4px)'
var utcTimeDiv = document.createElement( 'div' );
}).append(
utcTimeDiv.id = 'mw-utc-time';
$('<div id="local-date">加载中...</div>'),
clockDiv.appendChild( localDateDiv );
$('<div id="local-time"></div>'),
clockDiv.appendChild( localTimeDiv );
$('<div id="utc-time"></div>')
);
clockDiv.appendChild( utcTimeDiv );
$container.append($clockDiv);
container.appendChild( clockDiv );
}
}


topButton.style.display = 'none';
// ---------- 滚动动态显示 ----------
$topButton.hide(); // 初始隐藏
var ticking = false;
$(window).on('scroll', function () {
window.addEventListener( 'scroll', function () {
var scrollTop = $(this).scrollTop();
if ( ticking ) {
if (scrollTop > 200) $topButton.fadeIn(); else $topButton.fadeOut();
return;
});
}
ticking = true;
window.requestAnimationFrame( function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if ( scrollTop > 200 ) {
topButton.style.display = 'block';
} else {
topButton.style.display = 'none';
}
ticking = false;
} );
} );


window.requestAnimationFrame( function () {
// ---------- 初始动画 ----------
container.classList.add( 'is-visible' );
$container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);
} );


// ---------- 渲染时钟函数 ----------
function renderClock() {
function renderClock() {
var now = new Date();
var now = new Date();
var userLang = mw.config.get( 'wgUserLanguage' ) || 'en';


var localFormatter = new Intl.DateTimeFormat( userLang, {
// 获取 MediaWiki 用户语言（wgUserLanguage）
var userLang = mw.config.get('wgUserLanguage') || 'en';
year: 'numeric',
month: 'long',

// 本地时间
day: 'numeric',
var localFormatter = new Intl.DateTimeFormat(userLang, {
hour: '2-digit',
year: 'numeric', month: 'long', day: 'numeric',
minute: '2-digit',
hour: '2-digit', minute: '2-digit', second: '2-digit',
second: '2-digit',
hour12: false,
hour12: false,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
});
} );
var localParts = localFormatter.formatToParts(now);
var localDateStr = localParts.filter(p => p.type === 'year' || p.type === 'month' || p.type === 'day')
.map(p => p.value).join(' ');
var localTimeStr = localParts.filter(p => p.type === 'hour' || p.type === 'minute' || p.type === 'second')
.map(p => p.value).join(':');
$('#local-date').text('本地日期: ' + localDateStr);
$('#local-time').text('本地时间: ' + localTimeStr);


// UTC 时间
var localParts = localFormatter.formatToParts( now );
var utcFormatter = new Intl.DateTimeFormat(userLang, {
var localDateStr = localParts.filter( function ( p ) {
year: 'numeric', month: 'long', day: 'numeric',
return p.type === 'year' || p.type === 'month' || p.type === 'day';
hour: '2-digit', minute: '2-digit', second: '2-digit',
} ).map( function ( p ) {
return p.value;
} ).join( ' ' );

var localTimeStr = localParts.filter( function ( p ) {
return p.type === 'hour' || p.type === 'minute' || p.type === 'second';
} ).map( function ( p ) {
return p.value;
} ).join( ':' );

var localDateEl = document.getElementById( 'mw-local-date' );
var localTimeEl = document.getElementById( 'mw-local-time' );
if ( localDateEl ) localDateEl.textContent = localDateStr;
if ( localTimeEl ) localTimeEl.textContent = localTimeStr;

var utcFormatter = new Intl.DateTimeFormat( userLang, {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
hour12: false,
timeZone: 'UTC'
timeZone: 'UTC'
});
} );

var utcParts = utcFormatter.formatToParts(now);
var utcParts = utcFormatter.formatToParts( now );
var utcDateStr = utcParts.filter(p => p.type === 'year' || p.type === 'month' || p.type === 'day')
.map(p => p.value).join(' ');
var utcDateStr = utcParts.filter( function ( p ) {
var utcTimeStr = utcParts.filter(p => p.type === 'hour' || p.type === 'minute' || p.type === 'second')
return p.type === 'year' || p.type === 'month' || p.type === 'day';
.map(p => p.value).join(':');
} ).map( function ( p ) {
$('#utc-time').text('UTC 时间: ' + utcDateStr + ' ' + utcTimeStr);
return p.value;
} ).join( ' ' );

var utcTimeStr = utcParts.filter( function ( p ) {
return p.type === 'hour' || p.type === 'minute' || p.type === 'second';
} ).map( function ( p ) {
return p.value;
} ).join( ':' );

var utcTimeEl = document.getElementById( 'mw-utc-time' );
if ( utcTimeEl ) utcTimeEl.textContent = 'UTC: ' + utcDateStr + ' ' + utcTimeStr;
}
}


var clockTimer = window.setInterval( renderClock, 1000 );
// ---------- 定时刷新 ----------
setInterval(renderClock, 1000);
renderClock();
renderClock(); // 启动立即渲染


mw.hook( 'user.languageChange' ).add( renderClock );
// ---------- 语言切换动态刷新 ----------

// MediaWiki 用户语言修改后触发 user.languageChange hook
document.addEventListener( 'visibilitychange', function () {
mw.hook('user.languageChange').add(renderClock);
if ( document.hidden ) {
window.clearInterval( clockTimer );
clockTimer = null;
return;
}
if ( !clockTimer ) {
clockTimer = window.setInterval( renderClock, 1000 );
renderClock();
}
} );
}
}


// 初始化工具条
// 页面加载完成后初始化
if ( document.readyState === 'loading' ) {
$(initClockBar);
document.addEventListener( 'DOMContentLoaded', initClockBar );
});
} else {
initClockBar();
}
} );
检索自“https://learn.houjue.digital/wiki/MediaWiki:Gadget-RightToolbar.js”
著作权

陋室的全部文字提供于 知识共享署名-非商业性使用-相同方式共享 4.0 协议国际版 条款之下，附加条款亦可能适用。请参阅我们的使用条款和隐私政策，使用陋室即视为同意上述条款的约束。

陋室上提及的所有公司名称、产品名称、服务名称和标识均为其各自所有者的商标或注册商标。使用这些商标仅为了识别和说明之目的，并不意味着任何形式的认可或关联。陋室与上述公司及其商标没有任何关系或隶属。

Microsoft®是Microsoft Corporation(微软公司)的商标，Google®是Google LLC的注册商标，Apple®是Apple Inc.(苹果公司)的商标。 Wikipedia®和维基百科标志是维基媒体基金会的注册商标；维基™是维基媒体基金会的商标。维基媒体基金会是按美国国内税收法501(c)(3)登记的非营利慈善机构。 所有其他商标和标识均为其各自所有者的财产。未经相应商标所有者的明确书面同意，不得以任何方式使用这些商标。