数字入り四字熟語とかぞえ歌

2023年8月30日 18:26

連環の順を含む四字熟語

かぞえ歌には子守歌風、昔話・民話風、猥雑な歌など様々です。ここでは数字に関連した数え歌を絡めて取り上げダブル連番入り四字熟語にスポットライトを当てることにします。数字は一から順に繰り上がり十で元に戻ります。四字熟語は一石二鳥から始まり十年一日で終わります。二は二人三脚にしましたが二束三文もあります。六七や八九はなかなか見つからずネット上を参照しました。情報提供者に感謝申し上げます。

四字熟語はそれだけで意味を持つものに限られ字面（じづら）がそろうだけのものは排除されています。例えば六泊七日、七分八厘、八勝九敗などは四字熟語ではありませんので除かれています。

作り方

①背景画　　　　　　　　　10個の四字熟語を説明風にまとめた文言を画像にした
②四字熟語を意味する画像　四字熟語を一目見て理解できそうな画像を英文を併記しました
③かぞえ歌BGM　　　　　　昔からのかぞえ歌旋律
④スライドショーをサポートするライブラリー　静止画像をスライドショーにするライブラリー
上記のものを用意します。

スライドショーを実現させる

HTMLの仕様に古くは静止画やテキストをネオンサインのように横や縦に流れるように表示する機能としてmarquee要素がありました。HTML文書を装飾するための機能はCSSが受け持つようになってmarquee要素を使うことは少なくなりました。今回は、jQueryとmarqueeライブラリーを用いてネオンサインが流れるように表現しました。

Result

上記枠内をクリックし音声再生ボタンを押せば数字入り四字熟語とかぞえ歌
のHTMLプログラムが開始します。HTMLプログラミングについて何か質問がありましたらご連絡ください。

HTMLプログラミングコード

<html>
<head>
  <meta charset="UTF-8">
  <title>数字2つ入った四字熟語と連環の順</title>
</head>
<body>
<Div style="margin:0 auto; width:480px; height:424px; border:1px solid green;">
 <div style="font-size:20px; color:mediumblue; border:0px solid pink;">&emsp;&emsp;&emsp;数字入り四字熟語とかぞえ歌&emsp;&emsp;<span style="font-size:10px;">&copy;TacM,2023 Ver0.01</span></div>
 <div id="top" style="float:left; width:150px; height:34px; font-size:24px; color:green; border:0px solid black;">再生ボタン<span style="font-size:10px">push</span></div>
 <audio id="bgm" style="float:left; width:320px; height:34px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/kazoeuta.mp3" controls controlsList="nodownload"></audio>
 <Div style="margin-top:5px; clear:both; position:relative; width:480; height:360; border:0px solid gold;">
  <div id="mark" data-direction='left' data-duration='14000' style='width:480px; height:360px; background-image:url("https://aidesign.lolipop.jp/wp-content/uploads/2023/08/4ji10D.png"); background-size:480px 360px; position:absolute; top:0; left:0; overflow:hidden;'>
   <img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/wordplay12.png" width="4800" height="360">
  </div>
 </Div>
</Div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.js"></script>
<script type="text/javascript" charset="utf-8">
const suji="①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯";	//\u2776\u2777\u2778\u2779\u277A\u277B\u277C\u277D\u277E\u277F\u24EB\u24EC\u24ED\u24EE\u24EF\u24F0
const head=["一石二鳥", "二人三脚", "三寒四温", "四分五裂", "五臓六腑", "六順七徳", "七転八倒", "八葉九尊", "九分十分", "十年一日", "再生ボタン<span style='font-size:10px'>push</span>"];
var count=-1;
document.getElementById("bgm").addEventListener('play', function(){ //プレイイベント
 if(count < 0){                                          //初期化処理は1回こっきり
  count=0;
  jQuery(function () {                                  //marquee処理
    jQuery('#mark')
            .bind('beforeStarting', function(){         //開始前に動作する処理
            timer1sec();                                //待機関数起動
        })
        .bind('finished', function(){                   //マーキーの終了処理
            jQuery('#mark').marquee('toggle');			//jQuery('#mark').marquee('destroy');
            count=-1;
        })
        .marquee()
  });
 }
});
function timer1sec(){                                   //待機関数 //console.log("count", count, count*14.3, count, suji[count]+head[count]);
    document.getElementById("top").innerHTML = (count==10) ? head[count] : suji[count]+head[count];
    if(++count <= 10)setTimeout('timer1sec()', 14300);   //待機関数再起動, 2'35"  155" 15500ms
}
</script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？