基于JS2Image实现圣诞树代码


Posted in Javascript onDecember 24, 2015

马上圣诞节了,作为一名程序猿,如何体现自己独特的过节风格,如何在朋友圈发一张专属自己的祝福照片我觉得很有必要,你们说是不是。

谈到圣诞节,话说程序猿和圣诞之间的关系还有这么一个笑话:

Q:程序员为什么总是将万圣节和圣诞节弄混?

A:因为oct 31==Dec 25!

停停停...

先不笑,咱们先冷静下...

面对圣诞节还得加班加点的苦逼程序猿们,我们来缓解下自己沉闷的心情,发挥下自己独特的艺术细胞,是时候装一下逼了...

那就让我们用手头的IDE工具来展示一颗圣诞树吧,没有圣诞老人,没有圣诞礼物,咱们有圣诞树。

瞧,出来了,不是一棵,是一坨。

↓↓↓↓↓↓↓↓↓↓

 基于JS2Image实现圣诞树代码

所有的js代码都堆成树了....

关键是还是自动生成的!

这咋搞?咋搞?

下面就和大家一起分享:

首先这并非小编原创,之前便有牛逼的大神创造了这一款工具,它叫js2image。

js2image 是一个可以把js源代码压缩成一个ascii字符画的源代码的工具,它的特色是压缩后的代码仍可运行,而不是简单的拼成最终的图案哦。

安装了node和npm的童鞋可以直接使用以下命令安装js2image:

基于JS2Image实现圣诞树代码

安装完毕后执行命令:

基于JS2Image实现圣诞树代码

其中的路径./resource/jquery.js为你所要压缩js的文件路径

执行完命令后会生成一个xmas.js结尾的文件,打开来可以看到一棵棵圣诞树咯。

其他安装方法可详见:

github地址:https://github.com/xinyu198736/js2image

在线转换地址:http://f2e.souche.com/cheniu/js2image.html

据说压缩完了99%的代码都可以正常运行哦。

哈哈哈,有兴趣的童鞋可以尝试下,

今年圣诞咱们就和圣诞树(还是代码)过吧~

PS:js的 new image()

创建一个Image对象:var a=new Image();    定义Image对象的src: a.src=”xxx.gif”;    这样做就相当于给浏览器缓存了一张图片。

图像对象:

建立图像对象:图像对象名称=new Image([宽度],[高度])

图像对象的属性: border complete height 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

的加载过程中,既是 img加载完之后,body 才算是加载完毕,触发 window.onload 事件。

      在 IE 中,img 对象的加载是不包含在 body 的加载过程之中的,body 加载完毕,window.onload 事件触发时,img

对象可能还未加载结束,img.onload事件会在 window.onload 之后触发。

      根据上面的问题,考虑到浏览器的兼容性和网页的加载时间,尽量不要在 Image 对象里放置过多的图片,否则在 FF 下

会影响网页的下载速度。当然如果你在 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"})

注:

ie 火狐等大众浏览器均支持 Image对象的onload事件。

ie8及以下、opera 不支持onerror事件

Javascript 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
一文了解Vue中的nextTick
May 06 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
JavaScript WeakMap使用详解
Feb 05 Javascript
react中props 的使用及进行限制的方法
Apr 28 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 Javascript
jquery读写cookie操作实例分析
Dec 24 #Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 #Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 #Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 #Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 #Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 #Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
PHP加密技术的简单实现
2016/09/04 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python 字符串常用方法汇总详解
2019/09/16 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
公司企业表扬信
2014/01/11 职场文书
党课培训主持词
2014/04/01 职场文书
小学师德师风整改措施
2014/10/27 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL