時計を表示する
TODO: プレゼンテーションモードで使う想定なのでプレゼンテーションモードだけで表示するようにしたい code:script.js
(() => {
const now = () => {
const padZero = s => (s+'').padStart(2, '0');
const d = new Date();
return ${padZero(d.getHours())}:${padZero(d.getMinutes())}:${padZero(d.getSeconds())};
};
let timerElem = null;
let timerIntervalID;
scrapbox.PageMenu.addItem({
title: 'Toggle clock',
onClick: () => {
if (timerElem === null) {
timerElem = document.createElement('div');
timerElem.classList.add('userjs-timer');
timerElem.textContent = now();
document.getElementById('app-container').appendChild(timerElem);
timerIntervalID = window.setInterval(() => {
timerElem.textContent = now();
}, 200);
} else {
window.clearInterval(timerIntervalID);
timerElem.remove();
timerElem = null;
}
}
});
})()
code:style.css
.userjs-timer {
background-color: white;
color: black;
font-size: 32pt;
position: fixed;
left: 0;
bottom: 0;
border: 1px solid black;
}
表示例
https://gyazo.com/62d679a0d3a62585f162c5a688544aaf