分类目录归档:实验室

jucelin实验室,测试一些小程序

Typecho又拍云Upyun插件:UpyunUploader

插件作用如其名UpyunUploader。因为图片使用又拍云的外链比较方便,最主要的是网站在长城外,但图片在长城内,由此可大幅度的提高加载速度。

在最新稳定版0.9 (13.12.12)中测试通过,可正常使用。注意检查下插件配置是否正确。

如何安装

下载-上传-安装-配置。配置中几个项目都必须填写,如果信息填错了,那么上传肯定失败。目前仅测试了typecho的“最新版”0.8(10.8.15)-release。

下载地址:百度网盘 | 华为网盘

如何使用

配置完成后,当你上传附件时,插件会自动将上传的附件上传一遍到又拍云,如果上传成功,则会返回成功后的外链地址。再点击插入后,可以看到使用的就是外链地址了。

已知缺点

1.会直接在你的又拍云空间里面创建文件夹usr/uploads/…,以实现本地目录和又拍云空间里面的目录保持一致。

2.如果本次上传的文件没有插入到文章内容中去,那么下次打开后点击插入,则会使用本地的文件路径。解决办法可以直接将你的又拍云外链地址替换本地地址即可,原因由上面一条说明。

3.其他暂未知。

PS:吐槽下,TE新版开发太慢了…

onpropertychange功能的兼容

IE的onpropertychange十分的好用,可惜的是只兼容IE,非IE就悲剧了。还好现在HTML5中的oninput已经兼容了这个功能。下面写了个测试页面,大家可以试试。

Demo:lab/onpropertychange/onpropertychange.html

看到这里,你需要知道onpropertychange的作用,还有onchange/onkeyup/onkeydown/onkeypress这几个属性的不同作用。

另外,前辈们已经写了个JS来完美支持这个特性,在Demo中也加入了进去,代码看下面


function immediately(){
	var element = document.getElementById("mytext");
	if("\v"=="v"){//判断IE
		element.onpropertychange = webChange;
	}else{//非IE
		element.addEventListener("input",webChange,false);
	}
	function webChange(){
		if(element.value){document.getElementById("test").innerHTML = element.value};
	}
}

使用建议

如果是只开发移动项目,只用oninput就OK了,如果是非移动项目,用onpropertychange+oninput基本就OK,我使用这2个方法测试了Chrome15、Opear12、IE6、IE7、IE8,均兼容,对于低版本的Chrome和Opear未测试。如果你的浏览器和我测试的不同,欢迎测试并反馈给我,万分感谢。

其他资源:

《js监听输入框值的即时变化》

《哥俩好:oninput & onpropertychange》

《A HTML5 Browser maze, oninput support》

升级在线挂QQ系统-QQ挂机宝

关于QQ挂机宝,可以移步这里看下:PHP模拟QQ登录,宣传版的:QQ挂机宝:免费在线挂QQ

因为TX方面将3g版QQ的安全机制进行了升级,从3g版登录后,如果IP地址改变,将要求再次输入验证码,否则无法正常登录,所以原先只需要本地获得的SID和QQ号即可登录的方式已经失效,而需要在挂QQ的服务器上成功登录获得的SID才可以无验证码方式登录。

说起来升级,其实也就在自动获取SID的地方增加了验证码的输入并提交,让QQ能成功的在服务器的IP地址上完成一次成功登录。

挂Q地址:QQ挂机宝(推荐非IE访问)

在原版本中,很多朋友都加我,并向我要源码。这里需要说明下:

1. 这个程序本身就是利用的TX漏洞或者说设计上的不足来写的,如果开源,后果你懂的,当然核心源代码其实已经公布了;

2. 我发布的QQ挂机宝是多用户版的,而如果想单个QQ挂机,可以直接参考PHP模拟QQ登录

3. 考虑到这次升级的内容,估计PHP模拟QQ登录中的方法仅支持本地了。

4. 程序中仅记录QQ号和SID,不存储QQ密码,个人人品保证,如果不信,那随便吧。

5. 程序依然有很多不足,只能说尽量去实现,欢迎提意见。

PS:好久没写日志了,懒了很多。发现现在和玩微博一样,基本上都是以看为主,所以如果没有及时回复留言,还请见谅。广告下,我的腾讯微博@jucelin,哈哈。

