JavaScript ／ 表示の順番を変える ／ 寿司メニューで

ブログ･CSS･JS
authentic-620681_1920.jpg

今回は、JavaScriptでHTMLの表示を変える一例です。



1　JavaScript ／ 回転する寿司メニュー

寿司メニューは、2秒間隔で書き変わっています。


※ 書き変えは、最上段を最下段に移し替え、全体を1つ上に表示



2　HTMLのソースコード

＜HTMLのソースコード＞
<div id="item0" class="item"></div>
<div id="item1" class="item"></div>
<div id="item2" class="item"></div>
<div id="item3" class="item"></div>
<div id="item4" class="item"></div>
<div id="item5" class="item"></div>
<p><button id="stop-timer">回転を止める</button></p>

① 6種類のものを1～6行目の「id="item0～5"」に割り当てている
数の増減は行数の増減でできる
6種類の名称は、JavaScriptの変数に入っている

7行目は、書き換えを止める機能で、無くても支障ない

② 例示は太字だが、機能に影響はなくソースコードをシンプルにするため省略
太字にする箇所は、例えば「 class="item"」の次に「半角スペース」+「 style="font-weight: bold"」を加える



3　JavaScriptのソースコード

＜JavaScriのソースコード＞
<script>
{
let stock = ['まぐろ', 'いか', 'いくら', 'あなご', 'えび', 'たこ'];
const intervalId = setInterval(function() {
stock.forEach (function (data, index) {
  const idName='item' + index;
  document.getElementById(idName).textContent = data;
});
const first = stock.shift();
stock.push(first);
},2000);
document.getElementById('stop-timer').onclick = function() {
  clearInterval(intervalId);
};
}
</script>

＜6種類の名称＞
3行目の変数「stock」に6種類の名称を入れた
これを別のもの、人名、地名、果物名･･･etc.の変更もOK
数を増減した時は、連動してHTMLの「item番号」も増減させる

＜繰り返しタイマー＞
4行目と11行目は2秒ごとに5～10行目の作業を繰り返して実行するタイマー
11行目の「2000」は2000ミリ秒=2秒で、この値の変更で速度を変える

＜HTMLに表示＞
5-8行は、(3行目で設定した)変数「stock」のdeta(まぐろ、いか、いくら･･･)とインデックス番号(0-5)を5行目で取得し、6行目で2つを連結して変数「idName」に代入し、 7行目で「idName」に対応する(5行目で取得した)「data」(まぐろ、いか、いくら･･･)をHTMLに書き出す

＜先頭を最後に＞
9行目で、変数「stock」の先頭を削除し(shift():)、それを変数「first」に代入
10行目で、変数「stock」の最後に変数「first」を追加し(push(): )
これで、最初の「stock」とは異なる新しい配列ができたので、この配列に基づいて5～10行を繰り返し作業を実行

＜ストップ機能＞
12～14行は、HTMLの9行目の「id="stop-timer"」クリックで実行する部分で、HTMLの9行目のストップ機能を無にした場合は不要
※ 再開は画面上段の「再読み込み」アイコンか「F5」キー

＜その他＞
1行目と16行目は<script>と</script>と対のタグ
2行目と15行目の「{」と「}」は対で、無くてもOKだが、構造が分かり易いよう「{ }」で囲まれている部分が一連処理プログラムと明示


ブログ気持玉

クリックして気持ちを伝えよう！

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど（納得、参考になった、ヘー）
驚いた
面白い
ナイス
ガッツ（がんばれ！）
かわいい

気持玉数 ： 168

なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー） なるほど（納得、参考になった、ヘー）
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス
ガッツ（がんばれ！） ガッツ（がんばれ！） ガッツ（がんばれ！） ガッツ（がんばれ！） ガッツ（がんばれ！） ガッツ（がんばれ！） ガッツ（がんばれ！） ガッツ（がんばれ！） ガッツ（がんばれ！）
かわいい かわいい かわいい かわいい かわいい かわいい かわいい かわいい かわいい

この記事へのコメント

  • winga

    こんばんは。
    お寿司の写真。
    宣伝だと思ってたら、違う！
    わけいさんのブログ記事だったとは。

    美味しいそうです。
    順番どーでもいいので、マグロをお願いします！
    2021年01月18日 18:26

  • tor

    美味しそうなお鮨ですね。
    お鮨屋さんに行きたくなります。
    メニューが次々とやって来て・・・
    これが本物のお鮨だったらな～
    2021年01月18日 19:35

  • わけい

    wingaさんへ
    コメントどうもありがとうございます。

    ここ1年近く、お客さんが激減して困っていたところ、マグロの注文がありました。
    かなり前に仕入れたマグロだけど･･･まあいいか！

    おっ！お客さん「wingaさん」じゃないですか。
    お久しぶり･･･、いや初めまして！

    先日のショートカットのプロフィール写真とちっとも変わってないですね。
    あっしゃ、あれからすっかり気に入っちゃいましてね。
    ところで、マグロですが、半年前に仕入れたんですがwingaさん食べます？
    「はい、あたくし、いたって胃腸が丈夫なの、2･3年前でも大丈夫なのよ！」
    「へいっ、じゃあ半年前は獲れたてみて～なもんですね」
    ･･･といった会話が続き･･･すっかり寿司職人になったつもり。

    そして楽しいひと時が過ぎていきました。
    2021年01月19日 14:34

  • わけい

    torさんへ
    コメントどうもありがとうございます。

    はい、これメニューなんで食べれませんが、ご注文いただければ九州にもお届けします。

    実は、私自身も食べてないのですよ。
    メニューしかいじってなくて。
    先ほどお見えになったお客さんは、半年前の仕入れのマグロのご注文でしたが、torさんにはとっておきの「toro」があるんですよ！
    確か記憶では･･･仕入れたのは1年以上前かな～
    コロナ以前の仕入れですから、安全ですよ！
    2021年01月19日 14:45
コメントを書く