[編集モード] グラフ時計（ダークテーマ、秒針付き）

円グラフ描画機能で、アナログ時計を作りました。

＃グラフ時計（ダークテーマ、秒針付き）
＃2021/06/13

＃はじめに
/*ページ全体の背景色を黒にする*/「document.bgColor = "#202020"; document.fgColor = "#E0E0E0";」をJS実行します。
※注記：「bgColor」で背景色、「fgColor」で前面色や文字の色を設定します。
時計表示します。

3秒毎には
    時計表示します。
    ここまで

#かく
●時計表示とは
    /*時刻取得*/今を「:」で区切ります。時数に「{それ[0]}」を代入して、分数に「{それ[1]}」を代入して、秒数に「{それ[2]}」を代入します。
    /*時数を12時間で表す*/時数12は時数です。もし、時数が13以上ならば、時数12は時数12-12です。
    /*時分秒を百分率で表す*/時数100は(時数12+分数/60)/12×100です。分数100は(分数+秒数/60)/60×100です。秒数100は秒数/60×100です。

もし、時数100＜分数100ならば
        もし、秒数100＜時数100ならば　※秒時分
            時間配列に「{秒数}秒,{秒数100}
            {時数}時,{時数100-秒数100}
            {分数}分,{分数100-時数100}
            ,{100-分数100}」をCSV取得して、代入します。
        違えば
            もし、秒数100＜分数100ならば　※時秒分
                時間配列に「{時数}時,{時数100}
                {秒数}秒,{秒数100-時数100}
                {分数}分,{分数100-秒数100}
                ,{100-分数100}」をCSV取得して、代入します。
            違えば　※時分秒
                時間配列に「{時数}時,{時数100}
                {分数}分,{分数100-時数100}
                {秒数}秒,{秒数100-分数100}
                ,{100-秒数100}」をCSV取得して、代入します。
            ここまで
        ここまで
    違えば
        もし、秒数100＜分数100ならば　※秒分時
            時間配列に「{秒数}秒,{秒数100}
            {分数}分,{分数100-秒数100}
            {時数}時,{時数100-分数100}
            ,{100-時数100}」をCSV取得して、代入します。
        違えば
            もし、秒数100＜時数100ならば　※分秒時
                時間配列に「{分数}分,{分数100}
                {秒数}秒,{秒数100-分数100}
                {時数}時,{時数100-秒数100}
                ,{100-時数100}」をCSV取得して、代入します。
            違えば　※分時秒
                時間配列に「{分数}分,{分数100}
                {時数}時,{時数100-分数100}
                {秒数}秒,{秒数100-時数100}
                ,{100-秒数100}」をCSV取得して、代入します。
            ここまで

ここまで
    ここまで
    
    時間配列をデータに代入します。
    データの円グラフ描画します。
    ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] グラフ時計（ダークテーマ、秒針付き）

素材のアップロード