JavaScript課題:日めくりカレンダー風

JavaScript

日めくりカレンダー風の表示をするサイトを作ってみてください。

仕様

  • 今日の月、日、曜日が日めくりカレンダーっぽく表示される
  • レイアウトや見た目は全てCSSを使う

イメージ画像では、土曜日の日付が青い文字になっていますが、そこまでしなくても大丈夫です。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <title>himekuri</title>
</head>
<body>
    <div id="wrapper">
        <div id="border"></div>
        <div id="month"></div>
        <div id="date"></div>
        <div id="day"></div>
    </div>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    font-size: 16pt;
    font-family: Helvetica, sans-serif;
}

#wrapper{   /* 日めくりカレンダー全体 */
    background-color: #eee;
    margin: 1em auto;
    width: 360px;
    box-shadow: 7px 7px 10px #555;
}

#border{    /* 上の枠線部分 */
    background-color: orange;
    width: 100%;
    height: 72px;
}

#month{     /* 月 */
    padding: 0.2em 0.5em 0 0.5em;
    font-size: 40pt;
    text-align: right;
    color: #777;
}

#date{      /* 日 */
    font-size: 152pt;
    font-weight: 900;
    text-align: center;
    color: #333;
}

#day{       /* 曜日 */
    padding: 0 0 0.2em 0;
    font-size: 48pt;
    font-weight: 900;
    text-align: center;
    color: #777;
}

日めくりカレンダー全体は#wrapperとして常に中央表示(margin: 1em auto; の部分)されるようにしています。枠に影(text-shadow)をつけてそれっぽくしました。

main.js

// main.js: 日めくりカレンダーっぽく表示する

window.addEventListener("load", ()=>{
    // 月、日、曜日表示部分
    let month = document.getElementById("month");
    let date = document.getElementById("date");
    let day = document.getElementById("day");
    
    // 今日の月・日・曜日を設定
    let today = new Date();
    const youbi = ["日", "月", "火", "水", "木", "金", "土"];
    const [myMonth, myDate, myDay] = [today.getMonth()+1, today.getDate(), youbi[today.getDay()]];

    // 表示
    month.textContent = myMonth + "月";
    date.textContent = myDate;
    day.textContent = myDay + "曜";
});

曜日を表す文字列は配列定数とし、Dateオブジェクトの getDate()メソッドで得られる値(0~6)と配列添え字が対応するようにしました。(youbi[today.getDay()] の部分)

複数の変数や定数に代入する分割代入が最新のESMA Scriptにはあります。

const [a, b, c] = [1, 2, 3];

今回はこれを使って月、日、曜日をそれぞれ myMonth, myDate, myDay に代入しています。

const [myMonth, myDate, myDay] = [today.getMonth()+1, today.getDate(), youbi[today.getDay()]];

次のように土曜日を、日曜日をで日付表示するには、曜日に応じてstyle属性colorを変更すればOKです。

index.html と style.css

前述の解答例と同じ

main.js

// main.js: 日めくりカレンダーっぽく表示する

window.addEventListener("load", ()=>{
    // 月、日、曜日表示部分
    let month = document.getElementById("month");
    let date = document.getElementById("date");
    let day = document.getElementById("day");
    
    // 今日の月・日・曜日を設定
    let today = new Date();
    const youbi = ["日", "月", "火", "水", "木", "金", "土"];
    const [myMonth, myDate, myDay] = [today.getMonth()+1, today.getDate(), youbi[today.getDay()]];

    // 表示
    month.textContent = myMonth + "月";

    // 土曜と日曜は日付の文字色変更
    if(myDay === "日") date.style.color = "red";
    else if(myDay === "土") date.style.color = "blue";
    
    date.textContent = myDate;
    day.textContent = myDay + "曜";
});

コメント

  1. gh より:

    こちらを参考にワードプレス用の日めくりカレンダープラグインを作ってみました♪
    https://mus.p56.biz/?p=22683

    • dennou より:

      ghさん、こんにちは。
      日めくりカレンダープラグイン拝見しました。
      面白いですね!わたしはワードプレスプラグインを作ったことがないので単純に凄いと思いました。

タイトルとURLをコピーしました