利用sort()和Math.random()实现元素的随机排列

一个随机排列元素的方法, 其实之前是在摄影页面写的一个小效果.
查看演示: 点此查看DEMO
实现方法
利用Math.random()产生随机数, 再通过sort()进行随机排列.
核心代码

function randomFun(){
	var h5=document.getElementsByTagName('h5')[0]
	var spanItem=document.getElementsByTagName('span');
	var random=function(){return Math.random()>0.5 ? -1 : 1};//为sort()传入的随机排列参数
	var spanArr=new Array();//用来存放元素的数组
	var cssArr=new Array();//用来存放样式值的数组
	var k,m;
	for(var i=0; i<spanItem.length; i++){
		spanArr.push(spanItem[i]);//将元素存入元素数组
		cssArr.push(i);//将对应的下标值存入样式值数组
	}
	spanArr.sort(random);//打乱元素数组排列顺序
	cssArr.sort(random);//打乱样式值数组排列顺序
	for(k=0; k<spanArr.length; k++){
		h5.appendChild(spanArr[k]);//将打乱后的元素重新插入到页面中
	}
	for(m in cssArr){
		spanArr[m].className='color_'+cssArr[m];//将打乱后的样式加给元素
	}
}

别了,PR值~

PR值, 全称为PageRank(网页级别), 取自Google的创始人Larry Page. 它是Google排名运算法则(排名公式)的一部分, 是Google用于标识网页的等级/重要性的一种方法. 一直以来, 它是Google用来衡量一个网站好坏的唯一标准.
然, 自09年10月中旬Google员工Susan Moskwa在Google网站管理员帮助论坛中确认了pr值取消这一消息起, PR是否真的会退出历史舞台就开始在圈内闹的沸沸扬扬. 而我, 也是非常关注这一动态的CN草根站长中的一员. Mr.Think的博客10年4月开通至今, 收录良好, 更新状态良好, 文章内容全原创, 自认为SEO也做的良好, 但PR依然为0, 曾在8月份做过一次深度的分析, 无论从关键词还是链接数, 收录数, 等等方面都没能找到PR为0的依据.
至此, 开始寻找根本的原因: PR值是否真的停止更新. 其中打听过多位圈内的人, 其中包括Google的搜索客服Grace小姐, 但众说纷纭, 有的说已停止更新, 有的说新站停止更新, 有的说未知, 哈. 答案未知.
今天又无意中在站长网看到一篇10月中旬PR值即将更新的消息. 欣喜瞬间, 淡然一笑. 不再关注PR值了, 用心做站, 用心分享技术. 能让读者看到有价值的东西, 才是Mr.Think的博客最本真的价值观.
关注文章价值, 关注用户体验, 关注互联网, 别了, PR.

加载xml文档的函数(原生JS版及jQuery版)

近几天折腾了个摄影页面, 记录平时拍的一些影像碎片, 修改Wordpress的Filkr相册插件嫌麻烦,于是所有图片的地址都是以静态形式写进去. 觉着很麻烦,特别是添加图片时.怎么办?我想到了强大的xml. 何不将所有的图片路径数据集中放在一个xml文档中,然后用JavaScript加载该文档,再把数据一条条插进去,这样就不用每次到页面中写html代码了(JSON可以更简洁的解析,但本文是讲xml的,哈).
如何用JavaScript加载xml文档? Google一下,大把的信息,但MS都是有缺陷的(起码我没找到一个全兼容的),不兼容,比如w3school版本.怎么办?自己折腾吧,查了JavaScript权威指南,又看了网上一些写法,然后整理出一个原则上是全兼容的加载xml函数.经过本人测试的有:ie6/7/8,FF(Geckos),Chrome(Webkit),Opera,没装Safira,但她和Chrome一样的核,应该没问题.
原生JavaScript版本

function loadXml(fileName){
	//@mrthink.net
    var xmlDoc = null;
    if (window.ActiveXObject) {//写给ie系
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;//这句别漏掉,否则IE系会报完成该操作所需的数据还不可用
        //xmlDoc.loadXML(fileName);//这个是用来加载xml字符串的
        xmlDoc.load(fileName);//如果用的是xml文件。
    }
    else
        if (document.implementation && document.implementation.createDocument) {//webkit,Geckos,Op内核的
            var xmlhttp = new window.XMLHttpRequest();
            xmlhttp.open("GET", fileName, false);//类型,文件名,是否缓存
            xmlhttp.send(null);
            xmlDoc = xmlhttp.responseXML;
        }
        else {
            xmlDoc = null;
        }
    return xmlDoc;
}

上面的函数使用很简单,比如把获取到的xml文档赋值给var xmlDom=loadXml(‘i.xml’);然后你就可以像操作普通DOM一样操作xml文档内容了.
至于jQuery版本的我就不多说了,有两种方法,兼容性她都为你考虑了,并且调用特别简单,如果你手头有锋利的jQuery一书,可以在第326页找到相关信息.下面贴出代码:
基于jQuery版本

