标签归档:javascript

利用jquery-qrcode在线生成二维码

现在二维码越来越流行,很多网页都会有个二维码,扫描后可通过手机浏览。
以前做类似的项目一般是在网页上生成图片,然后把图片插入到网页。
这样做 不能每个页面都生成二维码

现在发现有javascript直接二维码的 jquery扩展jquery-qrcode jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取)

qrcode.js 是实现二维码数据计算的核心类,
jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)

text : “https://github.com/jeromeetienne/jquery-qrcode” //设置二维码内容
render : “canvas”,//设置渲染方式
width : 256, //设置宽度
height : 256, //设置高度
typeNumber : -1, //计算模式
correctLevel : QRErrorCorrectLevel.H,//纠错等级
background : “#ffffff”,//背景颜色
foreground : “#000000” //前景颜色

jQuery(‘#output’).qrcode({width:200,height:200,correctLevel:0,text:content});

其实上面的js有一个小小的缺点,就是默认不支持中文。

这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,

而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,

英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。

解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:

function utf16to8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) { 	c = str.charCodeAt(i); 	if ((c >= 0x0001) && (c <= 0x007F)) { 	    out += str.charAt(i); 	} else if (c > 0x07FF) {
	    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
	    out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
	    out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
	} else {
	    out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
	    out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
	}
    }
    return out;
}

页面加载完成 出现提示框动画(仿马蜂窝)

前段时间看到马蜂窝旅游频道后,会有个红色的提示框,能很显眼的提示页面的重点部分。。。

用的jQuery动画方法,还挺好用的,值得好好摸索。。。这次就先做个 提示框动画

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>PHP圈</title>
</head>
<body>
<p><img class="logo" src="http://www.zjcampus.com/rs/img/logo.png" width="186" height="69"></p>
<script type="text/javascript" src="http://www.zjcampus.com/rs/js/jquery.js"></script>
<script>
(function($){

	/**
	 * 提示框
	 * 参数 to 结束地方的节点
	 */
	var alertBox = function(to){
		var to_p = $(to).position()
		var objNewDiv = $('<div>',{'style':'border:#FF0000 3px solid; width:99%; height:99%;position:absolute; left:0; top:0;'});
		$(objNewDiv).appendTo('body');
		objNewDiv.animate({left:to_p.left, top:to_p.top, width:$(to).width(), height:$(to).height()},2000,function(){
			//动画完后 在延时1秒
			objNewDiv.delay(1000).hide(0,function(){ objNewDiv.remove();});
		});
	}

	alertBox('.logo');
})(jQuery);
  </script>
</body>
</html>

验证身份证号码JS源码分享学习

网上看到一个,直接点用 validId(num) 函数就行。。。代码贴出来分享学习

var powers=new Array("7","9","10","5","8","4","2","1","6","3","7","9","10","5","8","4","2");
    var parityBit=new Array("1","0","X","9","8","7","6","5","4","3","2");

    //校验18位的身份证号码
    function validId18(_id){
        _id=_id+"";
        var _num=_id.substr(0,17);
        var _parityBit=_id.substr(17);
        var _power=0;
        for(var i=0;i< 17;i++){
            //校验每一位的合法性
            if(_num.charAt(i)<'0'||_num.charAt(i)>'9'){
                return false;
                break;
            }else{
                //加权

                _power+=parseInt(_num.charAt(i))*parseInt(powers[i]);
                //设置性别

                if(i==16&&parseInt(_num.charAt(i))%2==0){
                    sex="female";
                }else{
                    sex="male";
                }
            }
        }
        //取模

        var mod=parseInt(_power)%11;
        if(parityBit[mod]==_parityBit){
            return true;
        }
        return false;
    }
    //校验15位的身份证号码

    function validId15(_id){
        _id=_id+"";
        for(var i=0;i<_id.length;i++){
            //校验每一位的合法性

            if(_id.charAt(i)<'0'||_id.charAt(i)>'9'){
                return false;
                break;
            }
        }
        var year=_id.substr(6,2);
        var month=_id.substr(8,2);
        var day=_id.substr(10,2);
        var sexBit=_id.substr(14);
        //校验年份位

        if(year<'01'||year >'90')return false;
        //校验月份

        if(month<'01'||month >'12')return false;
        //校验日

        if(day<'01'||day >'31')return false;
        return true;
    }

