微信分享通用组件

微信分享通用组件,用于微信浏览器内浏览网页的分享信息定义。
一、可定义的信息
1、分享时显示的LOGO;
2、分享LOGO的宽度;
3、分享LOGO的高度;
4、分享出去显示的标题(默认调用网页标题);
5、分享出去显示的描述(默认调用网页标题);
6、分享链接(默认为当前页面的URL)。
7、分享微信的APPID(一般为空)。

二、使用方法
1、引入微信分享组件js:

/*******************************
 * Author:Mr.Think
 * Description:微信分享通用代码
 * 使用方法:_WXShare('分享显示的LOGO','LOGO宽度','LOGO高度','分享标题','分享描述','分享链接','微信APPID(一般不用填)');
 *******************************/
function _WXShare(img,width,height,title,desc,url,appid){
    //初始化参数
    img=img||'http://a.zhixun.in/plug/img/ico-share.png';
    width=width||100;
    height=height||100;
    title=title||document.title;
    desc=desc||document.title;
    url=url||document.location.href;
    appid=appid||'';
    //微信内置方法
    function _ShareFriend() {
        WeixinJSBridge.invoke('sendAppMessage',{
              'appid': appid,
              'img_url': img,
              'img_width': width,
              'img_height': height,
              'link': url,
              'desc': desc,
              'title': title
              }, function(res){
                _report('send_msg', res.err_msg);
          })
    }
    function _ShareTL() {
        WeixinJSBridge.invoke('shareTimeline',{
              'img_url': img,
              'img_width': width,
              'img_height': height,
              'link': url,
              'desc': desc,
              'title': title
              }, function(res) {
              _report('timeline', res.err_msg);
              });
    }
    function _ShareWB() {
        WeixinJSBridge.invoke('shareWeibo',{
              'content': desc,
              'url': url,
              }, function(res) {
              _report('weibo', res.err_msg);
              });
    }
    // 当微信内置浏览器初始化后会触发WeixinJSBridgeReady事件。
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            // 发送给好友
            WeixinJSBridge.on('menu:share:appmessage', function(argv){
                _ShareFriend();
          });

            // 分享到朋友圈
            WeixinJSBridge.on('menu:share:timeline', function(argv){
                _ShareTL();
                });

            // 分享到微博
            WeixinJSBridge.on('menu:share:weibo', function(argv){
                _ShareWB();
           });
    }, false);
}

2、在页面底部或共用js中,初始化执行:

_WXShare('分享显示的LOGO','LOGO宽度','LOGO高度','分享标题','分享描述','分享链接','微信APPID(一般不用填)');

3、可通过动态定义【分享链接】,实现每次分享出去的链接不同;

js获取多个tagname的的节点数组

