2007-05-22

http://anond.hatelabo.jp/20070522034339

今時font color=""はなぁと思って書いてみたら妙に長くなってしまった。我ながらなんという資源の無駄。日付を手打ちしてるなら、むしろ日付全体を生成するほうが全然楽だけど、一応この形で足掻いてみた結果コメント入れまくってるから省けば多少は見やすくなるかもよ。

なお文書内のh1は全て同一フォーマットの日付であることが前提。形式は多少変わってもOKで、右から何文字目が曜日かって部分だけを書き換えれば動くはず。

<html>
<head>
  <title>曜日テスト</title>
  <style type="text/css"><!--
    span.sun{ /* 日曜日 */
      color:  red;
    }
    span.sat{ /* 土曜日 */
      color:  blue;
    }
  --></style>
  <script type="text/javascript"><!--
   // 日付フォーマット中、右から何文字目が曜日か(曜日1文字の場合にしか対応してない)
    var DAY_POSITION_FROM_RIGHT = 2;

    /*
     * <h1>yyyy年mmdd日(曜)</h1> を
     * <h1>yyyy年mmdd日<span class="xxx">(曜)</span></h1> に変換する。
     * onloadで実行して塗り替え。
     */
    function colorDay(){
      var targetList = document.getElementsByTagName("h1"); // h1要素のリストを取る
      for(i=0; i<targetList.length; i++){ // h1の数だけぶん回す
       // h1の中身を三枚に下ろす(左側、曜日部分、右側)
        var nodeValue = targetList[i].firstChild.nodeValue; // h1の子であるテキストノードの値(日付)を取る
        var nodeValueLeft = nodeValue.substring(0,nodeValue.length - DAY_POSITION_FROM_RIGHT); // 左側
        var day = nodeValue.charAt(nodeValue.length - DAY_POSITION_FROM_RIGHT); // 曜日
        var nodeValueRight = nodeValue.substring(nodeValue.length - DAY_POSITION_FROM_RIGHT + 1, nodeValue.length); // 右側

        var dayType = ""; // 曜日に付与するクラス名を算出(平日なら空)
        if(day == "日"){
          dayType = "sun";
        }
        else if(day == "土"){
          dayType = "sat";
        }

        var dayObj = document.createElement("span"); // 曜日を入れるspanノードを生成
        dayObj.appendChild(document.createTextNode(day)); // 中身文字列は三枚の真ん中(曜日
        dayObj.className = dayType; // クラスを付与

        // h1の中身作り直し
        targetList[i].firstChild.nodeValue = nodeValueLeft; // 元々の値を三枚の左側部分のみにする
        targetList[i].appendChild(dayObj); // その後ろに作った曜日のspanを足す
        targetList[i].appendChild(document.createTextNode(nodeValueRight)); // その後ろに三枚の右側を足す
      }
    }
  //--></script>
</head>
<body onload="colorDay();">
  <h1>2007年05月25日(金)</h1>
  <h1>2007年05月26日(土)</h1>
  <h1>2007年05月27日(日)</h1>
  <h1>2007年05月28日(月)</h1>
</body>
</html>
記事への反応 -
  • &lt;h1&gt;2007年05月22日(火)&lt;/h1&gt;とした時、月~金は黒文字で表示させて、土曜は青文字、日曜は赤文字表記に勝手にするように出来ますか? ジャバスクリプトとかでもムリポ? 日付は...

    • http://anond.hatelabo.jp/20070522023230 &lt;html&gt;&lt;head&gt; &lt;title&gt;Test&lt;/title&gt; &lt;script&gt; dowString = new Array('&lt;font color=&quot;#ff0000&quot;&gt;日&lt;/font&gt;','月','火','水','木','金','&lt;font color=&quot...

      • うおお、わからん、とりあえずHTMLにしてブラウザに突っ込んでみたけどよくわからない。 そのまま突っ込んだだけじゃ駄目なのかな?どういう動作になっているのかまだ把握できない、...

        • 今時font color=""はなぁと思って書いてみたら妙に長くなってしまった。我ながらなんという資源の無駄。日付を手打ちしてるなら、むしろ日付全体を生成するほうが全然楽だけど、一応こ...

          • http://anond.hatelabo.jp/20070522105212 好みの問題だけど、私ならh1要素のinnerHTMLをreplaceで置き換えちゃうな。 でも、結局静的なことなので、エディタのマクロか何かの機能で書き換えちゃう手を...

    • 結局こうした。 span.saturday { color:blue; } span.sunday { color:red; } なんというローテク。なんというお茶目なCSS。なんという資源の浪費。

    • 俺なら2箇月に一度Perlでまとめて置換するね。

記事への反応(ブックマークコメント)

ログイン ユーザー登録
ようこそ ゲスト さん