MENU

読み込むJavaScriptとcssファイルを変更

JavaScript

特定の月に応じて読み込むJavaScriptとcssファイルを変更する方法

下記のjsを元に実装しました。

SOLLUNAブログ WEB制作
JavaScript桜を降らせる(葉っぱ、紅葉、雪) | SOLLUNAブログ WEB制作 桜を降らせるDEMO JSとCSSで桜を降らせるエフェクトを実装しました。まずは実装内容を確認しましょう、DEMOページをご覧ください。 DEMO DEMO コピペ用実装コード index.ht…
目次

季節ごとに変更DEMO

春(3月～5月)夏(6月～8月)秋(9月～11月)冬(12月～2月)
まずは実装内容を確認しましょう、DEMOページをご覧ください。

DEMO

実装方法

See the Pen Untitled by SOLLUNA (@ygi) on CodePen.

HTML

headタグの中にJavaScriptとCSSを読み込みます。

<script src="script.js"></script>
<link rel="stylesheet" href="style.css" id="seasonal-stylesheet">

bodyタグの中にcanvasを記載します。

<canvas id="sakura" width="2000px" height="1000px"></canvas>

CSS

デフォルト背景を設定します

body {
	margin: 0 auto;
	padding: 0;
}

#effectimg {
	position: fixed;       /*描画固定*/
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

JS

JavaScriptで現在の月を取得します。

var month = date.getMonth() + 1;

var month = date.getMonth() + 1; は、現在の日付から月の部分を取得し1を加算して現在の月を表す数値を取得するDateオブジェクトのメソッドです。

条件分岐を使用し現在の月に応じて読み込むJavaScriptとcssファイルを切り替えます。

if (month >= 3 && month <= 5) {
    stylesheet.href = "春.css";
    loadScript('春.js');
  } else if (month >= 6 && month <= 8) {
    stylesheet.href = "夏.css";
    loadScript('夏.js');
  } else if (month >= 9 && month <= 11) {
    stylesheet.href = "秋.css";
    loadScript('秋.js');
  } else {
    stylesheet.href = "冬.css";
    loadScript('冬.js');
  }

month >= 3 && month <= 5 3月から5月までには春.cssとjsを6月から8月は夏.cssとjs、9月から11月秋.cssとjs、それ以外の月は冬.cssとjs読み込みと指定します。

HTMLのヘッダーにスクリプト要素を追加

function loadScript(filePath) {
  const script = document.createElement('script');
  script.src = filePath;
  document.head.appendChild(script);
}

createElementメソッドを使用してsrc属性に引数で指定されたファイルパスをセットしdocument.head.appendChildメソッドを使用してHTMLのヘッダーにスクリプト要素を追加しています。これによりJavaScriptファイルを動的に読み込んで表示を変更することができます。

クリスマスやバレンタインデーのような特別な日に合わせてウェブサイトのデザインや動作を変更することでユーザーにとってより良い体験を提供することができるかと思います。

JavaScript
js
よかったらシェアお願いします！
  • URLをコピーしました！
目次