//可以指定参数的方法@mrthink.net
$.ajax({
	//这个是万能的,不单单可以读xml
	url:'i.xml', //xml文档路径
	type:'GET', //请求方式
	dataType:'xml',//文档类型
	timeout:1000,//超时时长
	cache:false,//是否缓存
	error:function(){alert('Oh,oh,Error!Haha!');},//这个是抛出加载失败的信息,比js的智能吧
	success:function(xml){
		alert('Yeah! Success!');//在这里执行对xml文档内容的操作
	}
	});
//更简洁的方法
$.get('i.xml',function(xml){
	alert('Yeah! Success!');//在这里执行对xml文档内容的操作
});

具体实例请到摄影栏目看,那些图片都是从imgdata.xml中加载过来的.其实,Flickr有完善且强大的API机制,但还没弄太明白.改天尝试直接生成一个JSON文件读相应的图片数据,那样会更方便.

限制字符输入数功能(jQ版和原生JS版)

比较常用的限制字符输入数功能(比如热火超天的微博输入框),用jQuery和原生JavaScript分别写了一个.原生JavaScript注释中有区分中英文字符的函数, 但个人并不建议这么做.
已知BUG:
Ubuntu系统下, onkeyup事件失效,详见: Ubuntu系统下onkeyup/onkeydown对中文输入失效bug.
查看演示: 点此查看DEMO
核心代码:

//原生JavaScript版本
window.onload=function(){
	var js=document.getElementById('js');//获取文本域
	var info=document.getElementsByTagName('p')[0];//获取要插入提示信息的元素
	var submit=info.getElementsByTagName('input')[0];//获取提交按钮
	var max=js.getAttribute('maxlength');//获取限制输入的最大长度
	var tips=document.createElement('span');//新建一个提示span
	var val,cur,count,warn;
	submit.disabled=true;//默认不可提交
	tips.innerHTML='你还可以输入<em>'+max+'</em>个字符<font>[不区分中英文字符数]</font>';
	if(max){
		js.onkeyup=js.onchange=function(){
			submit.disabled=false;
			if(info.lastChild.nodeName!='SPAN') info.appendChild(tips);//避免每次弹起都会插入一条提示信息
			count=info.getElementsByTagName('em')[0];//根据输入数字变换区
			warn=info.getElementsByTagName('font')[0];//副标题
			val=this.value;
			cur=val.length;
//			for(var i=0;i255) cur+=1;
//			}
			if(cur==0){ //当默认值长度为0时,可输入数为默认maxlength值,此时不可提交
				count.innerHTML = max;
				submit.disabled=true;
				warn.innerHTML='不区分中英文字符数';
			}else if (cur < max) {//当默认值小于限制数时,可输入数为max-cur
				count.innerHTML = max - cur;
				warn.innerHTML='不区分中英文字符数';
			}else{
				count.innerHTML = 0;//当默认值大于等于限制数时,插入一条提示信息并截取限制数内的值
				warn.innerHTML='不可再输入!';
				this.value=val.substring(0,max);//此处前面的this.value不能用变量val,它们不再是同一个值
			}
		}
	}
}
//基于jQuery版本
$(function(){
	var _area=$('textarea#jq');
	var _info=_area.next();
	var _submit=_info.find(':submit');
	var _max=_area.attr('maxlength');
	var _val,_cur,_count,_warn;
	_submit.attr('disabled',true);
	_area.bind('keyup change',function(){ //绑定keyup和change事件
		_submit.attr('disabled',false);
		if(_info.find('span').size()<1){//避免每次弹起都会插入一条提示信息
			_info.append('<span>你还可以输入<em>'+ _max +'</em>个字符<font>[不区分中英文字符数]</font></span>');
		}
		_val=$(this).val();
		_cur=_val.length;
		_count=_info.find('em');
		_warn=_info.find('font');

		if(_cur==0){//当默认值长度为0时,可输入数为默认maxlength值,此时不可提交
			_count.text(_max);
			_submit.attr('disabled',true);
		}else if(_cur<_max){//当默认值小于限制数时,可输入数为max-cur
			_count.text(_max-_cur);
			_warn.text('不区分中英文字符数');
		}else{//当默认值大于等于限制数时,插入一条提示信息并截取限制数内的值
			_count.text(0);
			_warn.text('不可再输入!');
			$(this).val(_val.substring(0,_max));
		}
	});
});

Ubuntu系统下onkeyup/onkeydown对中文输入失效bug

在写一个限制字符输入数的功能时, 发现的一个bug, 在Ubuntu系统中, 原生JavaScript的onkeyup/onkeydown和基于jQuery的keyup/keydown事件对中文输入均无效(非中文字符及数字输入均正常),onchange事件是正常的.暂未找到合适的解决方案, 已向官方提交bug.
系统环境: Ubuntu 10.4
浏览器: FireFox 3.6 / Chromeium 5.0
如果你使用的是Ubuntu系统, 请在下面的表单域中输入中文测试:

哪位达人有合适的解决方案也请指点一下.


渔夫科技