用JS实现表格行合并

在我们现在做的OA系统中,表格已经成为不可缺少的重要组成部分,如果没有表格,我们的工作可能会增加很多。为了美观表格,常常需要将表格中相同内容的行进行合并,表格中的专用标签就是rowspan,描述一下就是将相邻2行或多行中相同位置的列进行合并,当然合并使用前提的,如内容相同,ID相同等等。这里jucelin写了个用JS实现表格行合并的代码,主要使用ID来判断的,不足是出现了相同的ID,但如果调用getElementById的话,在合并之后调用即可。

整个代码都比较简单,jucelin加入了各种判断,主要是为了匹配各种情况,也没找到相关的优化方案。

核心代码(双击代码可以编辑复制):

<script language="javascript">
function TableRowsSpan(tableID, ColList) {
	var ColArray = ColList.split(",");
	var TableName = document.getElementById(tableID);
	var TableRowsCount = TableName.rows.length;
	for (j = ColArray.length - 1; j >= 0; j--) {
		PreId = "";
		CurId = "";
		TempCount = 1;
		for (i = 0; i <= TableRowsCount; i++) {
			if (i != TableRowsCount) {
				CurId = TableName.rows[i].cells[ColArray[j]].id;
				if (CurId != "") {
					if (CurId == PreId) {
						TempCount += 1;
					}
					 else {
						if (TempCount > 1) {
							SpanRows(TableName, i, j, TempCount, ColArray[j]);
						}
						PreId = CurId;
						TempCount = 1;
					}
				}
				 else {
					if (TempCount > 1) {
						SpanRows(TableName, i, j, TempCount, ColArray[j]);
					}
					PreId = CurId;
					TempCount = 1;
				}
			}
			 else {
				if (TempCount > 1) {
					SpanRows(TableName, i, j, TempCount, ColArray[j]);
				}
				PreId = CurId;
				TempCount = 1;
			}
		}
	}
}
function SpanRows(TableName, i, j, TempCount, ColArrayj) {
	TableName.rows[i - TempCount].cells[ColArrayj].rowSpan = TempCount;
	for (m = i - TempCount + 1; m <= i - 1; m++) {
		TableName.rows[m].deleteCell(ColArrayj);
	}
}
</script>

参数说明

tableID : 表格的ID,即选择要被操作的表格

ColList : 被选表格中需要需要合并的列,从第0个开始,即第一列则填0,以半角逗号分割,超出最大值出错

演示页面

https://jucelin.com/wp-content/uploads/2012/01/TableRowsSpan.html

版权说明

JS实现表格行合并的代码是手敲的,思路是自己想的,如果你觉得有必要,就在适当的位置添加上jucelin的名字或网址。本代码自由转载,自由修改,自由使用,如果你有改进,发我一份则十分感谢。

最后声明

用JS实现表格行合并的代码你可以自由使用,但建议你根据实际需求修改后再应用到实际生产中去,避免不必要的资源浪费。越强大越智能,功能越强的代码都是以消耗资源为前提的,并不是每个产品都需要写个jQuery类型的功能库。

网页下雪JS代码

圣诞节了,看到网易的活动页面上有个下雪的特效,就下下来看看,使用的是JS特效,看的比较浅,目前只会简单的使用下,不知道有没有高手能解析下。这里贴出来网页下雪JS代码,如果需要的朋友可以玩玩。

显示样式

正如你在我的博客上看到的,全屏,背景建议不是纯白,否则看不到雪花,你不可能把雪花调彩色吧,哈哈。(好吧,我的博客背景有些白,看的不明显,正考虑要不要调成彩色的,可找了半天没彩色的雪花,如果你有,记得给我个哦,蓝色的就算了,因为我链接的颜色的是蓝色的)

使用方法:

直接复制下面的代码粘贴到你博客页面底部模版。

<script type="text/javascript" language="javascript">

