1、一次性定时器
window.οnlοad=function(){
var timeId=window.setTimeout(
function(){
alert("您好");
},1000);
document.getElementById("btn").οnclick=function(){
clearTimeout(timeId);
};
};
2、协议按钮禁用
协议内容
var time=5;
var timeId=setInterval(function{
time--;
my$("btn").value="请仔细阅读协议("+time+")";
if(time<=0){
clearInterval(timeId);
my$("btn").disabled=false;
my$("btn").value="同意";
}
},1000);
3、div渐变
my$("btn").οnclick=function(){
var opacity=10;//透明化
var timeId=setInterval(function(){
opacity--;
if(opacity<=0){
clearInterval(timeId);
}
my$("dv").style.opacity=opacity/10;
},200);
};
4、div变宽
my$("btn").οnclick=function(){
var width=200;
var timeId=setInterval(function(){
width+=10;
my$("dv").style.width=width+"px";
},200);
};
5、移动元素
my$("btn1").οnclick=function(){
animate(my$("dv"),400);
};
my$("btn2").οnclick=function(){
animate(my$("dv"),800);
};
function animate(element,target){ //动画函数--任意一个元素移动到指定目标位置
clearInterval(element.timeId);//先清理定时器
element.timeId=setInterval(function(){
var current=element.offsetLeft;//div当前位置
var step=10;//每次移动的像素
step=current current+=step;//每次移动后的距离 if(Math.abs(target-current)>Math.abs(step)){ element.style.left=current+"px"; }else{ clearInterval(element.timeId); element.style.left=target+"px"; } },20); } 6、轮播图
var box=my$("box");
var inner=box.cjildren[0];
var imgWidth=inner.offsetWidth;
var ulObj=inner.children[0];
var spanObjs=inner.children[1].children;
for(var i=0;i spanObjs[i].setAttribute("index,i");//循环时候把索引保存在每个span自定义属性中 spanObjs[i].οnmοuseοver=function(){ for(var j=0;j spanObjs[j].removeAttribute("class"); }//去掉所有span背景颜色 this.className="current";//设置当前span背景颜色 var index=this.getAttribute("index"); animate(ulObj,-insex*imgWidth); }; } function animate(element,target){ //动画函数--任意一个元素移动到指定目标位置 clearInterval(element.timeId);//先清理定时器 element.timeId=setInterval(function(){ var current=element.offsetLeft;//div当前位置 var step=10;//每次移动的像素 step=current current+=step;//每次移动后的距离 if(Math.abs(target-current)>Math.abs(step)){ element.style.left=current+"px"; }else{ clearInterval(element.timeId); element.style.left=target+"px"; } },20); } 7、左右焦点轮播图 < > var box=my$("box"); var ad=box.children[0]; var imgWidth=ad.offsetWidth; var ulObj=ad.children[0]; var forcusD=my$("forcusD"); box.οnmοuseοver=function(){ forcusD.style.display="block"; }; box.οnmοuseοut=function(){ forcusD.style.display="none"; }; var index=0; my$("left").οnclick=function(){ if(index>0){ index--; animate(ulObj,-index*imgWidth); } }; my$("right").οnclick=function(){ if(index index++; animate(ulObj,-index*imgWidth); } }; function animate(element,target){ //动画函数--任意一个元素移动到指定目标位置 clearInterval(element.timeId);//先清理定时器 element.timeId=setInterval(function(){ var current=element.offsetLeft;//div当前位置 var step=10;//每次移动的像素 step=current current+=step;//每次移动后的距离 if(Math.abs(target-current)>Math.abs(step)){ element.style.left=current+"px"; }else{ clearInterval(element.timeId); element.style.left=target+"px"; } },20); } 8、无缝轮播图 var current=0; function f1(){ var ulObj=my$("screen").children[0]; current-=10; if(current<-1200){ ulObj.style.left=0+"px"; }else{ ulObj.style.left=current+"px"; current=0; } } var timeIdsetInterval(f1,20); my$("screen").οnmοuseοver=function(){ clearInterval(timeId); }; my$("screen").οnmοuseοut=function(){ timeId=setInterval(f1,20); }; 9、完整轮播图 < > var box=my$("box"); var screen=box.children[0]; var imgWidth=sccreen.offsetWidth; var ulObj=screen.children[0]; var list=ulObj.children; var olObj=screen.children[1]; var arr=my$("arr"); var pic=0; for(var i=0;i var liObj=document.creatElement("li");olObj.appendChild(liObj); liObj.innerHTML=(i+1); liObj.setAttribute("index",i);//ol中li添加自定义属性,存储索引值 liObj.οnmοuseοver=function(){ for(var j=0;j olObj.children[j].removeAttribute("class"); }//去掉li背景颜色 this.className="current";//设置当前颜色 pic=this.getAttribute("index"); animate(ulObj,-pic*imgWidth); }; }//创建小按钮--根据ul中li个数 olObj.children[0].className="current";//第一个按钮有颜色 ulObj.appendChild(ulObj.children[0].cloneNode(true));//克隆ul中第一个li加到ul最后 var timeId=setInterval(clickHandle,1000);//自动播放 box.οnmοuseοver=function(){ arr.style.display="block";//鼠标进入去掉之前定时器 clearInterval(timeId); }; box.οnmοuseοut=function(){ arr.style.display="none"; timeId=setInterval(clickHandle,1000);//鼠标离开自动播放 }; my$("right").οnclick=clickHandle; function clickHandle(){//右边按钮 if(pic==list.length-1){ pic=0; ulObj.style.left=0+"px"; } pic++; animate(ulObj,-pic*imgWidth);//如果pic==5,此时显示第六张图片,第一个按钮有颜色 if(pic==list.length-1){ olObj.children[olObj.children.length-1].className="";//第五个颜色 olObj.children[0].className="current";//第一个个颜色 }else{ for(var i=0;i olObj.children[i].removeAttribute("class");//去掉所有小按钮背景颜色 } olObj.children[pic].className="current"; } }; my$("left").οnclick=function(){//左边按钮 if(pic==0){ pic=5; ulObj.style.left=-pic*imgWidth+"px"; } pic--; animate(ulObj,-pic*imgWidth); for(var i=0li olObj.children[i].removeAttribute("class"); } olObj.children[pic].className="current"; };//小按钮颜色 function animate(element,target){ //动画函数--任意一个元素移动到指定目标位置 clearInterval(element.timeId);//先清理定时器 element.timeId=setInterval(function(){ var current=element.offsetLeft;//div当前位置 var step=10;//每次移动的像素 step=current current+=step;//每次移动后的距离 if(Math.abs(target-current)>Math.abs(step)){ element.style.left=current+"px"; }else{ clearInterval(element.timeId); element.style.left=target+"px"; } },10); } 10、 没有脱标:offsetLeft(父级元素margin+padding+border,自己的margin) 宽:offsetWidth元素的宽有边框 高:offsetHeight元素的高有边框 左:offsetLeft元素距离左边的距离 上:offsetTop元素距离上边的距离 脱离文档流(position):offsetLeft(自己的left和margin) 11、document document.body 获取的是元素--标签 document.title 标签中得值 document.documentElement 获取html 12、图片跟着鼠标走 var evt={ getEvent:function(evt){ //事件对象e兼容 return window.event||evt; }, getClentX:function(evt){ //可视区域横坐标兼容代码 return this.getEvent(evt).clientX; }, getClientY:function(evt){ //可视区域纵坐标兼容代码 return this.getEvent(evt).clientY; }, getScrollLeft:function(){ //页面向左卷曲出去横坐标 return window.pageXoffset||document.body.scrollLeft||doxument.documentElement.scrollLeft||0; }, getScrollTop:function(){ //页面向上卷曲出去纵坐标 return window.pageYoffset||document.body.scrollTop||doxument.documentElement.scrollTop||0; }, getPageX:function(evt){ //相对于页面的横坐标 return this.getEvent(evt).pageX?this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft(); }, getPageY:function(evt){ //相对于页面的纵坐标 return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop(); }; document.οnmοusemοve=function(e){ //文档的鼠标移动事件 my$("im").style.left=evt.getPageX(e)+"px"; my$("im").style.top=evt.getPageY(e)+"px"; };
//按钮