teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コード修正および追記

2021/10/06 16:54

投稿

crazyBaseball
crazyBaseball

スコア21

answer CHANGED
@@ -1,2 +1,59 @@
1
1
  普通に拝借すればいいのではないでしょうか?
2
- [https://jsfiddle.net/c5whk6mj/](https://jsfiddle.net/c5whk6mj/)
2
+
3
+ [https://jsfiddle.net/0kupdr6j/](https://jsfiddle.net/0kupdr6j/)
4
+
5
+ ```HTML
6
+ <div class="target"></div>
7
+ ```
8
+
9
+ ```jQuery
10
+ const countdown_timer = function(){
11
+ let mins = 30; // ここを変えれば指定の minutes にできます
12
+ let secs = mins * 60;
13
+ let msecs = secs * 1000;
14
+ let start_date = new Date();
15
+ let end_date = new Date(start_date.getTime() + msecs);
16
+ let current_mins = 0;
17
+ let current_secs = 0;
18
+ let current_msecs = 0;
19
+
20
+ $('.target').append(
21
+ '<div class="countdown_timer">'
22
+ + '<p class="time">あと<span class="mins">'+mins+'</span>分<span class="secs">00</span>秒<span class="msecs">00</span></p>'
23
+ + '</div>'
24
+ );
25
+
26
+ if ((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0)) {
27
+ $('.text_attention').html('※このページが表示されてから、<br>60分間の限定割引になります。');
28
+ }
29
+
30
+ let timer = setInterval(function(){
31
+ let now_date = new Date();
32
+
33
+ current_mins = Math.floor(((end_date - now_date) % (24 * 60 * 60 * 1000)) / (60 * 1000)) % 60;
34
+ current_secs = Math.floor(((end_date - now_date) % (24 * 60 * 60 * 1000)) / 1000) % 60 % 60;
35
+ current_msecs = Math.floor(((end_date - now_date) % (24 * 60 * 60 * 1000)) / 10) % 100;
36
+
37
+ if(current_mins <= 9) {
38
+ current_mins = "0" + current_mins;
39
+ }
40
+ if(current_secs <= 9) {
41
+ current_secs = "0" + current_secs;
42
+ }
43
+ if(current_msecs <= 9){
44
+ current_msecs = "0" + current_msecs;
45
+ }
46
+
47
+ $(".time").html(
48
+ 'あと'
49
+ + '<span class="font_size_xl">' + current_mins + '</span>'
50
+ + '分'
51
+ + '<span class="font_size_xl">' + current_secs + '</span>'
52
+ + '秒'
53
+ + '<span class="font_size_xl">' + current_msecs + '</span>'
54
+ );
55
+ },10);
56
+ }
57
+
58
+ countdown_timer();
59
+ ```