(function(){function k(a,b,c){if(a.addEventListener)a.addEventListener(b,c,false);else a.attachEvent&&a.attachEvent("on"+b,c)}function g(a){if(typeof window.onload!="function")window.onload=a;else{var b=window.onload;window.onload=function(){b();a()}}}function h(){var a={};for(type in{Top:"",Left:""}){var b=type=="Top"?"Y":"X";if(typeof window["page"+b+"Offset"]!="undefined")a[type.toLowerCase()]=window["page"+b+"Offset"];else{b=document.documentElement.clientHeight?document.documentElement:document.body; a[type.toLowerCase()]=b["scroll"+type]}}return a}function l(){var a=document.body,b;if(window.innerHeight)b=window.innerHeight;else if(a.parentElement.clientHeight)b=a.parentElement.clientHeight;else if(a&&a.clientHeight)b=a.clientHeight;return b}function i(a){this.parent=document.body;this.createEl(this.parent,a);this.size=Math.random()*5+5;this.el.style.width=Math.round(this.size)+"px";this.el.style.height=Math.round(this.size)+"px";this.maxLeft=document.body.offsetWidth-this.size;this.maxTop=document.body.offsetHeight- this.size;this.left=Math.random()*this.maxLeft;this.top=h().top+1;this.angle=1.4+0.2*Math.random();this.minAngle=1.4;this.maxAngle=1.6;this.angleDelta=0.01*Math.random();this.speed=2+Math.random()}var j=false;g(function(){j=true});var f=true;window.createSnow=function(a,b){if(j){var c=[],m=setInterval(function(){f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));!f&&!c.length&&clearInterval(m);for(var e=h().top,n=l(),d=c.length-1;d>=0;d--)if(c[d])if(c[d].top<e||c[d].top+c[d].size+1>e+n){c[d].remove(); c[d]=null;c.splice(d,1)}else{c[d].move();c[d].draw()}},40);k(window,"scroll",function(){for(var e=c.length-1;e>=0;e--)c[e].draw()})}else g(function(){createSnow(a,b)})};window.removeSnow=function(){f=false};i.prototype={createEl:function(a,b){this.el=document.createElement("img");this.el.setAttribute("src",b+"http://mimg.127.net/hxm/quan/hd/111207_sdj/style/img/snow.gif");this.el.style.position="absolute";this.el.style.display="block";this.el.style.zIndex="99999";this.parent.appendChild(this.el)},move:function(){if(this.angle< this.minAngle||this.angle>this.maxAngle)this.angleDelta=-this.angleDelta;this.angle+=this.angleDelta;this.left+=this.speed*Math.cos(this.angle*Math.PI);this.top-=this.speed*Math.sin(this.angle*Math.PI);if(this.left<0)this.left=this.maxLeft;else if(this.left>this.maxLeft)this.left=0},draw:function(){this.el.style.top=Math.round(this.top)+"px";this.el.style.left=Math.round(this.left)+"px"},remove:function(){this.parent.removeChild(this.el);this.parent=this.el=null}}})();

createSnow("", 80);

</script>

注意看下最后一句话,上面的是函数,打乱了,createSnow(“”, 80);就是调用上面的函数,共2个参数,第二个参数就是密度,简单点就是页面上显示多少个雪花,切记不要调的太高,不然可能导致硬件不好的电脑卡死;第一个我也不知道是干嘛的,JS我了解的也不是很多,随便给个值的话,雪花图片被修改了,可给定雪花地址,显示依然出错,望高手解析。

或者直接在页面模版末尾添加下面的代码

<script type="text/javascript" src="http://hd3.mail.163.com/christmas/js/snow.js"></script>
<script language="javascript">
createSnow("", 800);
</script>

注意的地方

1. JS中指定了雪花图片的链接,记得修改为自己的雪花图片哦,否则人家图片地址换了,就没了。

2. 记得放在</body>前面,避免JS的下载影响了前面正文内容的下载,这样做基本上可以实现页面已经加载完成,雪花才开始飘。

3. 不知道怎么在模版里面添加?以WP为例,后台-外观-编辑-右侧选择“底部(footer.php)”-看到</body>没?就在之前回车,在空行上直接添加调用snow.js,也可以直接把上面最长的代码复制上去。

4. 删除的方法:请参照3,但要求倒着操作。

相关资料

JS来自页面:http://quan.163.com/activity/index.do

JS链接地址:http://hd3.mail.163.com/christmas/js/snow.js(这里只是JS的函数,需要createSnow(“”, 800);来调用)

