teratail
回答率
85.48%
質問するログイン新規登録
トップWebサイトに関する質問指定した時間ごとにクラスを付け替えたい

編集履歴

回答編集履歴

3

cssの記述を追加

2023/01/24 12:00

投稿

ypp
ypp

スコア66

test CHANGED
@@ -12,4 +12,36 @@
12
12
  }
13
13
  });
14
14
  ```
15
+ [サンプル](https://codepen.io/ypppp/pen/XWBEjGp)
15
16
  こうすることで、最初はcolor01を削除color02を追加...color06を削除color01を追加、とループすることができるはずです。
17
+
18
+ または、cssだけで設定できます。
19
+ ```css
20
+ #colorbox{
21
+ width:100%;
22
+ height:300px;
23
+ animation: bgcolor 36s infinite;
24
+ }
25
+
26
+ @keyframes bgcolor {
27
+ 0% {
28
+ background: linear-gradient(180deg, rgb(154, 174, 186), rgb(90, 129, 145));
29
+ }
30
+ 20% {
31
+ background: linear-gradient(180deg, rgb(239, 209, 184), rgb(224, 146, 149));
32
+ }
33
+ 40% {
34
+ background: linear-gradient(180deg, rgb(219, 196, 189), rgb(191, 146, 108));
35
+ }
36
+ 60% {
37
+ background: linear-gradient(180deg, rgb(227, 204, 159), rgb(213, 194, 90));
38
+ }
39
+ 80% {
40
+ background: linear-gradient(180deg, rgb(219, 189, 189), rgb(110, 136, 103));
41
+ }
42
+ 100% {
43
+ background: linear-gradient(180deg, rgb(154, 174, 186), rgb(90, 129, 145));
44
+ }
45
+ }
46
+ ```
47
+ [サンプル](https://codepen.io/ypppp/pen/gOjewNq)

2

padStart必要ない

2023/01/24 11:51

投稿

ypp
ypp

スコア66

test CHANGED
@@ -6,10 +6,9 @@
6
6
  let counter = 1;
7
7
  setInterval(changeBackground, 6000);
8
8
  function changeBackground() {
9
- $("#colorbox").removeClass("color" + (""+counter).padStart(2, "0"));
9
+ $("#colorbox").removeClass("color0" + counter);
10
10
  if(counter >= 6) counter = 0;
11
- $("#colorbox").addClass("color" + (""+counter).padStart(2, "0"));
11
+ $("#colorbox").addClass("color0" + ++counter);
12
- counter++;
13
12
  }
14
13
  });
15
14
  ```

1

padStartの構文ミス

2023/01/24 11:48

投稿

ypp
ypp

スコア66

test CHANGED
@@ -6,9 +6,10 @@
6
6
  let counter = 1;
7
7
  setInterval(changeBackground, 6000);
8
8
  function changeBackground() {
9
- $("#colorbox").removeClass("color" + padStart(counter, 2));
9
+ $("#colorbox").removeClass("color" + (""+counter).padStart(2, "0"));
10
10
  if(counter >= 6) counter = 0;
11
- $("#colorbox").addClass("color" + padStart(++counter, 2));
11
+ $("#colorbox").addClass("color" + (""+counter).padStart(2, "0"));
12
+ counter++;
12
13
  }
13
14
  });
14
15
  ```