https://www.aster-one.com/wp-content/themes/asterone_original/js/campaignTimer.js

1/*
2campaignTimer.js
3update 2023/1/11
4======================
5キャンペーン時限設定用
6======================
7このスクリプトは予め開始日時、終了日時が決まっているキャンペーン専用です。
8キャンペーンの開始日時、終了日時の両方が設定されていないと動作しません。
9
10***********
11使用方法
12***********
131．キャンペーン期間外（デフォルト状態）に表示する要素全てにクラス camp__def を付与する。
14※常時表示の要素には付与してはならない。
152．キャンペーン期間中に表示する要素全てにクラス camp__main を付与する。
163．キャンペーン期間中、さらに特定の期間に表示する要素全てにクラス camp__sub を付与する。
17※クラス名の単語のつなぎはアンダースコア2つであることを忘れずに。
184．さらに.camp__def, .camp__main, .camp__sub を付与したすべての要素を一旦非表示にするため
19style="display:none;"を指定する。
20
215．HTML中に<scipt src="example-path/campaignTime.js" defer></scipt>を貼る。
226．campaignTime.jsの読み込みよりあとに
23--------------------------
24<script>
25  window.addEventListener('DOMContentLoaded', ()=>{
26    campaignTimer({
27      mainStart: '2023/1/11 0:00',
28      mainEnd: '2023/1/14 0:00'
29    });
30  });
31</script>
32--------------------------
33を記述する。
34jQuery本体を読み込んでいる場合は window.addEventListener('DOMContentLoaded', ()=>{}); の代わりに
35$(function(){}); のブロック{}内でcampaignTimerを記述してもよい。
36
377．最低限必要なパラメーターは以下2つ
38・キャンペーン開始日時  mainStart
39・キャンペーン終了日時  mainEnd
40
41この他にキャンペーンの中に入れ子になるキャンペーン（カウントダウンバナーなど）を表示する
42・サブキャンペーン開始日時  subStart
43・サブキャンペーン終了日時  subEnd
44※subEndを設定していない場合、サブキャンペーンの終了日時はmainEndと同じになる。
45
46テスト日時の設定
47・暫定的に現在日時を設定  testTime
48
49日時の設定は 'YYYY/MM/DD 00:00' または 'YYYY/M/D 0:00' による指定が可能。
50例）2023年1月4日　9時2分であれば '2023/01/04 09:02' または '2023/1/4 9:02' どちらも可能。
51パラメータなのでブロック{}内での記述順は順不同でも。ただしカンマで区切ること。
52
538．このJSで表示された要素は display: block; だが、data-camDisplayStyle属性の値に
54inline, ,inline-block, flexなどスタイルを指定できる。
55data-camDisplayStyle="inline"
56data-camDisplayStyle="flex"
57*/
58
59'use strict';
60
61const campaignTimer = ({mainStart = 0, mainEnd = 0, subStart = 0, subEnd = 0, testTime = 0}) => {
62  //キャンペーン表示切替の要素
63  let campAllEle = document.querySelectorAll('[class^="camp__"]');
64  campAllEle.forEach((ele)=>{
65    ele.style.display = 'none';
66  });
67
68  //キャンペーン外（デフォルト）の要素
69  let defaultElem = document.querySelectorAll('.camp__def');
70  //メインキャンペーンの要素
71  let campMainEle = document.querySelectorAll('.camp__main');
72  //サブキャンペーンの要素
73  let campSubEle = document.querySelectorAll('.camp__sub');
74
75  //メインキャンペーン開始日時
76  let main_start = new Date(mainStart).getTime();
77  //メインキャンペーン終了日時
78  let main_end = new Date(mainEnd).getTime();
79  //サブキャンペーン開始日時
80  let sub_start = new Date(subStart).getTime();
81  //サブキャンペーン終了日時
82  let sub_end = new Date(subEnd).getTime();
83  //テスト日時
84  let test_time = testTime;
85
86  //現在日時の設定
87  let nowTime;
88  if(test_time === 0) {
89    nowTime = new Date().getTime();
90  } else {
91    //テストタイムが設定されていたら現在日時を暫定的にテストタイムにする
92    nowTime = new Date(test_time).getTime();
93  }
94
95  //メインキャンペーンの表示
96  if(nowTime >

96= main_start && nowTime < main_end) {
97    //メインキャンペーン期間中
98    campMainEle.forEach((ele)=>{
99      elementDisplay(ele);
100    });
101  } else {
102    //メインキャンペーン期間外
103    defaultElem.forEach((ele)=>{
104      elementDisplay(ele);
105    });
106  }
107
108  //サブキャンペーンの表示
109  if(sub_end === 0) {
110    if(nowTime >= sub_start && nowTime < main_end) {
111      campSubEle.forEach((ele)=>{
112        elementDisplay(ele);
113      });
114    }
115  } else {
116    if(nowTime >= sub_start && nowTime < sub_end) {
117      campSubEle.forEach((ele)=>{
118        elementDisplay(ele);
119      });
120    }
121  }
122
123  //表示用関数
124  function elementDisplay(ele){
125    let displayStyle = ele.getAttribute('data-camDisplayStyle');
126    if(displayStyle === undefined) {
127      ele.style.display = 'block';
128    } else {
129      //data-camDisplayStyleが指定されていたら、displayプロパティに値を設定する
130      ele.style.display = displayStyle;
131    }
132  }
133}