MediaWiki:Gadget-RightToolbar.js:修订间差异
MediaWiki界面页面
更多操作
删除的内容 添加的内容
new |
小 调整位置 |
||
| 第19行: | 第19行: | ||
position: 'fixed', |
position: 'fixed', |
||
bottom: '120px', // 避免与其他工具重叠 |
bottom: '120px', // 避免与其他工具重叠 |
||
right: ' |
right: '40px', |
||
display: 'flex', |
display: 'flex', |
||
flexDirection: 'column', |
flexDirection: 'column', |
||
2025年3月19日 (三) 13:29的版本
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: '40px',
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);
}
});
});