Melaksanakan kod pokok Krismas berdasarkan kemahiran JS2Image_javascript

Krismas akan datang tidak lama lagi Sebagai seorang pengaturcara, saya fikir adalah sangat perlu untuk mencerminkan gaya percutian anda yang unik dan cara menyiarkan foto berkat anda sendiri dalam Moments Adakah anda fikir begitu?

Bercakap tentang Krismas, ada jenaka tentang hubungan antara pengaturcara dan Krismas:

S: Mengapakah pengaturcara sentiasa mengelirukan Halloween dan Krismas?

J: Kerana 31 okt==25 Dis!

Berhenti, berhenti, berhenti...

Jangan gelak, mari bertenang dulu...

Menghadapi pengaturcara yang bekerja keras yang terpaksa bekerja lebih masa pada Krismas, mari kita hilangkan mood kita yang membosankan dan berikan permainan sepenuhnya kepada kebolehan artistik kita yang unik.

Mari kami menggunakan alat IDE di tangan untuk memaparkan pokok Krismas. Tiada Santa Claus, tiada hadiah Krismas, kami mempunyai pokok Krismas.

Lihat, ia keluar, bukan pokok, tetapi ketulan.

↓↓↓↓↓↓↓↓↓↓

Semua kod js dilonggokkan ke dalam pokok....

Kuncinya ialah ia dijana secara automatik!

Apa yang sedang berlaku? Apa yang perlu dilakukan?

Saya akan berkongsi dengan anda di bawah:

Pertama sekali, ini bukan ciptaan asal editor Seorang pakar yang hebat telah mencipta alat ini sebelum ini, ia dipanggil js2image.

js2image ialah alat yang boleh memampatkan kod sumber js ke dalam kod sumber lukisan aksara ascii.

Kasut kanak-kanak dengan nod dan npm dipasang boleh terus menggunakan arahan berikut untuk memasang js2image:

Selepas pemasangan selesai, laksanakan arahan:

Laluan ./resource/jquery.js ialah laluan fail js yang anda mahu mampatkan

Selepas melaksanakan arahan, fail yang berakhir dengan xmas.js akan dihasilkan Apabila anda membukanya, anda boleh melihat pokok Krismas.

Untuk kaedah pemasangan lain, sila lihat:

alamat github: https://github.com/xinyu198736/js2image

Alamat penukaran dalam talian: http://f2e.souche.com/cheniu/js2image.html

Dikatakan bahawa 99% kod boleh berjalan seperti biasa selepas pemampatan.

Hahaha, jika anda berminat dengan kasut kanak-kanak, anda boleh mencubanya,

Jom habiskan Krismas tahun ini dengan pokok Krismas (kod pegun)~

PS: js imej baharu()

Buat objek Imej: var a=new Image(); Tentukan src objek Imej: a.src="xxx.gif";

Objek imej:

Buat objek imej: Nama objek imej=Imej baharu([lebar],[tinggi])

Atribut objek imej: tinggi lengkap sempadan hspace lowsrc nama src vspace lebar

Acara objek imej: onabort onerror onkeydown onkeypress onkeyup onload

Perlu diambil perhatian bahawa atribut src mesti ditulis selepas onload, jika tidak program akan ralat dalam IE.

Kod rujukan:

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; 

Selepas menjalankan kod di atas, kami mengujinya dalam pelayar yang berbeza dan mendapati terdapat perbezaan antara IE dan FF Dalam FF, pemuatan objek img disertakan dalam badan

Semasa proses pemuatan

, selepas img dimuatkan, badan dianggap dimuatkan dan peristiwa window.onload dicetuskan.

Dalam IE, pemuatan objek img tidak termasuk dalam proses pemuatan badan Selepas badan dimuatkan dan peristiwa window.onload dicetuskan, img

Objek mungkin belum dimuatkan lagi dan acara img.onload akan dicetuskan selepas window.onload.

Berdasarkan soalan di atas, memandangkan keserasian penyemak imbas dan masa memuatkan halaman web, cuba jangan letak terlalu banyak gambar dalam objek Imej, jika tidak di bawah FF

Ia akan menjejaskan kelajuan muat turun halaman web. Sudah tentu, jika anda melaksanakan fungsi pramuat selepas window.onload, tiada masalah dalam FF.

Anda boleh menyemak sama ada imej dimuatkan melalui atribut lengkap objek Imej (setiap objek Imej mempunyai atribut lengkap, apabila imej berada dalam

Semasa proses pemuatan, nilai atribut adalah palsu Apabila sebarang peristiwa onload, onerror dan onabort berlaku, ini bermakna proses pemuatan imej telah tamat (tidak kira sama ada ia

).

Tidak berjaya), atribut lengkap adalah benar pada masa ini)

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"})

Nota:

Internet Firefox dan pelayar popular lain menyokong acara onload objek Imej.

IE8 dan ke bawah, Opera tidak menyokong acara onerror