//这个可以验证15位和18位的身份证,并且包含生日和校验位的验证。

//如果有兴趣,还可以加上身份证所在地的验证,就是前6位有些数字合法有些数字不合法。

function validId(num)

{
	num = num.toUpperCase();
	//身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X。
	if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num)))
	{
		return false;
	}
	//校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。
	//下面分别分析出生日期和校验位
	var len, re;
	len = num.length;
	if (len == 15)
	{
		re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
		var arrSplit = num.match(re);
		//检查生日日期是否正确
		var dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4]);
		var bGoodDay;
		bGoodDay = (dtmBirth.getYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
		if (!bGoodDay)
		{
			return false;
		}
		else
		{
			//将15位身份证转成18位
			//校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。
			var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
			var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
			var nTemp = 0, i;
			num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6);
			for(i = 0; i < 17; i ++)
			{
				nTemp += num.substr(i, 1) * arrInt[i];
			}
			num += arrCh[nTemp % 11];
			return num;
		}
	}
	if (len == 18)
	{
		re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
		var arrSplit = num.match(re);
		//检查生日日期是否正确
		var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
		var bGoodDay;
		bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
		if (!bGoodDay)
		{
			return false;
		}
		else
		{
		//检验18位身份证的校验码是否正确。
		//校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。
			var valnum;
			var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
			var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
			var nTemp = 0, i;
			for(i = 0; i < 17; i ++)
			{
			nTemp += num.substr(i, 1) * arrInt[i];
			}
			valnum = arrCh[nTemp % 11];
			if (valnum != num.substr(17, 1))
			{
				return false;
			}
			return num;
		}
	}
	return false;
}

把网页中的链接地址用 encode编码

IE下面的链接有中文参数的话会是乱码,不管是IE6还是IE9。本来想在PHP里面输出的时候处理的,不过PHP处理这个的话加大了服务器的负载,想办法用JS来做。JS有这样的函数。使用还是

$(document).ready(function(e) {

$(“a”).each(function(index, element) {   //这里是把所有的a标签里面的链接都用encodeURI函数 编码一次。如果用不到这么多,可以把需要加的放在一个类里面

$(this).attr(“href”,encodeURI($(this).attr(“href”)));

});

});

下面来分析一下JS里面自带的一些编码函数,以下内容都来自百度

escape 方法

对 String 对象编码以便它们能在所有计算机上可读,

escape(charString) 必选项 charstring 参数是要编码的任意 String 对象或文字。

说明 escape 方法返回一个包含了 charstring 内容的字符串值( Unicode 格式)。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替,其中 xx 等于表示该字符的十六进制数。例如,空格返回的是 “%20” 。

字符值大于 255 的以 %uxxxx 格式存储。

注意   escape 方法不能够用来对统一资源标示码 (URI) 进行编码。对其编码应使用 encodeURI 和encodeURIComponent 方法。

 

 

encodeURI 方法

将文本字符串编码为一个有效的统一资源标识符 (URI)。

encodeURI(URIString) 必选的 URIString 参数代表一个已编码的 URI。

说明 encodeURI 方法返回一个编码的 URI。如果您将编码结果传递给 decodeURI,那么将返回初始的字符串。encodeURI 方法不会对下列字符进行编码:”:”、”/”、”;” 和 “?”。请使用 encodeURIComponent 方法对这些字符进行编码。

 

encodeURIComponent 方法

将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件。

encodeURIComponent(encodedURIString) 必选的 encodedURIString 参数代表一个已编码的 URI 组件。

说明

encodeURIComponent 方法返回一个已编码的 URI。如果您将编码结果传递给 decodeURIComponent,那么将返回初始的字符串。因为 encodeURIComponent 方法对所有的字符编码,请注意,如果该字符串代表一个路径,例如 /folder1/folder2/default.html,其中的斜杠也将被编码。这样一来,当该编码结果被作为请求发送到 web 服务器时将是无效的。如果字符串中包含不止一个 URI 组件,请使用 encodeURI 方法进行编码。