下のhtmlがあるとき
テストを始めるボタンを押したらボタンが消えて→2つの画像が表示→画像が消えて→スライダー(range)を動かす画面を表示→新しい2つの画像を表示→画像が消えて→スライダー.....をループさせるようにするにはどうすればいいですか
注意☆画像はまだサンプルの2枚しか追加してないです
教えてほしいjavascriptは消し方と出し方と時間経過と1連の動作をループ仕方
調べたらsetInterval ()使うてかいてたけどあまりわからなかった
<!DOCTYPE html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習プログラム</title>
</head>
<body>
<link rel="stylesheet" href="style.css">
<script src="js/gazou.js"></script>
<a href="" class="btn btn--orange">テストを始める</a>
<h3>画像のペアをセットで覚えて (3秒間表示)</h3>
<head>
<img id="mypic" src="imgleft/apple.jpg" width="380" height="320">
<img id="mypict" src="imgright/farm.jpg" width="380" height="320"><br><br>
<td>左と右の2つの画像の相性はどれくらい良い?(6秒間表示)</td><br><br>
<input type="range" id="example" min="1" max="5" step="1">
<p>2つのペア画像のフィットは<span id="current-value"></span>。</p>
</body>
</html>
No.1ベストアンサー
- 回答日時:
>教えてほしいjavascriptは消し方と出し方と時間経過と1連の動作をループ仕方
まず、htmlの要素の表示を消したり出したりする方法ですが、
たとえばhtmlで、
<p id="p-id">aaa</p>
みたいな要素があったとすると、
JavaScriptでは、
let pa = document.getElementById('p-id');
で変数paに要素を代入して、
pa.style.display = 'none';
とすれば、
cssで、display:none; としたときと同じように
表示が消えます。
その後、表示させたいタイミングで、
pa.style.display = 'block';とすればブロック要素で表示されます。
なのでhtml側で、同時に表示したり消したりしたいものを
<div>要素や<section>要素などでまとめておいて、
それにidを付け、
それをJavaScriptで操作するのが良いと思います。
===
次に、一定の経過時間でループさせる方法ですが、
関数を再帰させるようにすると良いと思います。
function loop(){
console.log('何かの処理');
window.setTimeout(function(){
loop()
},3000);
};
とすれば、loop();を最初の一回実行すると、
3000ミリ秒後にまたloop()関数が呼び出され、
さらにその3000ミリ秒後にloop()関数が呼び出され、
・・・
と、ずっとloop()関数を実行し続けます。
これを発展させれば、
function loop2(flag){
let timer; // 待ち時間の変数
if(flag === 0){
console.log('3秒待つときの処理');
timer = 3000;
flag = 1;
}else{
console.log('6秒待つときの処理');
timer = 6000;
flag = 0;
}
window.setTimeout(function(){
loop2(flag);
},timer);
};
とすれば、
loop2(0);を実行したとき、
まずflagが0なので、3秒の処理が実行され、
その3秒後にloop2(1)が呼び出され、
flagが0でないので、6秒の処理が実行され、
その6秒後にloop2(0)が呼び出され、
・・・
と、3秒と6秒の処理を、交互にできると思います。
再帰は、書いているときはエラーがたくさん出てくると思いますが、
やっていること自体は難しいことではないので、
慣れればプログラミングの効率が良くなると思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンの位置がwin/macでず...
-
画像をドラッグ&ドロップで移...
-
textareaに画像を表示したい
-
javascriptで毎月替わる画像
-
画像ランダム表示、しかしダブ...
-
Javascriptでリンク画像を1時...
-
画像クリックで別の場所の画像...
-
HTMLで条件分岐はできますか?
-
画像のランダム表示、及び画像...
-
JavaScriptとチェックボックス...
-
WEBページ立ち上げ時に1回のみ...
-
Javascript で共通の処理をどこ...
-
innerHTMLで、表示すると、一部...
-
画像の重なりの順序を代える方...
-
透過pngの透明部分以外をクリッ...
-
マウスオーバーと背景画像の固定
-
クリッカブルマップの一部分だ...
-
画像削除機能を付けたい
-
1枚の画像をクリックして複数の...
-
複数の画像を先に読み込ませ表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
javascriptで毎月替わる画像
-
画像をフォルダに入れれば表示...
-
画像の重なりの順序を代える方...
-
スワップイメージが上手く動作...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
Gifアニメ、最後のコマに行った...
-
bxsliderにて読み込み後に内容...
-
Javascript で共通の処理をどこ...
-
1枚の画像をクリックして複数の...
-
各フォルダから1枚ずつ画像をラ...
-
画像を切り替えランダム表示
-
画像削除機能を付けたい
-
マウス追従スクリプトについて
-
画像ランダム表示、しかしダブ...
-
<table>、もしくは<iframe>内で...
-
1枚の画像をクリックすると複数...
-
画像とテキストのセットをラン...
おすすめ情報