JS2Image_javascript スキルに基づいたクリスマス ツリー コードの実装

もうすぐクリスマスがやってきます。プログラマーとして、自分自身の休日スタイルを反映し、自分の祝福の写真をモーメントに投稿する方法が非常に必要だと思います。そう思いますか?

クリスマスと言えば、プログラマーとクリスマスの関係についてのジョークがあります。

Q: なぜプログラマーはいつもハロウィーンとクリスマスを混同するのですか?

A: 10 月 31 日 ==12 月 25 日だからです!

やめて、やめて、やめて...

まだ笑わないで、まずは落ち着こう...

クリスマスに残業をしなければならない激務のプログラマーたちを前に、憂鬱な気分を解消し、持ち味の芸術的能力を存分に発揮しましょう...

手元の IDE ツールを使用してクリスマス ツリーを表示しましょう。サンタ クロースもクリスマス プレゼントもありません。クリスマス ツリーはあります。

ほら、出てきたのは木じゃなくて塊だった。

↓↓↓↓↓↓↓↓↓↓

すべての JS コードはツリーに積み上げられます....

重要なのは、自動的に生成されるということです。

何が起こっているのですか？何をするか？

以下で共有します:

まず第一に、これはエディターがオリジナルで作成したものではありません。このツールは以前に偉大なマスターによって作成されており、その名前は js2image です。

js2image は、js ソース コードを ASCII 文字描画ソース コードに圧縮できるツールです。その特徴は、最終的なパターンに単純にアセンブルされるのではなく、圧縮されたコードをそのまま実行できることです。

ノードと npm がインストールされた子供用の靴は、次のコマンドを直接使用して js2image をインストールできます:

インストールが完了したら、次のコマンドを実行します:

パス ./resource/jquery.js は、圧縮する js ファイルのパスです

コマンドを実行すると、xmas.jsで終わるファイルが生成されるので、それを開くとクリスマスツリーが表示されます。

その他のインストール方法については、以下を参照してください:

github アドレス: https://github.com/xinyu198736/js2image

オンライン変換アドレス: http://f2e.souche.com/cheniu/js2image.html

圧縮後もコードの 99% は正常に実行できると言われています。

ははは、子供用の靴に興味があるなら、試してみてください、

今年のクリスマスはクリスマスツリー(コード)で過ごしましょう~

追記: js new image()

Image オブジェクトを作成します: var a=new Image(); Image オブジェクトの src を定義します: a.src="xxx.gif"; これは、ブラウザの画像をキャッシュすることと同じです。

画像オブジェクト:

画像オブジェクトを作成します: 画像オブジェクト名=new Image([幅],[高さ])

画像オブジェクトの属性: ボーダー全体の高さ hspace lowsrc name src vspace width

画像オブジェクトのイベント: onabort onerror onkeydown onkeypress onkeyup onload

src 属性は onload の後に記述する必要があることに注意してください。そうしないと、IE でプログラムがエラーになります。

参照コード:

var img=new Image(); 
  img.onload=function(){alert("img is loaded")}; 
  img.onerror=function(){alert("error!")}; 
  img.src="http://www.abaonet.com/img.gif"; 
  function show(){alert("body is loaded");}; 
  window.onload=show; 

上記のコードを実行した後、さまざまなブラウザでテストしたところ、IE と FF では違いがあることがわかりました。FF では、img オブジェクトの読み込みが body に含まれています。

の読み込みプロセス中、画像が読み込まれた後、本文が読み込まれたとみなされ、window.onload イベントがトリガーされます。

IE では、img オブジェクトの読み込みは、本体が読み込まれて window.onload イベントがトリガーされた後、img

の読み込み処理に含まれません。

オブジェクトはまだロードされていない可能性があり、img.onload イベントは window.onload の後にトリガーされます。

上記の質問に基づいて、ブラウザの互換性と Web ページの読み込み時間を考慮して、Image オブジェクトにあまり多くの画像を配置しないようにしてください。そうでない場合は FF

Web ページのダウンロード速度に影響します。もちろん、window.onloadの後にプリロード関数を実行すればFFでは問題ありません。

Image オブジェクトの complete 属性を通じて、画像が読み込まれたかどうかを確認できます (画像が

にある場合、各 Image オブジェクトには complete 属性があります)

読み込みプロセス中に属性値が false になると、onload、onerror、onabort イベントのいずれかが発生します。これは、(

であるかどうかに関係なく) イメージの読み込みプロセスが終了したことを意味します。

失敗)、この時点では complete 属性は true)

var img = new Image();  
img.src = oImg[0].src = this.src.replace(/small/,"big");  
oDiv.style.display = "block";  
img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})

注:

インターネット Firefox およびその他の一般的なブラウザは、Image オブジェクトの onload イベントをサポートしています。

IE8 以下、Opera は onerror イベントをサポートしていません