MediaWiki:Gadget-RightToolbar.js
MediaWiki界面页面
更多操作
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
mw.loader.using(['mediawiki.util'], function () {
function updateClock() {
var now = new Date();
var dateString = now.getFullYear() + "年" +
(now.getMonth() + 1).toString().padStart(2, '0') + "月" +
now.getDate().toString().padStart(2, '0') + "日";
var timeString = now.toLocaleTimeString();
$('#current-date').text(dateString);
$('#current-time').text(timeString);
}
$(function () {
var isMobile = window.innerWidth <= 768; // 判断是否为移动端
// 右下角按钮容器
var $container = $('<div id="mw-custom-tools"></div>').css({
position: 'fixed',
bottom: '120px', // 避免与其他工具重叠
right: '50px', // 这里调整 right 值,使按钮向左移动
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
gap: '5px',
zIndex: 9999
});
// 统一按钮样式
function createButton(id, text, tooltip, clickHandler) {
return $('<div></div>', { id: id, title: tooltip, text: text }).css({
padding: '5px 10px',
fontSize: '12px',
background: '#f1f1f1',
border: '1px solid #aaa',
borderRadius: '4px',
boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
color: '#333',
cursor: 'pointer',
textAlign: 'center',
opacity: 0.7,
transition: 'background 0.3s, opacity 0.3s'
}).hover(function () {
$(this).css({ background: '#ddd', opacity: 1 });
}, function () {
$(this).css({ background: '#f1f1f1', opacity: 0.7 });
}).click(clickHandler);
}
// 创建回到顶部按钮
var $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
$('html, body').animate({ scrollTop: 0 }, 500);
});
// 创建回到底部按钮
var $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
$('html, body').animate({ scrollTop: $(document).height() }, 500);
});
// 创建时间显示区域(仅桌面端)
if (!isMobile) {
var $clockDiv = $('<div id="current-clock"></div>').css({
padding: '6px 12px',
fontSize: '12px',
background: '#f1f1f1',
border: '1px solid #aaa',
borderRadius: '4px',
boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
color: '#333',
textAlign: 'center',
lineHeight: '1.4'
}).append(
$('<div id="current-date">加载中...</div>'),
$('<div id="current-time"></div>')
);
$container.append($clockDiv);
}
// 组装按钮
$container.append($topButton, $bottomButton);
$('body').append($container);
// 启动时钟更新(仅桌面端)
if (!isMobile) {
updateClock();
setInterval(updateClock, 1000);
}
});
});