teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ｓ-時間設定とカウントダウンのjs

編集履歴

質問編集履歴

4

usually箇所の修正

2016/09/05 02:54

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- -時間設定とカウントダウンのjs
1
+ ｓ-時間設定とカウントダウンのjs
test CHANGED
@@ -30,7 +30,9 @@
30
30
 
31
31
 
32
32
 
33
+ ```
34
+
33
- ```<div id="usually">
35
+ <div id="usually">
34
36
 
35
37
  <ul class="bxslider">
36
38
 
@@ -120,9 +122,89 @@
120
122
 
121
123
  function CDT(){
122
124
 
125
+ var tl = new Date('2016/9/06 13:00:00');
126
+
127
+ var timer = new CountdownTimer('CDT',tl,'キャンペーンは終了しました');
128
+
129
+ timer.countDown();
130
+
131
+ }
132
+
133
+ window.onload=function(){
134
+
135
+ CDT();
136
+
137
+ }
138
+
139
+ </script>
140
+
141
+ <script>
142
+
143
+ function CountdownTimer(elm,tl,mes){
144
+
145
+ this.initialize.apply(this,arguments);
146
+
147
+ }
148
+
149
+ CountdownTimer.prototype={
150
+
151
+ initialize:function(elm,tl,mes) {
152
+
153
+ this.elem = document.getElementById(elm);
154
+
155
+ this.tl = tl;
156
+
157
+ this.mes = mes;
158
+
159
+ },countDown:function(){
160
+
161
+ var timer='';
162
+
163
+ var today=new Date();
164
+
165
+ var day=Math.floor((this.tl-today)/(24*60*60*1000));
166
+
167
+ var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
168
+
169
+ var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
170
+
171
+ var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
172
+
173
+ var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
174
+
175
+ var me=this;
176
+
177
+ day++;
178
+
179
+
180
+
181
+ if( ( this.tl - today ) > 0 ){
182
+
183
+ if (day) timer += '<span class="cp">キャンペーン終了まであと</span><span class="day">'+day+'日</span>';
184
+
185
+
186
+
187
+ this.elem.innerHTML = timer;
188
+
189
+ tid = setTimeout( function(){me.countDown();},10 );
190
+
191
+ }else{
192
+
193
+ this.elem.innerHTML = this.mes;
194
+
195
+ return;
196
+
197
+ }
198
+
199
+ },addZero:function(num){ return ('0'+num).slice(-2); }
200
+
201
+ }
202
+
203
+ function CDT2(){
204
+
123
205
  var tl = new Date('2016/a/aa aa:aa:aa');
124
206
 
125
- var timer = new CountdownTimer('CDT',tl,'キャンペーンは終了しました');
207
+ var timer = new CountdownTimer('CDT2',tl,'キャンペーンは終了しました');
126
208
 
127
209
  timer.countDown();
128
210
 
@@ -130,206 +212,126 @@
130
212
 
131
213
  window.onload=function(){
132
214
 
133
- CDT();
215
+ CDT2();
134
216
 
135
217
  }
136
218
 
137
219
  </script>
138
220
 
221
+
222
+
223
+ </script>
224
+
225
+
226
+
227
+
228
+
139
229
  <script>
140
230
 
141
- function CountdownTimer(elm,tl,mes){
142
-
143
- this.initialize.apply(this,arguments);
144
-
145
- }
146
-
147
- CountdownTimer.prototype={
148
-
149
- initialize:function(elm,tl,mes) {
150
-
151
- this.elem = document.getElementById(elm);
152
-
153
- this.tl = tl;
154
-
155
- this.mes = mes;
156
-
157
- },countDown:function(){
158
-
159
- var timer='';
160
-
161
- var today=new Date();
162
-
163
- var day=Math.floor((this.tl-today)/(24*60*60*1000));
164
-
165
- var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
166
-
167
- var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
168
-
169
- var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
170
-
171
- var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
172
-
173
- var me=this;
174
-
175
- day++;
176
-
177
-
178
-
179
- if( ( this.tl - today ) > 0 ){
180
-
181
- if (day) timer += '<span class="cp">キャンペーン終了まであと</span><span class="day">'+day+'日</span>';
182
-
183
-
184
-
185
- this.elem.innerHTML = timer;
186
-
187
- tid = setTimeout( function(){me.countDown();},10 );
231
+ // 土曜日
232
+
233
+ var startday1 = new Date('2016/bb/bb 00:00:01');
234
+
235
+ var endday1 = new Date('2016/bb/bb 23:59:59');
236
+
237
+
238
+
239
+ // 日曜日
240
+
241
+ var startday2 = new Date('2016/cc/cc 00:00:01');
242
+
243
+ var endday2 = new Date('2016/cc/cc 23:59:59');
244
+
245
+
246
+
247
+ var today = new Date();
248
+
249
+
250
+
251
+ var hour = today.getHours();
252
+
253
+ var minute = today.getMinutes();
254
+
255
+ var time = ('0' + hour).slice(-2) + ":" + ('0' + minute).slice(-2);
256
+
257
+
258
+
259
+ document.getElementById("usually").style.display="none";
260
+
261
+ document.getElementById("ccc").style.display="none";
262
+
263
+
264
+
265
+
266
+
267
+ //土曜日の時間帯設定
268
+
269
+ if( startday1 < today && today < endday1 ){
270
+
271
+ //9月03日（土） 07:25～13:00
272
+
273
+ if(time >= "07:25" && time < "21:00"){
274
+
275
+ document.getElementById("ccc").style.display="block";
276
+
277
+ document.getElementById("usually").style.display="none";
278
+
279
+ }
280
+
281
+ else{
282
+
283
+ //それ以外の時間帯
284
+
285
+ document.getElementById("usually").style.display="block";
286
+
287
+ document.getElementById("ccc").style.display="none";
288
+
289
+ }
290
+
291
+ //日曜日の時間帯設定
292
+
293
+ }else if( startday2 < today && today < endday2 ){
294
+
295
+
296
+
297
+ //9月04日（日） 08:30～14:00
298
+
299
+ if(time >= "08:30" && time < "14:00"){
300
+
301
+ document.getElementById("ccc").style.display="block";
302
+
303
+ document.getElementById("usually").style.display="none";
304
+
305
+ //}else if(time >= "18:00" && time < "19:30"){
306
+
307
+ //18:00～19:30
308
+
309
+ // document.getElementById("ccc").style.display="block";
310
+
311
+ // document.getElementById("usually").style.display="none";
188
312
 
189
313
  }else{
190
314
 
315
+ //それ以外の時間帯
316
+
317
+ document.getElementById("usually").style.display="block";
318
+
191
- this.elem.innerHTML = this.mes;
319
+ document.getElementById("ccc").style.display="none";
192
-
193
- return;
320
+
194
-
195
- }
321
+ }
196
-
197
- },addZero:function(num){ return ('0'+num).slice(-2); }
322
+
198
-
199
- }
200
-
201
- function CDT2(){
323
+ //それ以外の日
324
+
202
-
325
+ }else{
326
+
203
- var tl = new Date('2016/a/aa aa:aa:aa');
327
+ document.getElementById("usually").style.display="block";
204
-
328
+
205
- var timer = new CountdownTimer('CDT2',tl,'キャンペーンは終了しました');
329
+ document.getElementById("ccc").style.display="none";
206
-
207
- timer.countDown();
330
+
208
-
209
- }
331
+
210
-
211
- window.onload=function(){
212
-
213
- CDT2();
214
332
 
215
333
  }
216
334
 
217
335
  </script>
218
336
 
219
-
220
-
221
- </script>
222
-
223
-
224
-
225
-
226
-
227
- <script>
228
-
229
- // 土曜日
230
-
231
- var startday1 = new Date('2016/bb/bb 00:00:01');
232
-
233
- var endday1 = new Date('2016/bb/bb 23:59:59');
234
-
235
-
236
-
237
- // 日曜日
238
-
239
- var startday2 = new Date('2016/cc/cc 00:00:01');
240
-
241
- var endday2 = new Date('2016/cc/cc 23:59:59');
242
-
243
-
244
-
245
- var today = new Date();
246
-
247
-
248
-
249
- var hour = today.getHours();
250
-
251
- var minute = today.getMinutes();
252
-
253
- var time = ('0' + hour).slice(-2) + ":" + ('0' + minute).slice(-2);
254
-
255
-
256
-
257
- document.getElementById("usually").style.display="none";
258
-
259
- document.getElementById("ccc").style.display="none";
260
-
261
-
262
-
263
-
264
-
265
- //土曜日の時間帯設定
266
-
267
- if( startday1 < today && today < endday1 ){
268
-
269
- //9月03日（土） 07:25～13:00
270
-
271
- if(time >= "07:25" && time < "21:00"){
272
-
273
- document.getElementById("ccc").style.display="block";
274
-
275
- document.getElementById("usually").style.display="none";
276
-
277
- }
278
-
279
- else{
280
-
281
- //それ以外の時間帯
282
-
283
- document.getElementById("usually").style.display="block";
284
-
285
- document.getElementById("ccc").style.display="none";
286
-
287
- }
288
-
289
- //日曜日の時間帯設定
290
-
291
- }else if( startday2 < today && today < endday2 ){
292
-
293
-
294
-
295
- //9月04日（日） 08:30～14:00
296
-
297
- if(time >= "08:30" && time < "14:00"){
298
-
299
- document.getElementById("ccc").style.display="block";
300
-
301
- document.getElementById("usually").style.display="none";
302
-
303
- //}else if(time >= "18:00" && time < "19:30"){
304
-
305
- //18:00～19:30
306
-
307
- // document.getElementById("ccc").style.display="block";
308
-
309
- // document.getElementById("usually").style.display="none";
310
-
311
- }else{
312
-
313
- //それ以外の時間帯
314
-
315
- document.getElementById("usually").style.display="block";
316
-
317
- document.getElementById("ccc").style.display="none";
318
-
319
- }
320
-
321
- //それ以外の日
322
-
323
- }else{
324
-
325
- document.getElementById("usually").style.display="block";
326
-
327
- document.getElementById("ccc").style.display="none";
328
-
329
-
330
-
331
- }
332
-
333
- </script>
334
-
335
337
  ```

3

参考サイトの追加

2016/09/05 02:54

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,14 @@
16
16
 
17
17
 
18
18
 
19
+ http://plusblog.jp/3719/
20
+
21
+ カウントダウンは上記のサイトを参考にしております。
22
+
23
+
24
+
25
+
26
+
19
27
  すいません。
20
28
 
21
29
  ソースを貼り付けます。

2

コードをブロックで囲んでおります。

2016/09/05 02:31

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 時間設定とカウントダウンのjs
1
+ -時間設定とカウントダウンのjs
test CHANGED
@@ -20,7 +20,9 @@
20
20
 
21
21
  ソースを貼り付けます。
22
22
 
23
+
24
+
23
- <div id="usually">
25
+ ```<div id="usually">
24
26
 
25
27
  <ul class="bxslider">
26
28
 
@@ -321,3 +323,5 @@
321
323
  }
322
324
 
323
325
  </script>
326
+
327
+ ```

1

ソースの記載

2016/09/05 02:24

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -13,3 +13,311 @@
13
13
 
14
14
 
15
15
  教えて頂けると助かります。
16
+
17
+
18
+
19
+ すいません。
20
+
21
+ ソースを貼り付けます。
22
+
23
+ <div id="usually">
24
+
25
+ <ul class="bxslider">
26
+
27
+ <li><a href="aaa"><img src="/images/aaa.jpg" alt="aaa"><div id="CDT"></div></a></li>
28
+
29
+ <li><a href="aaa"><img src="/images/aaa.jpg" alt="aaa"></a>
30
+
31
+ </ul>
32
+
33
+ </div>
34
+
35
+
36
+
37
+ <div id="ccc">
38
+
39
+ <ul class="bxslider">
40
+
41
+ <li><a href="bbb"><img src="/images/aaa.jpg" alt=""><div id="CDT2"></div></a></li>
42
+
43
+ <li><a href="bbb"><img src="/images/aaa.jpg" alt=""></a>
44
+
45
+ </ul>
46
+
47
+ </div>
48
+
49
+ <script>
50
+
51
+ function CountdownTimer(elm,tl,mes){
52
+
53
+ this.initialize.apply(this,arguments);
54
+
55
+ }
56
+
57
+ CountdownTimer.prototype={
58
+
59
+ initialize:function(elm,tl,mes) {
60
+
61
+ this.elem = document.getElementById(elm);
62
+
63
+ this.tl = tl;
64
+
65
+ this.mes = mes;
66
+
67
+ },countDown:function(){
68
+
69
+ var timer='';
70
+
71
+ var today=new Date();
72
+
73
+ var day=Math.floor((this.tl-today)/(24*60*60*1000));
74
+
75
+ var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
76
+
77
+ var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
78
+
79
+ var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
80
+
81
+ var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
82
+
83
+ var me=this;
84
+
85
+ day++;
86
+
87
+
88
+
89
+ if( ( this.tl - today ) > 0 ){
90
+
91
+ if (day) timer += '<span class="cp">キャンペーン終了まであと</span><span class="day">'+day+'日</span>';
92
+
93
+
94
+
95
+ this.elem.innerHTML = timer;
96
+
97
+ tid = setTimeout( function(){me.countDown();},10 );
98
+
99
+ }else{
100
+
101
+ this.elem.innerHTML = this.mes;
102
+
103
+ return;
104
+
105
+ }
106
+
107
+ },addZero:function(num){ return ('0'+num).slice(-2); }
108
+
109
+ }
110
+
111
+ function CDT(){
112
+
113
+ var tl = new Date('2016/a/aa aa:aa:aa');
114
+
115
+ var timer = new CountdownTimer('CDT',tl,'キャンペーンは終了しました');
116
+
117
+ timer.countDown();
118
+
119
+ }
120
+
121
+ window.onload=function(){
122
+
123
+ CDT();
124
+
125
+ }
126
+
127
+ </script>
128
+
129
+ <script>
130
+
131
+ function CountdownTimer(elm,tl,mes){
132
+
133
+ this.initialize.apply(this,arguments);
134
+
135
+ }
136
+
137
+ CountdownTimer.prototype={
138
+
139
+ initialize:function(elm,tl,mes) {
140
+
141
+ this.elem = document.getElementById(elm);
142
+
143
+ this.tl = tl;
144
+
145
+ this.mes = mes;
146
+
147
+ },countDown:function(){
148
+
149
+ var timer='';
150
+
151
+ var today=new Date();
152
+
153
+ var day=Math.floor((this.tl-today)/(24*60*60*1000));
154
+
155
+ var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
156
+
157
+ var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
158
+
159
+ var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
160
+
161
+ var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
162
+
163
+ var me=this;
164
+
165
+ day++;
166
+
167
+
168
+
169
+ if( ( this.tl - today ) > 0 ){
170
+
171
+ if (day) timer += '<span class="cp">キャンペーン終了まであと</span><span class="day">'+day+'日</span>';
172
+
173
+
174
+
175
+ this.elem.innerHTML = timer;
176
+
177
+ tid = setTimeout( function(){me.countDown();},10 );
178
+
179
+ }else{
180
+
181
+ this.elem.innerHTML = this.mes;
182
+
183
+ return;
184
+
185
+ }
186
+
187
+ },addZero:function(num){ return ('0'+num).slice(-2); }
188
+
189
+ }
190
+
191
+ function CDT2(){
192
+
193
+ var tl = new Date('2016/a/aa aa:aa:aa');
194
+
195
+ var timer = new CountdownTimer('CDT2',tl,'キャンペーンは終了しました');
196
+
197
+ timer.countDown();
198
+
199
+ }
200
+
201
+ window.onload=function(){
202
+
203
+ CDT2();
204
+
205
+ }
206
+
207
+ </script>
208
+
209
+
210
+
211
+ </script>
212
+
213
+
214
+
215
+
216
+
217
+ <script>
218
+
219
+ // 土曜日
220
+
221
+ var startday1 = new Date('2016/bb/bb 00:00:01');
222
+
223
+ var endday1 = new Date('2016/bb/bb 23:59:59');
224
+
225
+
226
+
227
+ // 日曜日
228
+
229
+ var startday2 = new Date('2016/cc/cc 00:00:01');
230
+
231
+ var endday2 = new Date('2016/cc/cc 23:59:59');
232
+
233
+
234
+
235
+ var today = new Date();
236
+
237
+
238
+
239
+ var hour = today.getHours();
240
+
241
+ var minute = today.getMinutes();
242
+
243
+ var time = ('0' + hour).slice(-2) + ":" + ('0' + minute).slice(-2);
244
+
245
+
246
+
247
+ document.getElementById("usually").style.display="none";
248
+
249
+ document.getElementById("ccc").style.display="none";
250
+
251
+
252
+
253
+
254
+
255
+ //土曜日の時間帯設定
256
+
257
+ if( startday1 < today && today < endday1 ){
258
+
259
+ //9月03日（土） 07:25～13:00
260
+
261
+ if(time >= "07:25" && time < "21:00"){
262
+
263
+ document.getElementById("ccc").style.display="block";
264
+
265
+ document.getElementById("usually").style.display="none";
266
+
267
+ }
268
+
269
+ else{
270
+
271
+ //それ以外の時間帯
272
+
273
+ document.getElementById("usually").style.display="block";
274
+
275
+ document.getElementById("ccc").style.display="none";
276
+
277
+ }
278
+
279
+ //日曜日の時間帯設定
280
+
281
+ }else if( startday2 < today && today < endday2 ){
282
+
283
+
284
+
285
+ //9月04日（日） 08:30～14:00
286
+
287
+ if(time >= "08:30" && time < "14:00"){
288
+
289
+ document.getElementById("ccc").style.display="block";
290
+
291
+ document.getElementById("usually").style.display="none";
292
+
293
+ //}else if(time >= "18:00" && time < "19:30"){
294
+
295
+ //18:00～19:30
296
+
297
+ // document.getElementById("ccc").style.display="block";
298
+
299
+ // document.getElementById("usually").style.display="none";
300
+
301
+ }else{
302
+
303
+ //それ以外の時間帯
304
+
305
+ document.getElementById("usually").style.display="block";
306
+
307
+ document.getElementById("ccc").style.display="none";
308
+
309
+ }
310
+
311
+ //それ以外の日
312
+
313
+ }else{
314
+
315
+ document.getElementById("usually").style.display="block";
316
+
317
+ document.getElementById("ccc").style.display="none";
318
+
319
+
320
+
321
+ }
322
+
323
+ </script>