自作プラグイン/analogclock.inc.php
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
** analogclock.inc.php [#wb01523e]
|RIGHT:125|LEFT:360|c
|~サマリ|メニューバー用のアナログ時計プラグイン|
|~リビジョン|1.0|
|~対応バージョン|1.5.4|
|~投稿者|[[Colug]]|
|~投稿日|&new{2023-02-20 (月) 16:10:59};|
ChatGPTにプラグインのプログラムと説明を生成させてみました...
不安定だったため、ところどころ手動で修正しました。~
~
このPukiWikiプラグインはアナログ時計を表示するプラグイン...
プラグイン名は「analogclock」で、引数は最大4つ指定できま...
** 書式 [#d23b75c9]
#analogclock([針の色], [秒針の色], [ボーダーの色], [秒針...
** 引数 [#w9103815]
|~引数|~説明|~デフォルト値|h
|針の色|針の色を指定します。|#000000|
|秒針の色|秒針の色を指定します。|#ff0000|
|ボーダーの色|ボーダーの色を指定します。|#000000|
|秒針の表示/非表示|true を指定すると秒針を表示します。fal...
** 使用例 [#l7725cb5]
#analogclock(#000000, #00ff00, #0000ff, false)
この使用例では、秒針は非表示にし、アナログ時計の針の色は...
** plugin/analogclock.inc.php [#xa3b7404]
<?php
/**
* Analog Clock Plugin
*
* Syntax: #analogclock(hand_color, sec_hand_color, bord...
*
* @author ChatGPT
* @license MIT License
*/
// アナログ時計を表示する間隔
define('PLUGIN_ANALOGCLOCK_INTERVAL', 100);
// プラグインの実行時に実行される処理
function plugin_analogclock_convert()
{
$arg = func_get_args();
$hand_color = isset($arg[0]) ? $arg[0] : '#000000'; ...
$sec_hand_color = isset($arg[1]) ? $arg[1] : '#ff000...
$border_color = isset($arg[2]) ? $arg[2] : '#000000'...
$show_sec = isset($arg[3]) ? $arg[3] : true; // 秒針...
$interval = PLUGIN_ANALOGCLOCK_INTERVAL;
$id = 'analogclock_' . md5(uniqid(rand(), true));
$js_sec_hand = $show_sec && $show_sec !== 'false' ? 'do...
$html_sec_hand = $show_sec && $show_sec !== 'false' ? '...
$html = <<<EOD
<script>
function moveHands() {
var date = new Date();
var hour = date.getHours() % 12;
var minute = date.getMinutes();
var second = date.getSeconds();
var millisecond = date.getMilliseconds();
var hourDeg = hour * 30 + minute / 2;
var minuteDeg = minute * 6;
var secondDeg = (second + millisecond / ...
document.getElementById('hour-hand-{$id}...
document.getElementById('minute-hand-{$i...
{$js_sec_hand}
}
setInterval(moveHands, {$interval});
</script>
<style>
#analog-clock-{$id} {
border: 2px solid {$border_color};
border-radius: 50%;
width: 100px;
height: 100px;
position: relative;
}
#hour-hand-{$id} {
position: absolute;
width: 6px;
height: 30px;
background-color: {$hand_color};
transform-origin: 50% 100%;
top: 20px;
left: 47px;
}
#minute-hand-{$id} {
position: absolute;
width: 4px;
height: 45px;
background-color: {$hand_color};
transform-origin: 50% 100%;
top: 5px;
left: 48px;
}
#second-hand-{$id} {
position: absolute;
width: 2px;
height: 48px;
background-color: {$sec_hand_color};
transform-origin: 50% 100%;
top: 2px;
left: 49px;
}
#clock-center-{$id} {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
top: 45px;
left: 45px;
border: 1px solid {$border_color};
}
</style>
<div id="analog-clock-{$id}">
<div id="hour-hand-{$id}"></div>
<div id="minute-hand-{$id}"></div>
{$html_sec_hand}
<div id="clock-center-{$id}"></div>
</div>
EOD;
return $html;
}
?>
** コメント [#o267a255]
#comment
終了行:
** analogclock.inc.php [#wb01523e]
|RIGHT:125|LEFT:360|c
|~サマリ|メニューバー用のアナログ時計プラグイン|
|~リビジョン|1.0|
|~対応バージョン|1.5.4|
|~投稿者|[[Colug]]|
|~投稿日|&new{2023-02-20 (月) 16:10:59};|
ChatGPTにプラグインのプログラムと説明を生成させてみました...
不安定だったため、ところどころ手動で修正しました。~
~
このPukiWikiプラグインはアナログ時計を表示するプラグイン...
プラグイン名は「analogclock」で、引数は最大4つ指定できま...
** 書式 [#d23b75c9]
#analogclock([針の色], [秒針の色], [ボーダーの色], [秒針...
** 引数 [#w9103815]
|~引数|~説明|~デフォルト値|h
|針の色|針の色を指定します。|#000000|
|秒針の色|秒針の色を指定します。|#ff0000|
|ボーダーの色|ボーダーの色を指定します。|#000000|
|秒針の表示/非表示|true を指定すると秒針を表示します。fal...
** 使用例 [#l7725cb5]
#analogclock(#000000, #00ff00, #0000ff, false)
この使用例では、秒針は非表示にし、アナログ時計の針の色は...
** plugin/analogclock.inc.php [#xa3b7404]
<?php
/**
* Analog Clock Plugin
*
* Syntax: #analogclock(hand_color, sec_hand_color, bord...
*
* @author ChatGPT
* @license MIT License
*/
// アナログ時計を表示する間隔
define('PLUGIN_ANALOGCLOCK_INTERVAL', 100);
// プラグインの実行時に実行される処理
function plugin_analogclock_convert()
{
$arg = func_get_args();
$hand_color = isset($arg[0]) ? $arg[0] : '#000000'; ...
$sec_hand_color = isset($arg[1]) ? $arg[1] : '#ff000...
$border_color = isset($arg[2]) ? $arg[2] : '#000000'...
$show_sec = isset($arg[3]) ? $arg[3] : true; // 秒針...
$interval = PLUGIN_ANALOGCLOCK_INTERVAL;
$id = 'analogclock_' . md5(uniqid(rand(), true));
$js_sec_hand = $show_sec && $show_sec !== 'false' ? 'do...
$html_sec_hand = $show_sec && $show_sec !== 'false' ? '...
$html = <<<EOD
<script>
function moveHands() {
var date = new Date();
var hour = date.getHours() % 12;
var minute = date.getMinutes();
var second = date.getSeconds();
var millisecond = date.getMilliseconds();
var hourDeg = hour * 30 + minute / 2;
var minuteDeg = minute * 6;
var secondDeg = (second + millisecond / ...
document.getElementById('hour-hand-{$id}...
document.getElementById('minute-hand-{$i...
{$js_sec_hand}
}
setInterval(moveHands, {$interval});
</script>
<style>
#analog-clock-{$id} {
border: 2px solid {$border_color};
border-radius: 50%;
width: 100px;
height: 100px;
position: relative;
}
#hour-hand-{$id} {
position: absolute;
width: 6px;
height: 30px;
background-color: {$hand_color};
transform-origin: 50% 100%;
top: 20px;
left: 47px;
}
#minute-hand-{$id} {
position: absolute;
width: 4px;
height: 45px;
background-color: {$hand_color};
transform-origin: 50% 100%;
top: 5px;
left: 48px;
}
#second-hand-{$id} {
position: absolute;
width: 2px;
height: 48px;
background-color: {$sec_hand_color};
transform-origin: 50% 100%;
top: 2px;
left: 49px;
}
#clock-center-{$id} {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
top: 45px;
left: 45px;
border: 1px solid {$border_color};
}
</style>
<div id="analog-clock-{$id}">
<div id="hour-hand-{$id}"></div>
<div id="minute-hand-{$id}"></div>
{$html_sec_hand}
<div id="clock-center-{$id}"></div>
</div>
EOD;
return $html;
}
?>
** コメント [#o267a255]
#comment
ページ名:
![[PukiWiki-official]](image/pukiwiki-official.png "[PukiWiki-official]")
