ブログ本館では、3か月毎に以下のような展覧会リストを(自分のために)作っています。
このブログで次のようなことが出来るように JavaScript を書いてみました。
- 展覧会期間が過ぎた行は非表示にする。
- 展覧会期未定の場合は会期末の日付を「00」にすることで処理を無視する(2020/5/21追加)
- 展覧会開始4週間(28日)前及び12週間(96日)前の行は表示を薄くする。
- 開催中の展覧会の期間部分をボールド且つ背景色をグレーに。
- 展覧会開始後1週間及び終了前1週間は展覧会名の色を変更して目立たせる。
いままで書いていたはてなダイアリーでは JS が使えなかったので、やりたくても出来なかったのです。
JS を一から書いたのは初めてに近いので、下手くそなのは見逃してください。
const trs = document.querySelectorAll('table > tbody > tr'); const re = /^([\d\/]+)-([\d\/]+)/; const yyyy = "2020" // 該当する記事の年に変更する const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // 当日真夜中 for (let i=1; i < trs.length; i++) { // i=0 は項目名なので排除 let tr = trs[i] let titleElem = tr.childNodes[1]; let scheduleElem = tr.childNodes[3]; let text = scheduleElem.innerText; let dates = text.match(re); // dates[1]が期間開始日、dates[2]が期間終了日 // 終了日関係 let endDateArray = dates[2].split("/"); // 会期末未定の場合には日付を 00 にすることで以下の処理を無視する if (endDateArray[endDateArray.length - 1] === "00") { continue; } let endDate; if (endDateArray.length === 2) { endDate = new Date(yyyy + "/" + endDateArray.join("/")); } else { endDate = new Date(endDateArray.join("/")); } let endDateCountFromToday = (endDate - today)/86400/1000 // 展覧会終了日を過ぎていたら表示しない(visibility:collapse;) if (endDateCountFromToday < 0) { tr.setAttribute('style', 'display:none;'); continue; } else if (endDateCountFromToday < 7) { titleElem.setAttribute('style', 'color:#39f;'); // 終了日7日以内ならばタイトルtitleElemを青色に } // 開始日関係 let startDateArray = dates[1].split("/"); let startDate; if (startDateArray.length === 2) { startDate = new Date(yyyy + "/" + startDateArray.join("/")); } else { startDate = new Date(startDateArray.join("/")); } let startDateCountFromToday = (startDate - today)/86400/1000 // 展覧会開始日が96日前よりも前だったらopacityをかなり小さくする if (startDateCountFromToday > 96) { tr.setAttribute('style', 'opacity:0.25;'); continue; } // 展覧会開始日が28日前よりも前だったらopacityを小さくする if (startDateCountFromToday > 28) { tr.setAttribute('style', 'opacity:0.6;'); continue; } // 展覧会開始日を過ぎていたら日程部分scheduleElemをボールドに if (startDateCountFromToday <= 0) { scheduleElem.setAttribute('style', 'background:#eee;font-weight:bold;'); // 展覧会開始日を過ぎて7日以内ならばタイトルtitleElemを赤色に if (startDateCountFromToday > -7 && endDateCountFromToday >= 7) { titleElem.setAttribute('style', 'color:#f63;'); } continue; } // 展覧会開始前3日以内だったらタイトルtitleElemを茶色に if (startDateCountFromToday <= 3) { titleElem.setAttribute('style', 'color:#c42;'); } }
もちろんこの JavaScript を <script>
タグに挟んで記事末尾に入れておくわけです。
参考:HTMLのテーブルの要素を消したり薄くしたりするCSSは(Safari除く) - 別館 子子子子子子(ねこのここねこ)はてブロ部
備忘録なので、誰の参考にもならなくてもいいのです(イイワケ
DRY じゃない部分をそのうち関数にしてみたりしよう(ひとりごと