功能需要,写了个获取多个tagname节点集合的小方法。类似于jQuery的$(‘iput,select,textarea’,'#form’)的效果,返回是按节点在原有文档流中的顺序返回的。

//获取指定标签类型的节点数组 用例:GetTagNames('input,select,textarea',document.getElementById('form'))
function GetTagNames(tagnames,parEl){
	//父节点未定义默认循document
	var parEl=parEl || document;
	//获取指定父元素的子节点
	var all=parEl.getElementsByTagName('*');
	//存放所有符合条件的子节点
	var nodes=[];
	//将转入的tagname转换成判断正则
	var reg=eval('/'+tagnames.split(',').join('|')+'/i');
	//循环,判断,存储
	for(var ii=0;ii<all.length;ii++){
		if(reg.test(all[ii].nodeName)){
			nodes.push(all[ii]);
		}
	}
	//返回
	return nodes;
}

利用毫秒减值计算时长

刚写的一个利用毫秒减值计算时长的小方法。使用方法:var duration=MsToDuration(ms)。

function MsToDuration(ms){
	var sec=0,min=0,hour=0,day=0,dur={};
	if(ms>0){
		//秒
		sec=(ms/1000).toFixed(2);
		//分
		if(sec >= 60){
			min=Math.floor(sec/60);
			sec=(sec%60).toFixed(2);
		}
		//时
		if(min >= 60){
			hour=Math.floor(min/60);
			min=min%60;
		}
		//天
		if(hour >= 24){
			day=Math.floor(hour/24);
			hour=hour%24;
		}
	}
	//返回值
	dur.day=day;
	dur.hour=hour;
	dur.min=min;
	dur.sec=sec;
	return dur;
}

原生AJAX入门讲解(含实例)

相对于jQuery、YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿…但我还是想说,原生JS才是最根本最底层的知识(虽然实际项目中我也是以jQuery AJAX为主,为什么?高效!),求木之长者,必固其根本。
什么是AJAX? 它的优点劣势是什么?
Asynchronous JavaScript and XML(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。简单的说它是多种技术的组合,目的就是让前台的数据交互变得更快捷,不用刷新页面就可以完成数据的更新。关于它的概念,止于此。想了解更多,请前往:http://zh.wikipedia.org/zh/AJAX
优点很明显,利于用户体验,不会打断用户的操作,在不刷新页面的情况下更新内容,减小服务器压力也是它很硬性的一个优点;而缺点,除了倍受追捧的SEO问题,安全问题、前进后退(这个虽然可以用其他方法解决,但AJAX本身的机制还是没变)、破坏程序的异常机制以及对新兴手持设备支持不完美的问题都是它现存的一些缺点。人无完人,AJAX也是如此,我们并不能因为它有缺点而摒弃它。
什么地方需要AJAX?
其实这是一个太宽泛的问题,各人各项目都有不同的用处,依我的经验与理解,AJAX应该用于小面积更新数据而不希望整个页面刷新的情况下使用。比如对用户名或者注册邮箱等数据判断、内容选项卡内容、弹出的登录注册窗口以及用户提交信息后的反馈信息等等。
实践出真知!
崇尚思考加实践,我坚信这是深入任何一门技术的必备法宝。下面,我就以一个常用的验证用户是否使用的实例,浅尝辄止的讲解一下基础的AJAX。查看样例演示
验证用户名这种数据判断,不用多说了,会一点点前端的人都知道是必须的。最传统的模式可能是输入信息,然后用户点提交后alert出一个窗口,告诉用户XXX用户名已被注册,请重新输入!我讨厌极丑的alert框!我想大多用户也是一样。此时,AJAX就可以华丽登场了。当用户输入完名字后,在表单外任何地方点一下(失去焦点),AJAX就迅速把用户输入的信息反馈到服务器端判断,并迅速返回一个信息告知用户输入的昵称是否可用。如此,我们需要一个前台的输入表单,代码如下:

<p> </p>

另外,我们还需要一个判断输入昵称是否存在的后端页面(本文以PHP为例,这部分不用细究):

...
if(isset($_GET['entryname'])){
	$entryname=$_GET['entryname'];
}else{
	$entryname='DATA NULL';
}
$sql=sprintf("select * from i_test_ajax where nickname='%s'",$entryname);
$res=$iajax->query($sql);
//sleep只是为了展示readState==1时的效果
sleep(1);
if(($res->num_rows)>0){
	echo "抱歉!此昵称已存在 :(";
}else{
	echo "恭喜!此昵称可注册 :)";
}
...

如此,万事俱备,只欠东风,剩下的就交给AJAX来处理了。
XMLHttpRequest,不得不提的一个对象,AJAX最核心也是最底层的对象。可悲哀的是,它是W3C的一个标准,但微软IE一直很自我(微软IE)。怎么办?当然是用一个方法和谐掉它们。微软IE支持ActiveXObject(‘Microsoft.XMLHTTP’)对象,这样就简单了:

//兼容的XMLHttpRequest对象
IXHR: function(){
	if(window.ActiveXObject){
			XHR=new ActiveXObject('Microsoft.XMLHTTP');
		}else if(window.XMLHttpRequest){
			XHR=new XMLHttpRequest();
		}else{
        	return null;
        }
}

兼容的XMLHttpRequest对象实现了,接下来写一个简单的onblur事件,即当输入值后,表单失去焦点后开始判断并迅速回馈一个信息到前台。代码如下:

//触发焦点时执行
document.forms['iform'].nickname.onblur = function(){
    //输入的值
    var val=document.forms['iform'].nickname.value;
    //对用户名的判断
    if(!/^[a-zA-Z0-9_]{3,16}$/.test(val)){
		alert('请输入3~16位由英文、数字、下划线组成的昵称!');
		return false;
    }
    //初始化一下XHR
    iBase.IXHR();
    //原来需要新打开的判断页面用GET使用异步
	XHR.open('GET','/demo/ajax/iajax20110306_query.php?entryname='+val,true);
	//与readyState属性有关,当readyState改变时它才会触发
	XHR.onreadystatechange=returnFun;
	//异步处理完成后发送数据出去(比如某些需要在焦点事件后再执行的)
	XHR.send(null);
}

解释一下AJAX部分的代码。iBase.IXHR(),初始化XHR,以保证XMLHttpRequest对象的兼容。接下来,通过以GET的方式,异步发送到/demo/ajax/iajax20110306_query.php页面进行验证。有人会问什么是GET,GET是从服务器上请求数据,GET方法就是把数据参数队列加到一个URL上,值和表单是一一对应的,比如本文的entryname=val。这个概念可能属于后台程序的范畴,不在此细说。然后,我们需要用到一个onreadystatechange事件属性,这个属性是用来存储函数(或函数名),每当readyState属性改变时,就会调用该函数,即本文中的returnFun;最后,我们还要发送一个数据到服务器,send属性一般用于数据交换,而本文只是一个简单的验证判断,所以,send一个空值。
基本的判断与数据发送完成了,接下来还剩一个关键的信息获取,即returnFun。先看代码:

function returnFun(){
    //当send()已调用,正在发送请求时,显示Loading...
	if(XHR.readyState==1){
		iBase.Id('tips').innerHTML='Loding...';
	}else if(XHR.readyState==4){
		//当响应内容解析完成,可以调用时
		//更缜密,再判断一下status是否成功
		if(XHR.status==200){
			//responseText为返回的文本
			iBase.Id('tips').innerHTML=XHR.responseText;
		}
		//使用完请销毁,避免内存泄露
		XHR=null;
	}
}

此函数是用来通过判断readyState及status状态也及时反馈给用户相应的提示信息。readyState有五种状态:
  0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
  1 (载入):已经调用open() 方法,但尚未发送请求;
  2 (载入完成): 请求已经发送完成;
  3 (交互):可以接收到部分响应数据;
  4 (完成):已经接收到了全部数据,并且连接已经关闭。
如此一来,你应该就能明白readyState的功能,而status实际是一种辅状态判断,只是status更多是服务器方的状态判断。关于status,由于它的状态有几十种,我只列出平时常用的几种:
  100——客户必须继续发出请求
  101——客户要求服务器根据请求转换HTTP协议版本
  200——成功
  201——提示知道新文件的URL
  300——请求的资源可在多处得到
  301——删除请求数据
  404——没有发现文件、查询或URl
  500——服务器产生内部错误
至此,一个简单的AJAX验证实例就完成了:查看样例演示

关于AJAX的基础介绍与实例就这么多,关键还是在于自己的实践与思考。其实这其中涉及知识并不复杂,若有后端程序的基础,学起AJAX会更加容易,关键是要想明白其中的逻辑关系。有兴趣的话,可以自己写一个不刷新页面加载新内容的AJAX,或者研究一下jQuery中关于AJAX的封装。

JS实现动态显示当前时间(12/24小时制)

今天又要用到动态显示当前时间,且要求可以切换24/12小时制, 记得很久前写过一个24小时制的,但一时没能找着, 于是又重新写了个,若有需要的朋友自行复制粘贴一份吧.
很简单的一个功能函数,实现方式不多言,用Date()对象获取到当前时间,然后用setTimeout每隔1秒获取最新的时间.
写的过程中碰到过一个小小的问题: 我最初的想法是用setInterval()每隔1秒获取最新时间,可是可以,但setInterval如果放在主函数内部,但导致内存泄漏(至于原因,暂时还没想明白),后来在Rocky的提醒下用setTimeout()才解决内存泄漏问题,感谢Rocky同学:)
核心代码及演示查看样例演示

function nowTime(ev,type){
	/*
	 * ev:显示时间的元素
	 * type:时间显示模式.若传入12则为12小时制,不传入则为24小时制
	 */
	//年月日时分秒
	var Y,M,D,W,H,I,S;
	//月日时分秒为单位时前面补零
	function fillZero(v){
		if(v<10){v='0'+v;}
		return v;
	}
	(function(){
		var d=new Date();
		var Week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
		Y=d.getFullYear();
		M=fillZero(d.getMonth()+1);
		D=fillZero(d.getDate());
		W=Week[d.getDay()];
		H=fillZero(d.getHours());
		I=fillZero(d.getMinutes());
		S=fillZero(d.getSeconds());
		//12小时制显示模式
		if(type && type==12){
			//若要显示更多时间类型诸如中午凌晨可在下面添加判断
			if(H<=12){
				H='上午 '+H;
			}else if(H>12 && H<24){
				H-=12;
				H='下午 '+fillZero(H);
			}else if(H==24){
				H='下午 00';
			}
		}
		ev.innerHTML=Y+'年'+M+'月'+D+'日 '+' '+W+' '+H+':'+I+':'+S;
		//每秒更新时间
		setTimeout(arguments.callee,1000);
	})();
}

渔夫科技