雪花图标:http://mimg.127.net/hxm/quan/hd/111207_sdj/style/img/snow.gif(如果修改请在上面的JS上直接替换就行,建议绝对地址)

jucelin雪花图标:https://jucelin.com/wp-content/uploads/2011/12/snow.gif(圣诞节过后会撤掉)

蓝色的雪花图标:https://jucelin.com/wp-content/uploads/2011/12/snow_blue.png(适合博客背景色为纯白色的)

圣诞节快到了,jucelin提前恭祝各位我认识的、认识我的、以及不认识的天天发财,身体倍棒。

简单获取新浪微博短地址接口(API)

短地址(也称短链接、缩短地址等)方面,在twitter发展之后就接着发展了起来,而且很多互联网网站都使用了短地址,国内国外都很多,但稳定和可靠性,还是国内的比较靠谱些,不怕没墙,国外几家已经悲剧了,所以如果项目中用到短地址,个人还是建议使用新浪或者其他国内的短链接服务。

新浪微博短链接API是开放的,而腾讯微博的短地址API没有开放,本想着通过不一样的路径获取腾讯微博的API的,最后还是以失败收场。新浪微博短地址API是不需要用户登录的,所以直接可以调用,而且速度很快,下面的代码是从网站找来的,用的是CURL POST的方法,可供参考。

新浪微博短链接API文档在旧版开发文档中,新版中暂未加入:http://open.weibo.com/wiki/Short_url/shorten

