「気になる展覧会」記事の表部分に使ったJavaScriptのメモ - 別館子子子子子子（ねこのここねこ）はてブロ部

ブログ本館では、3か月毎に以下のような展覧会リストを（自分のために）作っています。

2018年度気になる展覧会その４（冬編） - 子子子子子子（ねこのここねこ）はてブロ部

このブログで次のようなことが出来るように 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;');
  }
}