回答編集履歴
1
追記
answer
CHANGED
|
@@ -11,4 +11,71 @@
|
|
|
11
11
|
$('.main-timer__text').css('display', 'none');
|
|
12
12
|
countDownTimer.innerHTML
|
|
13
13
|
= '最終日';
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
ロジック自体の見直しを要望されているそうなので再編集しました。
|
|
17
|
+
```Javascript
|
|
18
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
19
|
+
|
|
20
|
+
// 必要ない値は設定しない。ここで行うのは受け取ったパラメータを内部で使用しやすい形にしておく事
|
|
21
|
+
// 後データ型は揃える。日時ならDate型
|
|
22
|
+
var Timer = function(saleStartTime, saleEndTime, outputId) {
|
|
23
|
+
this.saleStartTime = new Date(saleStartTime); // 開始日日時
|
|
24
|
+
this.saleEndTime = new Date(saleEndTime); // 終了日日日時
|
|
25
|
+
this.saleLastTime = new Date(this.saleEndTime - (24 * 60 * 60 * 1000)); // 最終日日時(この時点で値は作成しておく)
|
|
26
|
+
this.outputDestination = document.getElementById(outputId); // この時点で参照も済ます。
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
function showTime() {
|
|
30
|
+
var now = new Date(); // 現在日時の取得
|
|
31
|
+
var tag = ''; // 追加位置が固定ならそこに対してタグを追加する。
|
|
32
|
+
// この時はこれを追加たり書き換えたり削除したりしない事
|
|
33
|
+
// あとでCSSの調整ができなくなる。
|
|
34
|
+
|
|
35
|
+
// 判定は時間の順番に行う
|
|
36
|
+
if (now < myTimer.saleStartTime) {
|
|
37
|
+
// キャンペーン開始前
|
|
38
|
+
var tag = '<span class="main-timer__text">キャンペーン開始前</span>';
|
|
39
|
+
myTimer.outputDestination.innerHTML = tag;
|
|
40
|
+
} else if (now >= myTimer.saleStartTime && now < myTimer.saleLastTime) {
|
|
41
|
+
// キャンペーン期間中(最終日前まで)
|
|
42
|
+
var d = Math.floor((myTimer.saleEndTime - now) / (24 * 60 * 60 * 1000)); // 残り日数の計算
|
|
43
|
+
tag += '<p class="main-timer__text">終了まで</p>';
|
|
44
|
+
tag += '<div class="main-timer__num">';
|
|
45
|
+
tag += ' <div class="timer" id="timer">';
|
|
46
|
+
tag += ' <span class="main-timer__text">あと</span>' + d + '<span class="main-timer__text">日</span>';
|
|
47
|
+
tag += ' </div>';
|
|
48
|
+
tag += '</div>';
|
|
49
|
+
myTimer.outputDestination.innerHTML = tag;
|
|
50
|
+
} else if (now >= myTimer.saleLastTime && now < myTimer.saleEndTime) {
|
|
51
|
+
// キャンペーン期間中最終日 終了！
|
|
52
|
+
tag += '<p class="main-timer__text">終了!</p>'; // 質問する時タグを省略しない。指定classの影響で表示されない事もある。
|
|
53
|
+
myTimer.outputDestination.innerHTML = tag;
|
|
54
|
+
} else if (now >= myTimer.saleEndTime) {
|
|
55
|
+
// キャンペーン期間終了後
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
// こういう時、一般的には'2020/09/25 23:59:59'ではなく'2020/09/26 00:00:00'で作成して判定文を"<="ではなく"<"とする。(23:59:59.1000秒はどうなりますか？)
|
|
59
|
+
myTimer = new Timer('2020/09/21 00:00:00', '2020/09/26 00:00:00', 'main_message');
|
|
60
|
+
|
|
61
|
+
setInterval(showTime(), 1000);
|
|
62
|
+
}, false)
|
|
63
|
+
```
|
|
64
|
+
```HTML
|
|
65
|
+
<!doctype html>
|
|
66
|
+
<html lang="ja">
|
|
67
|
+
<head>
|
|
68
|
+
<meta charset="utf-8">
|
|
69
|
+
|
|
70
|
+
<script src="/jquery.min.js"></script>
|
|
71
|
+
|
|
72
|
+
<!-- Title -->
|
|
73
|
+
<title>test</title>
|
|
74
|
+
|
|
75
|
+
</head>
|
|
76
|
+
|
|
77
|
+
<body>
|
|
78
|
+
<div id="main_message" class="main-timer">
|
|
79
|
+
</div>
|
|
80
|
+
</html>
|
|
14
81
|
```
|