function shortenSinaUrl(long_url){apiKey='1234567890';//这里是你申请的应用的API KEY,随便写个应用名就会自动分配给你
apiUrl='http://api.t.sina.com.cn/short_url/shorten.json?source='.apiKey.'&url_long='.long_url;curlObj = curl_init();
curl_setopt(curlObj, CURLOPT_URL,apiUrl);
curl_setopt(curlObj, CURLOPT_RETURNTRANSFER, 1);
curl_setopt(curlObj, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt(curlObj, CURLOPT_HEADER, 0);
curl_setopt(curlObj, CURLOPT_HTTPHEADER, array('Content-type:application/json'));
response = curl_exec(curlObj);
curl_close(curlObj);json = json_decode(response);
returnjson[0]->url_short;
}

function expandSinaUrl(short_url){apiKey='1234567890';//要修改这里的key再测试哦
apiUrl='http://api.t.sina.com.cn/short_url/expand.json?source='.apiKey.'&url_short='.short_url;curlObj = curl_init();
curl_setopt(curlObj, CURLOPT_URL,apiUrl);
curl_setopt(curlObj, CURLOPT_RETURNTRANSFER, 1);
curl_setopt(curlObj, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt(curlObj, CURLOPT_HEADER, 0);
curl_setopt(curlObj, CURLOPT_HTTPHEADER, array('Content-type:application/json'));
response = curl_exec(curlObj);
curl_close(curlObj);json = json_decode(response);
returnjson[0]->url_long;
}

参照新浪微博的开发文档,其推荐的是使用get的方法获取。那代码就更简单了

function shorturl(long_url){apiKey='1234567890';//要修改这里的key再测试哦
	apiUrl='http://api.t.sina.com.cn/short_url/shorten.json?source='.apiKey.'&url_long='.long_url;response = file_get_contents(apiUrl);json = json_decode(response);
	returnjson[0]->url_short;
}

function expandurl(short_url){apiKey='1234567890';//要修改这里的key再测试哦
	apiUrl='http://api.t.sina.com.cn/short_url/expand.json?source='.apiKey.'&url_short='.short_url;response = file_get_contents(apiUrl);json = json_decode(response);
	returnjson[0]->url_long;
}

OK,是不是更简单了?

大家在调试上面的代码是需要填写自己的API key哦,不然肯定获取不到的。

特别提示:短地址服务现在仅对已经认证的APP KEY提供服务,刚申请的APP KEY会被提示无权限。大家可以使用209678993和3818214747两个KEY做测试,这2个KEY来历不明,不建议用于生产。(感谢@congxz6688的提醒)

jucelin写了个调试的文档,大家可以测试下:

长转短:https://jucelin.com/lab/short.php?type=1&url=https://jucelin.com

短转长:https://jucelin.com/lab/short.php?type=2&url=http://t.cn/S4bLBm

就2个参数,type:1表示长转短,2表示短转长,后面的URL就是目标域名了,因为比较懒,就没有写错误判断,新浪微博短地址不支持短地址再转短地址的,逻辑上也应该这样控制。(不信你可以试试)。

关于新浪微博短地址接口的更详细说明可以参考《新浪微博短地址接口》。

PHP模拟QQ登录

在微博上看到网友使用PHP实现自动挂QQ,就自我思考了下模拟登录的方式。在PHP中CURL模拟提交则可以很简单的实现登录动作,这个方式在ASP则较难实现,使用JS倒是有点思路,但JS不能跨域限制就让我傻眼了。不过至少那位网友也是使用了PHP的curl实现的。好,让咱这个PHP的门外汉也试试吧。

PHP我确实是刚看,至于什么是curl,上php官网查,虽然不明白到底是什么意思,但照葫芦画瓢还是会的,共享万岁。因为是由程序来自动提交登录的,所有JS在程序里面就没什么用处了,而且要找个流量小的,太大程序下载的速度就会非常慢,最后定在使用3gqq登录方式。

跟着CURL的参数来,找个提交登录的3gqq的登陆URL,http://pt5.3g.qq.com/,因为网页格式是wap格式的,所以只有使用chrome或者opera才能访问,否则都会出现下载提示,IE8也不能访问,IE9不知道会不会改善。查看源码,会看到就几个输入框和几个隐藏的输入框,相信看到这里的你知道是神马个东西了。

<?php 
qqno='你的QQ';qqpw='QQ密码';
cookie = dirname(__FILE__).'/cookie.txt';post = array(
	'login_url' => 'http://pt.3g.qq.com/s?sid=ATAll43N7ZULRQ5V8zdfojol&aid=nLogin',
	'q_from' => '',
	'loginTitle' => 'login',
	'bid' => '0',
	'qq' => qqno,
	'pwd' =>qqpw,
	'loginType' => '1',
	'loginsubmit' => 'login',
);
curl = curl_init('http://pt.3g.qq.com/handleLogin?aid=nLoginHandle&sid=ATAll43N7ZULRQ5V8zdfojol');
curl_setopt(curl, CURLOPT_HEADER, 0);
curl_setopt(curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt(curl, CURLOPT_COOKIEJAR, cookie); // ?Cookie
curl_setopt(curl, CURLOPT_POST, 1);
curl_setopt(curl, CURLOPT_POSTFIELDS, http_build_query(post));
result = curl_exec(curl);
curl_close($curl);
?>

我在测试的时候主要是因为cookie没有设置,因为总是想着这不是在客户端提交,记录Cookie也没有什么用,就删除了Cookie参数,试了好多次之后加上Cookie就成功了。

另外,QQ登录的时候会对你的IP进行检测,如果登录的IP地址不是经常登录的IP地址,则需要输入验证码,此时上面的模拟登录就不能用了,jucelin也没想到什么好的方式解决。不过,可以手动尝试在http://pt5.3g.qq.com/上登录,多登录几次,验证码就不会再有了,当然这里的几次不是登录就退出再登录再退出那么简单,估计至少时间跨度要大点,登录2-3次基本上就OK了。

其实使用SID登录也是一种模拟QQ登录的方式,SID码来自于登录后的URL中,每次登录都会分配唯一的SID码,这也是3gqq全站登录的方式,因为要考虑有的手机不支持Cookie(这里突然想到腾讯要是使用session,会是什么样的状况),但又要实现全站登录的需求。

OK,通过SID码登录就不多说了,相信聪明的你肯定能想到。 😆

PHP模拟QQ登录

因为这个程序一个多星期之前就写了,就进行了一些拓展,感兴趣的可以看看我写的这个实例:QQ挂机宝(好吧,我承认这个名字取得由点鸟,但我确实没想到啥名,凑合着叫叫吧)。这个实例主要重点放在了功能实现上,所有什么安全措施,什么用户体验,什么程序运行效率都没去弄,,所以…你懂的,如果你发现功能上不对的地方记得给我留言。

如果你有更好的思路或者更深的想法,欢迎交流,例如用来发QQ消息,发微博什么的,虽然上面2项都测试成功了。