質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

812閲覧

setTimeoutを仕組み化させてコードの記述量を抑えたい。

Yuki2

総合スコア52

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/05/04 09:06

編集2021/05/04 09:44

コードをコンパクトにして関数を使いまわしたい。

二つの要素にshowクラスを時間差で付与させています。
要素の数が増えていくことを想定すると効率が悪いため、functionを簡素にしたいです。

js

1function showFn() { 2 setTimeout(() => { 3 for (i = 0; i < fluffy.length; i++) { 4 fluffy[0].classList.add('show'); 5 } 6 }, 1000); 7 setTimeout(() => { 8 for (i = 0; i < fluffy.length; i++) { 9 fluffy[1].classList.add('show'); 10 } 11 }, 2000); 12};

html

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <link rel="stylesheet" href="css/style.css"> 10</head> 11 12<body> 13 <header class="header"> 14 <div class="header__wrapper"> 15 <nav class="header__list"> 16 <div class="header__title"> 17 test 18 </div> 19 <div class="header__btn-wrapper"> 20 <a href="" class="header__login btn">Login</a> 21 </div> 22 </nav> 23 </div> 24 </header> 25 26 <section class="content"> 27 <h1 class="content__title fluffy">Welcome to our service</h1> 28 <div class="content__column fluffy"> 29 <div class="content__btn-wrapper"> 30 <a href="" class="content__btn btn">Guest</a> 31 </div> 32 <div class="content__btn-wrapper"> 33 <a href="" class="content__btn btn">Resister</a> 34 </div> 35 </div> 36 </section> 37 <script src="js/script.js"></script> 38</body> 39 40</html>

css

