小蜜蜂游戏
html
<p>小蜜蜂</p>
<script type="mce-text/javascript" src="http://www.cnblogs.com/miaov.js"></script>
<script type="mce-text/javascript" src="http://www.cnblogs.com/bee.js"></script>
<!-- Date: 2015-04-10 -->
<style><!--
*{ margin:0; padding:0;}
li{ list-style:none;}
#div1{ width:800px; height:600px; overflow:hidden; background:black; margin:0px auto; position:relative;}
#gameBtn{ color:white; font-size:20px; cursor:pointer; border:1px #FFFFFF solid; width:100px; height:30px; line-height:30px; text-align:center; position:absolute; top:285px; left:350px;}
#score{ color:#FFFFFF; font-size:20px;}
#bee{ position:relative;}
.enemy1{ width:40px; height:28px; background:url(images/mf1.png) no-repeat; float:left;}
.enemy2{ width:40px; height:28px; background:url(images/mf2.png) no-repeat; float:left;}
.enemy3{ width:40px; height:28px; background:url(images/mf3.png) no-repeat; float:left;}
.air1{ width:46px; height:60px; background:url(images/fj.png) no-repeat; position:absolute;}
.bullet{ width:1px; overflow:hidden; height:10px; background:white; position:absolute;}
--></style>
<div id="div1">
<div id="gameBtn">开始游戏</div>
</div>
bee.js
/**用命名空间的写法来写 也叫单体**/ /** 功能： 元素的生成( createElement ) 敌人的移动( setInterval ) 碰撞检测( 方法 ) 小蜜蜂和子弹 敌人跟随( 运动算法 ) 小蜜蜂掉下的时候 会根据飞机往左还是往右 来走 关卡( 实现多关 ) 其他的功能 ( 积分 ，血量 ) **/ window.onload=function(){ var oBtn = getById('gameBtn'); oBtn.onclick = function(){ this.style.display = 'none'; Game.init('div1'); } } var Game={ // 创建数据 start oEnemy:{//敌人数据的创建 小蜜蜂的数据 e1:{ style:'enemy1', blood:1, speed:5 , score:1 },//打中了绿色的加一个积分 e2:{ style:'enemy2', blood:2, speed:7 , score:2 }, //打中了紫色的加两个积分 e3:{ style:'enemy3', blood:3, speed:10 , score:3 } //打中了红色的加三个积分 }, guanka:[ //关卡数据创建 设置 每行几个 colNum 小蜜蜂掉下来X轴 和Y轴的速度, 每隔 times时间掉下来一个 //第一关数据 ul的数据 { eMap:[ //6 行 每行 10 个 'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2', 'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2', 'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2', 'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1', 'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1', 'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1' ], colNum:10 , //每行几个 iSpeedX:10, //小蜜蜂掉下时X轴速度 iSpeedY:10, //小蜜蜂掉下时Y轴速度 times: 2000 //每隔2s钟掉下一个小蜜蜂 }, //第二关数据 ul的数据 { eMap:[ 'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3', 'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3', 'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3', 'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1', 'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1', 'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1' ], colNum:10 , iSpeedX:10, //ul的X轴速度 iSpeedY:10, //ul的y轴速度 times: 2000 } ], airPlain:{ style:'air1', bulletStyle:'bullet' }, // 创建数据 end init:function(id){ //初始化 this.oParent = document.getElementById(id); this.iGrade = 0; this.createScore(); this.createEnemy( this.iGrade ); this.createAirplain(); }, createScore:function(){ //创建score var oS = document.createElement('div'); oS.id = 'score'; oS.innerHTML = '积分:<span>0</span>'; this.oParent.appendChild(oS); this.oSNum = oS.getElementsByTagName('span')[0]; }, createEnemy:function(iNow){ if( this.oUl ){//进入第二关 或者后面的关的时候 如果有ul 先清掉ul 并清掉ul的定时器 clearInterval( this.oUl.timer ); this.oParent.removeChild( this.oUl ); } document.title = '第'+ (iNow+1) +'关'; var gk = this.guanka[iNow]; var oUl = document.createElement('ul'); var arr=[]; oUl.id='bee'; this.oParent.appendChild(oUl); oUl.style.width = this.guanka[iNow].colNum * 40 +'px'; oUl.style.left = (this.oParent.offsetWidth - oUl.offsetWidth)/2 +'px'; this.oUl = oUl; for( var i=0; i < gk.eMap.length ; i++ ){ var oLi = document.createElement('li'); oLi.className = this.oEnemy[gk.eMap[i]].style; //每个小蜜蜂身上都有很多数据 血 速度 积分 oLi.blood = this.oEnemy[gk.eMap[i]].blood; oLi.speed = this.oEnemy[gk.eMap[i]].speed; oLi.score = this.oEnemy[gk.eMap[i]].score; oUl.appendChild(oLi); } this.aLi = oUl.getElementsByTagName('li'); //li 定位转换为absolute for( var i = 0; i < this.aLi.length ; i++ ){ arr.push( [this.aLi[i].offsetLeft , this.aLi[i].offsetTop] ) } for( var i = 0; i < this.aLi.length ; i++ ){ this.aLi[i].style.position = 'absolute'; this.aLi[i].style.left = arr[i][0] +'px'; this.aLi[i].style.top = arr[i][1] +'px'; } //ul 移动 this.runEnemy(gk); //把当前关卡传进来 }, //敌人移动 runEnemy:function(gk){ var This = this; var L = 0; var R = this.oParent.offsetWidth - this.oUl.offsetWidth; this.oUl.timer = setInterval( function(){ //临界点 if( This.oUl.offsetLeft > R ){ gk.iSpeedX *=-1; This.oUl.style.top = This.oUl.offsetTop + gk.iSpeedY +'px'; }else if( This.oUl.offsetLeft < L ){ gk.iSpeedX *=-1; This.oUl.style.top = This.oUl.offsetTop + gk.iSpeedY +'px'; } This.oUl.style.left = This.oUl.offsetLeft + gk.iSpeedX +'px'; },200) setInterval(function(){ This.oneMove()//单兵作战 当整体蜜蜂移动的时候开始 },gk.times) //每隔多长时间掉下一个蜜蜂 }, oneMove:function(){ var This = this; var nowLi = this.aLi[ Math.floor(Math.random()*this.aLi.length) ] //开一个定时器让它 小蜜蜂 来攻击我改变left 和top值 //并跟随飞机 利用的是 勾股定理 计算蜜蜂的x轴和y轴的速度 nowLi.timer=setInterval(function(){ var a = (This.oAir.offsetLeft + This.oAir.offsetWidth/2) - (nowLi.offsetLeft + nowLi.offsetWidth/2 + nowLi.parentNode.offsetLeft ); var b = (This.oAir.offsetTop + This.oAir.offsetHeight/2) - (nowLi.offsetTop + nowLi.offsetHeight/2 + nowLi.parentNode.offsetTop ); var c = Math.sqrt( a*a +b*b ); var iSX = nowLi.speed * a/c ; //速度会根据飞机来决定是正还是负 小蜜蜂往右 速度大于0 小蜜蜂往左 速度小于0 var iSY = nowLi.speed * b/c; nowLi.style.left = nowLi.offsetLeft + iSX +'px'; nowLi.style.top = nowLi.offsetTop + iSY +'px'; if( This.pz( This.oAir , nowLi ) ){ alert('游戏结束'); window.location.reload() //页面重新从加载 } },30) }, createAirplain:function(){//创建飞机 var oAir = document.createElement('div'); this.oAir = oAir; oAir.className = this.airPlain.style; this.oParent.appendChild( oAir ); oAir.style.left = (this.oParent.offsetWidth - oAir.offsetWidth)/2 +'px'; oAir.style.top = this.oParent.offsetHeight - oAir.offsetHeight +'px'; this.bindAir(); }, bindAir:function(){ //左右键控制飞机移动 var iNum = 0; var timer = null; var This = this; document.onkeydown = function(ev){ var ev = ev || event; if(!timer){ //如果timer为空的时候 不存在的时候 开定时器 为了保证只有一个定时器 开定时器是为了解决键盘时间 卡的情况 timer = setInterval( show , 30 ); } if( ev.keyCode == 37 ){ iNum = 1 }else if( ev.keyCode == 39 ){ iNum = 2 } }; document.onkeyup = function(ev){ var ev = ev || event; clearInterval(timer); timer=null; iNum = 0; if( ev.keyCode == 32 ){ //当空格键 抬起的时候 创建子弹 This.createBullet() } }; function show(){ if( iNum == 1 ){ This.oAir.style.left = This.oAir.offsetLeft - 10 +'px' }else if( iNum == 2 ){ This.oAir.style.left = This.oAir.offsetLeft + 10 +'px' } } }, createBullet:function(){ var oBullet = document.createElement('div'); oBullet.className = 'bullet'; this.oParent.appendChild( oBullet ); oBullet.style.left = this.oAir.offsetLeft + this.oAir.offsetWidth/2 +'px'; oBullet.style.top = this.oAir.offsetTop - 10 +'px'; this.runBullet(oBullet); //把创建的子弹传进来 运动的就是这个子弹 }, runBullet:function(oB){ var This = this; //每一个子弹都有一个定时器 当子弹飞出屏幕的时候应该关掉定时器 并删掉子弹 避免占内存 oB.timer = setInterval(function(){ if( oB.offsetTop < -10 ){ //子弹飞出屏幕 clearInterval( oB.timer ); This.oParent.removeChild( oB ); }else{ oB.style.top = oB.offsetTop - 10 +'px'; } for( var i = 0 ; i < This.aLi.length ;i++ ){ if( This.pz( oB , This.aLi[i] ) ){ if( This.aLi[i].blood ==1 ){//如果只剩一滴血的话 消除 紫色的需要打两下 绿色的打一下消除 clearInterval( This.aLi[i].timer ); //删掉小蜜蜂之前 先关掉小蜜蜂的定时器(改left值top值的定时器) This.oSNum.innerHTML = parseInt(This.oSNum.innerHTML) + This.aLi[i].score; This.oUl.removeChild( This.aLi[i] );//这一句要在下面 不然会报错 //打中了加积分 积分 和血是在创建 小蜜蜂敌人数据的时候 加上的 }else{ This.aLi[i].blood-- } clearInterval( oB.timer ); This.oParent.removeChild(oB) } } //子弹打蜜蜂的过程中 如果蜜蜂全都打完了就进入第二关 if( !This.aLi.length ){ This.iGrade++; if( This.iGrade < This.guanka.length ){ This.createEnemy(This.iGrade); }else{ This.iGrade = This.guanka.length; alert('通关') } } },30) }, pz : function(obj1,obj2){ //碰撞检测 var L1 = obj1.offsetLeft; var R1 = obj1.offsetLeft + obj1.offsetWidth; var T1 = obj1.offsetTop; var B1 = obj1.offsetTop + obj1.offsetHeight; var L2 = obj2.offsetLeft + obj2.parentNode.offsetLeft; var R2 = obj2.offsetLeft + obj2.offsetWidth + obj2.parentNode.offsetLeft; var T2 = obj2.offsetTop + obj2.parentNode.offsetTop; var B2 = obj2.offsetTop + obj2.offsetHeight + obj2.parentNode.offsetTop; if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){ return false; } else{ return true; } } };
miaov.js
/*getStyle()*/ function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } /*getById()**/ function getById(id){ return document.getElementById(id) } /*$**/ function $(v){ if(typeof v==='function'){ return window.onload=v }else if(typeof v==='string'){ return document.getElementById(v) }else if(typeof v==='object'){ return v } } /*leo运动框架doMove()*速度是匀速的，自己设置的*/ function doMove(obj,attr,dir,target,endFn){ //var presentPos=parseInt(getStyle(obj,attr)); //obj的当前位置 left 或者 top 值 dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir; //判断 dir是正还是负，根据 当前值 是否小于 目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=parseInt(getStyle(obj,attr))+dir; //步长 if( speed < target && dir <0 || speed > target && dir>0 ){ //判断方向 speed = target //speed赋值给obj.style[attr] 前先对speed进行判断,超过了目标点 就 回到目标点 } obj.style[attr]=speed+'px'; //赋值 if(speed==target){ clearInterval(obj.timer); endFn && endFn() } },30) } /**运动框架startMove(),速度是计算出来 缓冲，跟距离成正比**/ function startMove(obj,attr,target,endFn){ clearInterval(obj.timer) obj.timer=setInterval(function(){ var speed=(target-parseInt(getStyle(obj,attr)))/10; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); var speedL=parseInt(getStyle(obj,attr))+speed; obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px'; //document.title=getStyle(obj,attr)+"-"+speed; if(speedL==target){ clearInterval(obj.timer); endFn && endFn() } },30) } //运动结合透明度 function Move(obj,attr,dir,target,endFn){ var iCur=0; clearInterval( obj.timer ); if( attr == 'opacity' ){ dir = target - parseInt(getStyle( obj,attr )*100) > 0 ? dir : -dir; }else{ dir = target - parseInt(getStyle( obj,attr )) > 0 ? dir : -dir; } obj.timer =setInterval(function(){ if( attr == 'opacity' ){ iCur = parseInt(getStyle( obj,attr )*100); }else{ iCur = parseInt(getStyle( obj,attr )); } var speed = iCur + dir; if( speed > target && dir >0 || speed <target && dir <0 ){ speed = target; } if( attr =='opacity' ){ obj.style[attr] = speed/100; obj.style.filter='alpha(opacity='+speed+')' }else{ obj.style[attr] = speed +'px'; } if( speed == target ){ clearInterval( obj.timer ); endFn && endFn.call(obj) } },30) } /**MovePerfect 完美版运动框架**/ function Moves(obj,json,fn){ clearInterval(obj.tms); obj.tms=setInterval(function(){ var bStop=true; for(var attr in json){ var iCur=attr==='opacity'?parseInt(parseFloat(getStyle(obj,attr))*100):parseInt(getStyle(obj,attr)); var iSpeed=(json[attr]-iCur)/6; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur!==json[attr]){ bStop=false; } if(attr==='opacity'){ obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; }else{ obj.style[attr]=(iCur+iSpeed)+'px'; } } if(bStop){ clearInterval(obj.tms); fn && fn.call(obj) // 这里用call把对象从window 指向了当前运动的对象,那么在函数调用的时候可以直接用this了 Moves(obj,json,function(){this}) } },10); } /**完美 缓冲运动 带opacity 速度版**/ function hcMove(obj,json,fn){ clearInterval( obj.timer ); obj.timer=setInterval(function(){ var iBtn=true; for(var attr in json){ var target=json[attr]; if( attr == 'opacity' ){ var iSpeed = (target-Math.round(getStyle(obj,attr))*100)/6; }else{ var iSpeed = (target-parseInt(getStyle(obj,attr)))/6; } iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//速度取整,因为js中的小数是经过计算的,默认四舍五入,但是不够0.5的就不会动了 if( parseInt(getStyle(obj,attr)) != target ){ iBtn=false;//如果有运动没到达目标点,iBtn为false if( attr == 'opacity' ){ var sNow=Math.round(getStyle(obj,attr)*100) + iSpeed; //先做处理 再赋值 if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){ sNow = target } obj.style[attr] = sNow/100; obj.style.filter = 'alpha(opacity='+sNow+')'; }else{ var sNow = parseInt(getStyle(obj,attr)) + iSpeed; //先做处理 再赋值 if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){ sNow = target } obj.style[attr] = sNow +'px'; } } } if(iBtn){ //如果运动全部完成,iBtn为true clearInterval(obj.timer); fn && fn() } },30) } /**时间版运动框架 结合Tweens()函数 可实现各种运动 匀速,加速,减速等 **/ function starMove3(obj,json,times,fx,fn){ var iCur={}; //获取初始值 b iCur[attr] = 0; //初始化 所有值为0 for(var attr in json) //区分透明度和其他属性的初始值的区别 { if(attr == 'opacity'){ iCur[attr] = Math.round(getStyle( obj,attr )*100) }else{ iCur[attr] = parseInt(getStyle(obj,attr)) } } clearInterval( obj.timer ); var oldTime=nowTime(); obj.timer=setInterval(function(){ var newTime=nowTime(); // oldTime < newTime; // oldTime - newTime //负数 到负无穷 var t1=oldTime - newTime + 2000; //从2000开始减小 一直到负无穷 Math.max( 0, t1) //t1先 大于 0 后小于0 var t=2000-Math.max( 0, t1); //0 2000 //当前时间 ,所有属性的当前时间都一样 for(var attr in json) { var value=Tween[fx](t,iCur[attr],json[attr]-iCur[attr],times); //当前位置,变化值 if( attr == 'opacity' ){ obj.style[attr] = value/100; obj.style.filter = 'alpha(opacity='+value+')' }else{ obj.style[attr] = value +'px'; } } if( t==times ){ clearInterval( obj.timer ); fn && fn.call(obj) } },13) } function nowTime(){ return (new Date).getTime() } /**时间版运动框架 结合Tweens()函数 可实现各种运动 匀速,加速,减速等 **/ function startMove4(obj,json,times,fx,fn){ var iCur = {}; var startTime = nowTime(); if( typeof times == 'undefined' ){ times = 400; fx = 'linear'; } if( typeof times == 'string' ){ if(typeof fx == 'function'){ fn = fx; } fx = times; times = 400; } else if(typeof times == 'function'){ fn = times; times = 400; fx = 'linear'; } else if(typeof times == 'number'){ if(typeof fx == 'function'){ fn = fx; fx = 'linear'; } else if(typeof fx == 'undefined'){ fx = 'linear'; } } for(var attr in json){ iCur[attr] = 0; if( attr == 'opacity' ){ iCur[attr] = Math.round(getStyle(obj,attr)*100); } else{ iCur[attr] = parseInt(getStyle(obj,attr)); } } clearInterval(obj.timer); obj.timer = setInterval(function(){ var changeTime = nowTime(); //startTime changeTime var scale = 1-Math.max(0,startTime + times - changeTime)/times; //2000 - 0 -> 1-0 -> 0-1 for(var attr in json){ var value = Tween[fx](scale*times,iCur[attr],json[attr] - iCur[attr],times); if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity='+ value +')'; obj.style.opacity = value/100; } else{ obj.style[attr] = value + 'px'; } } if(scale == 1){ clearInterval(obj.timer); if(fn){ fn.call(obj); } } },30); } /**抖动 shake 封装**/ function shake(obj,attr,endFn){ //如果愿意 也可以将抖动的初始频率传进来 20 if(obj.onOff){return;} obj.onOff=true; var num=0; var pos=parseInt(getStyle(obj,attr)); var arr=[];//20,-20,18,-18...0;//抖动的频率 for(var i=20;i>0;i-=2){ arr.push(i,-i); } arr.push(0); clearInterval(obj.shake);//这里用shake是为了防止与库里其他的timer冲突 obj.shake=setInterval(function(){ obj.style[attr]=pos+arr[num]+'px'; num++; if(num===arr.length){ clearInterval(obj.shake); endFn && endFn(); num=0; obj.onOff=false //如果不加这一行，点击 只抖动一次， 以后点击都无效 } },50) } /**数字转化为字符串，不足9补零**/ function toDouble(n){ if(n<10){ return '0'+n }else{ return ''+n } } /**通过class来获取元素**/ function getByClassName(oParent,tagName,className){ var arr=[]; var als=oParent.getElementsByTagName(tagName); for(var i=0;i<als.length;i++){ var a1=als[i].className.split(' '); for(var j=0;j<a1.length;j++){ if(a1[j]==className){ arr.push(als[i]); break; } } } return arr } /**正则 选取class**/ function getByClass(oParent,className){ var aS=oParent.getElementsByTagName('*'); var arr=[]; for(var i=0;i<aS.length;i++){ var s=aS[i].className; // /\b+className+\b/ var re=new RegExp('\\b'+className+'\\b' ); // \b代表独立部分,用\\ 是为了浏览器能输出 变量的 只能用正则的全称 if(re.test(s)) arr.push( aS[i] ); break } return arr } //去掉空格 function trim(str){ var re=/^\s+|\s+|\s+$/g; return str.replace(re,'') } /**添加class,并 排除添加重复的class,结合下面的indexofArr使用**/ function addClass(obj,className){ var arrClass=obj.className.split(' '); //如果要添加的class不存在 var _index=indexofArr(arrClass,className);//查看所添加的className在 原有的class中是否存在 if(obj.className==''){ obj.className=className; }else if(_index==-1){ //当所添加的class不存在时,执行下一句 obj.className+=' '+className; } } /**删除class**/ function removeClass(obj,className){ var arrClass=obj.className.split(' '); var _index=indexofArr(arrClass,className);//查看所添加的className在 原有的class中是否存在 if(_index==1){ arrClass.splice(_index,1);//这一步是对数组进行操作,删除数组中的class,返回的是被删掉的那一个元素 obj.className=arrClass.join(' ');//className需要重新join数组中的元素,class是字符串 } } /**检查 某个元素v 在数组中是否存在,存在返回1 不存在返回-1**/ function indexofArr(arr,v){ for(var i=0;i<arr.length;i++){ if(arr[i]==v){ return i //存在 } } return -1 //不存在 } function onFade(obj,time,endFn){ //渐隐 var maxNum = 100; var num = 0; var timer = null; clearInterval(timer); timer = setInterval(function(){ num+=10; if(obj.currentStyle){ obj.style.filter = 'alpha(opacity=' + maxNum-num + ')'; }else{ obj.style.opacity = (maxNum-num)/100; } if(num>100) { clearInterval(timer); endFn && endFn(); } },time); } /**获取某个元素到页面的距离,不管父级有没有定位,不管是什么元素,到左侧同理 *使用方法：getPos(obj).left 或者 getPos(obj).top **/ function getPos(obj){ var pos={'left':0,'top':0}; while(obj){ pos.left+=obj.offsetLeft; pos.top+=obj.offsetTop; obj=obj.offsetParent; } return pos } /**获取鼠标距离页面顶部 和 页面左侧的距离 但凡用到client的就要用到scroll。 *跟随鼠标移动案例： 鼠标到哪 div跟到哪 *用法 var oEvent=ev || event; * obj.style.left=getPos1(oEvent).x+'px' **/ function getPos1(ev){ var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft; return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop} } /**绑定函数**/ function bind(obj,evName,fn){ if(obj.attachEvent){ obj.attachEvent('on'+evName,function(){ fn.call(obj) }); }else{ obj.addEventListener(evName,fn,false) } } //判断一个cookie存不存在 if(getCookie(key)) function getCookie(key){ var arr1=document.cookie.split('; '); for(var i=0;i<arr1.length;i++){ var arr2=arr1[i].split('='); if(arr2[0]==key){ //encodeURI(arr2[1]); return decodeURI(encodeURI(arr2[1])); } } } //设置cookie,注意key 和value 都是字符串,t是数字 过几天后过期 function setCookie(key,value,t){ var oDate=new Date(); oDate.setDate(oDate.getDate()+t); document.cookie=''+key+'='+value+';expires='+oDate.toGMTString(); } //删除cookie function removeCookie(key){ setCookie(key,'',-1) } /**面向对象Tab**/ /* 用法： 1.在页面创建html,id自定义 <div id="tab1" class='tab'> <input type="button" value="时事" class='select'/> <input type="button" value="政治" /> <input type="button" value="新闻" /> <div class="active">时事时事时事</div> <div>政治政治政治</div> <div>新闻新闻新闻</div> </div> 2.在window.onload中调用： var tab1=new Tab('tab1'); tab1.init(); tab1.autoplay() 扩展：还可以自己添加自定义方法,例如自动播放,可以自主决定要不要调用这个方法,比普通函数的优点是扩展性强 */ function Tab(id){//this指向对象 tab1 this.oTab=document.getElementById(id) this.aInput=this.oTab.getElementsByTagName('input'); this.aDiv=this.oTab.getElementsByTagName('div'); } Tab.prototype.init=function(){//this指向对象 tab1 var This=this;//把对象存进This中 for(var i=0;i<this.aInput.length;i++){ this.aInput[i].index=i; this.aInput[i].onclick=function(){ This.change(this); //这里括号中的this指的是按钮 } } } Tab.prototype.change=function(obj){//this指的是按钮,就不对了,应该指的是对象,可以根据change()的调用来修正指向,然后利用把对象this存进This,obj指的是当前按钮 for(var i=0;i<this.aInput.length;i++){ this.aInput[i].className=''; this.aDiv[i].style.display='none'; } obj.className='select'; this.aDiv[obj.index].style.display='block'; } Tab.prototype.autoplay=function(){//this指的是按钮,就不对了,应该指的是对象,可以根据change()的调用来修正指向,然后利用把对象this存进This,obj指的是当前按钮 var This=this; setInterval(function(){ for(var i=0;i<This.aInput.length;i++){ This.aInput[i].className=''; This.aDiv[i].style.display='none'; } if(This.iNow==This.aInput.length-1){ This.iNow=0 }else{ This.iNow++ } This.aInput[This.iNow].className='select'; This.aDiv[This.iNow].style.display='block'; },1000) } /**面向对象tab结束**/ /**绑定事件和主动触发 **/ function bindEv(obj,evName,fn){ //obj,楼层 //evName:楼层下的书架 //fn:一本书 obj.Listeners = obj.Listeners || {}; //楼层的建立,第一次没有楼层,走{} obj.Listeners[evName] = obj.Listeners[evName] || [];//书架的建立,第一次没有书架,走 [] obj.Listeners[evName].push( fn ); // 书 if(obj.addEventListener){ obj.addEventListener(evName,fn,false) }else{ obj.attachEvent('on'+evName,function(){ fn.call(this) }) } } //主动触发自定义事件 //bindEv 和 fireEvent 需要找到一种关系,通过obj和evName能够找到fn function fireEvent(obj,evName){ for(var i=0;i<obj.Listeners[evName].length;i++){ obj.Listeners[evName][i]() //书架下的每本书,就是该事件下的所有函数 } } /**多物体弹性运动框架 * bb(oDiv1,{'left':500,'top':200}) * **/ /** * if(!obj.oSpeed)obj.oSpeed={}; 如果obj对象上没有oSpeed这个自定义属性，就定义一个。值是一个空对象，可以理解为是一个空json。 if(!obj.oSpeed[attr])obj.oSpeed[attr]=0; 上面已经定义自定义oSpeed属性了，所以这里是判断这个自定义属性里有没有attr这个属性，没有的话就定义一个，并设置初始值为0。 **/ function bb(obj,json){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var iBtn = true; for( var attr in json ){ /**代码块**/ if( !obj.iSpeed ) obj.iSpeed={}; if( !obj.iSpeed[attr] ) obj.iSpeed[attr]=0; var iTarget = json[attr]; var iCur = parseInt( getStyle( obj,attr ) ); obj.iSpeed[attr] += (iTarget - iCur)/6; obj.iSpeed[attr] *= 0.75; if( Math.abs(obj.iSpeed[attr]) <=1 && Math.abs( iTarget - iCur )<=1 ){ obj.iSpeed[attr]=0; obj.style[attr] = iTarget +'px' }else{ iBtn = false; var sNow= iCur + obj.iSpeed[attr]; if( attr =='width' || attr =='height' ){ if( sNow < 0 ) sNow =0; } obj.style[attr] = sNow +'px'; } document.title = iCur +'-'+obj.iSpeed[attr]; /**代码块**/ } if( iBtn ){ clearInterval( obj.timer ); } },30) } /**找出数组中最小值**/ function minimum(arr){ var v=arr[0]; var im_pos=0; for(var i=1;i<arr.length;i++){ if( arr[i] < v ){ v = arr[i]; im_pos=i } } return v //找出最小值 也可以找出最小值所在的位置 return im_pos } /**找出字符串中的所有数字**/ function findNum(str){ return str.match(/\d+/g); } function getTop (obj) { var iTop=0; var scrollTop=document.documentElement.scrollTop || document.documentElement.scrollTop; var clientHeight=document.documentElement.clientHeight; iTop= scrollTop + (clientHeight - obj.offsetHeight)/2; return iTop } function extend (obj1,obj2) { for(var attr in obj2){ obj1[attr]=obj2[attr] } } /**取消冒泡**/ function stopPro (e) { if (e && e.stopPropagation) { //W3C取消冒泡事件 e.stopPropagation(); } else { //IE取消冒泡事件 window.event.cancelBubble = true; } } //css3 过渡完成事件 function addEnd(obj,fn){ obj.addEventListener('webkitTransitionEnd',fn,false);//webkit内核 obj.addEventListener('transitionend',fn,false);//firefox } function removeEnd(obj,fn){ obj.removeEventListener('webkitTransitionEnd',fn,false);//webkit内核 obj.removeEventListener('transitionend',fn,false);//firefox } //css3 animation end function addEndAnimation(obj,fn){ obj.addEventListener('webkitAnimationEnd',fn, false); obj.addEventListener('animationEnd',fn, false); } //随机背景色 function randomColor(){ var str= Math.ceil(Math.random()*16777215).toString(16); while(str.length<6){ str='0'+str;//不足6位补0 } return str } //获取几天之后的日期 function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 var y = dd.getYear(); var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0 var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate(); //获取当前几号，不足10补0 return m+"/"+d return (1900+ y)+"-"+m+"-"+d; }; //获取随机数组1 randomArr(iAll,iNow) 在iAll个数中随机获取iNow个数 function randomArr(){ function randomArr(iAll,iNow){ var arr=[]; var newArr=[]; for(var i=0;i<iAll;i++){ arr.push(i) } for(var i=0;i<iNow;i++){ newArr.push( arr.splice( Math.floor(Math.random(0,1)*arr.length) , 1 ) ) } return newArr } } //获取随机数组1 randomArr(iAll,iNow) 在iAll个数中随机分批获取iNow个数 把每批的数组放到一个新的arr中 就是分批 批数iAll/iNow // 类似于这样的 randomArr(10,2) arr1=[1,2,3,4,5,6,7,8,9,10] arrResult=[ [1,2] ,[3,4], [5,6], [7,8],[9,10] ] function randomArr1(iAll,iNow){ var arr=[]; var arrAll=[]; for(var i=0;i<iAll;i++){ arr.push(i) } // iNow是iAll的1/10 iAll/iNow ---> 10 for(var j=0;j < iAll/iNow; j++ ){ var newArr=[]; for(var i=0;i<iNow;i++){ newArr.push( arr.splice( Math.floor(Math.random(0,1)*arr.length) , 1 ) ) } arrAll.push(newArr) } //把arr的内容分批放到arrAll中,各批放到newSrr中 return arrAll } // h5 获取某个点的像素的color function getXY(obj,x,y){ var w=obj.width; var h=obj.height; var d=obj.data; var color=[]; color[0]= d[ (w*y+x)*4 ]; color[1]= d[ (w*y+x)*4+1 ]; color[2]= d[ (w*y+x)*4+2 ]; color[3]= d[ (w*y+x)*4+3 ]; return color; } //h5 设置某个点的像素的color function setXY(obj,x,y,color){ var w=obj.width; var h=obj.height; var d=obj.data; d[ (w*y+x)*4 ] = color[0] ; d[ (w*y+x)*4+1 ] = color[1] ; d[ (w*y+x)*4+2 ] = color[2] ; d[ (w*y+x)*4+3 ] = color[3] ; } //碰撞检测 function pz(obj1,obj2){ var L1 = obj1.offsetLeft; var R1 = obj1.offsetLeft + obj1.offsetWidth; var T1 = obj1.offsetTop; var B1 = obj1.offsetTop + obj1.offsetHeight; var L2 = obj2.offsetLeft; var R2 = obj2.offsetLeft + obj2.offsetWidth; var T2 = obj2.offsetTop; var B2 = obj2.offsetTop + obj2.offsetHeight; if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){ return false; } else{ return true; } }
