分类目录归档:前端开发

JavaScript、CSS应用

HTML5之FileReader对象在浏览器中读取本地文件内容、预览图片

在一些项目中,经常会遇到图片上传的情况,为了提高用户体验,一般会要求选择图片后 能预览一下图片。
以前的做法是 通过 ajax上传图片后,然后再显示出来,这样会产生大量的无用的图片文件,在HTML5的时代,有了FileReader对象,可以在浏览器选择本地的图片后,立马就可以在浏览器中显示选择的图片
具体也不对说了,手册百度一搜就是,就贴一下示例代码

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>

    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>

FileReader对象 配合 FormData对象 就可以完成一个体验很好的图片上传功能。不过这两个对象都是 HTML5新增的,兼容性不是很高,目前还比较时候用来做内部系统或者网站后台

利用CSS3属性background-size做响应式布局背景图

现在响应式布局越来越流行,但是网站的logo一般是用的 background(背景图片) 属性实现,而不是直接在页面使用img标签。
如果使用背景,在css2里面宽高是固定的值,那么这就不适合响应式布局了,网站百度一下搜到 css3里面新增了 background-size,可以实现自适应div的宽高改变背景图片的大小。

/*只要这样就对了*/
background-size:contain;

继续阅读

用CORS(跨域源资源共享)解决跨域问题

前几天比较厉害的一位前端的同事说了一下跨域的问题,提供了一些比较好的解决办法。最后推荐的方法就是CORS(跨来源资源共享)。不过这方法好像 百度出来的东西挺少的,所以自己测试了一下。还是比较好用,不过这方法有些比较老的浏览器不支持,IE8据说是支持的,不过有点麻烦。具体支持情况可以查看 维基百科 http://zh.wikipedia.org/wiki/CORS

主要是在服务器端申明一下支持 CORS就行了。。。
header(“Access-Control-Allow-Origin:http://phpquan.com”);
这是比较安全的,意思是只接受 phpquan.com 跨域来的请求。这样就可以很简单的使用jQuery里面的ajax方法请求。
百度了很多,一般解决方法是最省事的一句 header(“Access-Control-Allow-Origin:*”); 继续阅读

利用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>

div+css样式命名规则,值得收藏

写CSS的时候经常不知道该怎么取名,有了这个就好了,也能看到人家的css代码了。值得收藏呀

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态态:status
投票:vote
合作伙伴:partner

注释的写法

/* Footer */
内容区
/* End Footer */ 继续阅读

验证身份证号码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;
}

jquery.cookie.js源码和使用方法

jQuery操作cookie的插件,大概的使用方法如下

$.cookie(‘the_cookie’); //读取Cookie值
$.cookie(’the_cookie’, ‘the_value’); //设置cookie的值
$.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一个cookie 包括有效期 路径 域名等
$.cookie(’the_cookie’, ‘the_value’); //新建cookie
$.cookie(’the_cookie’, null); //删除一个cookie

继续阅读