1* { 2 margin: 0; 3 padding: 0; 4} 5 6html { 7 font-size: 62.5%; 8} 9 10body { 11 background-color: #29b6f6; 12} 13 14.btn { 15 display: inline-block; 16 border-radius: 8px; 17 text-decoration: none; 18 color: #29b6f6; 19 background-color: #ffffff; 20} 21 22.fluffy { 23 opacity: 0; 24 visibility: hidden; 25 -webkit-transform: translateX(30px); 26 transform: translateX(30px); 27 -webkit-transition: all 3s; 28 transition: all 3s; 29} 30 31.show { 32 opacity: 1; 33 visibility: visible; 34 -webkit-transform: translateX(0px); 35 transform: translateX(0px); 36} 37 38.header__wrapper { 39 padding: 2rem; 40} 41 42.header__list { 43 display: -webkit-box; 44 display: -ms-flexbox; 45 display: flex; 46 -webkit-box-pack: justify; 47 -ms-flex-pack: justify; 48 justify-content: space-between; 49 -webkit-box-align: center; 50 -ms-flex-align: center; 51 align-items: center; 52} 53 54.header__title { 55 font-size: 1.6rem; 56} 57 58.header__login { 59 text-align: center; 60 width: 120px; 61 padding: 1rem; 62 font-size: 2rem; 63} 64 65.content { 66 text-align: center; 67 padding-top: 9rem; 68 padding-bottom: 9rem; 69} 70 71.content__title { 72 font-size: 3.6rem; 73 color: #ffffff; 74 margin-bottom: 12rem; 75} 76 77.content__btn-wrapper { 78 margin-bottom: 6rem; 79} 80 81.content__btn { 82 padding: 1rem; 83 width: 300px; 84 font-size: 1.6rem; 85} 86 87.content__column > :last-child { 88 margin-bottom: 0; 89} 90/*# sourceMappingURL=style.css.map */

js

1// const fluffy = document.querySelectorAll('fluffy'); 2// console.log(fluffy); 3 4// window.addEventListener('load',function(){ 5// setTimeout(() => { 6// showFn(); 7// }, 2000); 8// }); 9 10// function showFn() { 11// fluffy.classList.add('show'); 12// } 13 14 15// window.addEventListener('load',function(){ 16// setTimeout(function(){ 17// function1(); 18// function2(); 19// },1000) 20// }); 21 22 23const fluffy = document.getElementsByClassName('fluffy'); 24console.log(fluffy); 25 26window.addEventListener('load', function () { 27 // setTimeout(() => { 28 // for (i = 0; i < fluffy.length; i++) { 29 // fluffy[0].classList.add('show'); 30 // } 31 // }, 1000); 32 33 // setTimeout(() => { 34 // for (i = 0; i < fluffy.length; i++) { 35 // fluffy[1].classList.add('show'); 36 // } 37 // }, 2000); 38 showFn(); 39 40}); 41 42 43function showFn() { 44 setTimeout(() => { 45 for (i = 0; i < fluffy.length; i++) { 46 fluffy[0].classList.add('show'); 47 } 48 }, 1000); 49 setTimeout(() => { 50 for (i = 0; i < fluffy.length; i++) { 51 fluffy[1].classList.add('show'); 52 } 53 }, 2000); 54};

試したこと

for文を活用して取得したfluffyクラスを分離させ、各々にsetTimeoutを用いた。

js

1//for文を挟まないと二つ目のsetTimeoutが発火しない。 2function showFn() { 3 setTimeout(() => { 4 // for (i = 0; i < fluffy.length; i++) { 5 fluffy[0].classList.add('show'); 6 // } 7 }, 1000); 8 setTimeout(() => { 9 // for (i = 0; i < fluffy.length; i++) { 10 fluffy[1].classList.add('show'); 11 // } 12 }, 2000); 13};

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/05/04 09:22 編集

> 二つの要素にshowクラスを時間差で付与させています。 ※ コードの読み間違いでした 同じ要素に2回付与している(2回目はすでにクラスがあるので無意味)ように見えるのですが、そうではない動作を考えていますか?
Yuki2

2021/05/04 09:13

const fluffy = document.getElementsByClassName('fluffy');で取得した要素を[0][1]と切り離して考えています。 出現させたい要素が増えたときにいちいちsetTimeout(() =>...を何度も書かないようにしたいです。
maisumakun

2021/05/04 09:20 編集

関数内のfor (i = 0; i < fluffy.length; i++)のループは何のために書いていますか? (これがあったので、全要素に対してクラスを変えるものと勘違いしてしまいました)
Yuki2

2021/05/04 09:23

fluffyを[0][1]に切り分けるために書きました。 ループ文は必要ないですか?
maisumakun

2021/05/04 09:25 編集

はい、「同じクラスを何度も付与する」という、1度でいい作業を無駄に繰り返すだけのループです。
Yuki2

2021/05/04 09:27

for文を消したら二つ目の処理が実行されなくなりました。
maisumakun

2021/05/04 09:41

2つ目の関数の先頭に書かれたqは何ですか?
Yuki2

2021/05/04 09:44

誤字ですね。 ただいま修正いたしました。
maisumakun

2021/05/04 09:45

qを消しても2つ目は動作しないままですか?
hide5stm

2021/05/04 12:11

あまり見た目よくないですが、setTimeout()を使い回せる関数を作ってみました。 ``` showFunc(0, 1000); showFunc(1, 2000); ``` 以下で動作します。 https://jsfiddle.net/hmdgqrav/4/
guest

回答1

0

ベストアンサー

javascript

1<style> 2.fluffy:not(.show){ 3display:none; 4} 5</style> 6<script> 7var timerId=setInterval(()=>{ 8 const node=document.querySelector('.fluffy:not(.show)'); 9 if(node !== null ){ 10 node.classList.add('show'); 11 }else{ 12 clearInterval(timerId); 13 } 14},1000); 15</script> 16<div class="fluffy">1</div> 17<div class="fluffy">2</div> 18<div class="fluffy">3</div>

投稿2021/05/06 01:42

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yuki2

2021/05/10 07:56

ご連絡が遅れてすみません。 こちらの方法で無事にやりたいことが実行できました。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問