学習レコード:jQueryベースの単純なカーテンウォール

非常に簡単な弾幕壁で、弾幕表示のみが実現され、データストレージや後続の再生はありません.実現原理は,入力ボックスから弾幕内容を取得し,修飾包装後にDOMを添加するように弾幕領域内に動的に表示することである.
弾幕表示の高さは表示領域内の乱数であり、20を減算するのは上部に上がらないためであり、下の字幕を押さないことを考慮すると、適切な画素を加える必要がある.

var spanH = Math.floor((Math.random())*(danmuH-20));

弾幕の移動アニメーション効果

var spanstring = $("#content_display>span:last-child");
 //      DOM     ，           #display              span。
 spanstring.stop().animate({"left":danmuW},10000,"linear",function(){
      $(this).remove();
      });
//  ，                         ，                    。     {"left":danmuW}        。

色の設定は、まず7色をカスタマイズし、弾幕生成時にランダムに1つの追加スタイルを選択するように実現されていますが、なぜすべての色を直接使わないのでしょうか.主に美観の問題を考慮して、ランダムにすべての色を生成すると、白、浅色などが認識しにくくなります.

var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"]; 
var colorra = Math.floor(Math.random()*7);
danmuspan.css({"top":spanH,"left":0,"font-size":20,"font-family":"Helvetica","color":colorArr[colorra]});

この小さなプロジェクトはfreecodecampでjavascriptの入門練習で、簡単ですが、最初は全く見当がつかず、いくつかの実現方法を検索して、最終的に書きました.成熟した案より多くの機能を削除しました.例えば、定時循環再生、バックグラウンドデータストレージなど、後で技術が精進してからもっと完璧なものを書くことを望んでいます.