webapi day5

1、一次性定时器

window.onload=function(){

var timeId=window.setTimeout(

function(){

alert("您好");

},1000);

document.getElementById("btn").onclick=function(){

clearTimeout(timeId);

};

</script>

2、协议按钮禁用

协议内容

</textarea>

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);

</script>

3、div渐变

my$("btn").onclick=function(){

var opacity=10;//透明化

var timeId=setInterval(function(){

opacity--;

if(opacity<=0){

clearInterval(timeId);

}

my$("dv").style.opacity=opacity/10;

},200);

};

</script>

4、div变宽

my$("btn").onclick=function(){

var width=200;

var timeId=setInterval(function(){

width+=10;

my$("dv").style.width=width+"px";

},200);

};

</script>

5、移动元素

my$("btn1").onclick=function(){

animate(my$("dv"),400);

};

my$("btn2").onclick=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<target?step:-step;//向左或向右

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);

}

</script>

6、轮播图

<div class="inner">//相框

<ul>

</ul>

</div>

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.length;1++){

spanObjs[i].setAttribute("index,i");//循环时候把索引保存在每个span自定义属性中

spanObjs[i].onmouseover=function(){

for(var j=0;j<spanObjs.length;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<target?step:-step;//向左或向右

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);

}

</script>

7、左右焦点轮播图

</ul>

</div>

</div>

var box=my$("box");

var ad=box.children[0];

var imgWidth=ad.offsetWidth;

var ulObj=ad.children[0];

var forcusD=my$("forcusD");

box.onmouseover=function(){

forcusD.style.display="block";

};

box.onmouseout=function(){

forcusD.style.display="none";

};

var index=0;

my$("left").onclick=function(){

if(index>0){

index--;

animate(ulObj,-index*imgWidth);

}

};

my$("right").onclick=function(){

if(index<ulObj.children.length-1){

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<target?step:-step;//向左或向右

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);

}

</script>

8、无缝轮播图

<ul>

</ul>

</div>

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").onmouseover=function(){

clearInterval(timeId);

};

my$("screen").onmouseout=function(){

timeId=setInterval(f1,20);

};

</script>

9、完整轮播图

<div id="screen">//相框

<ul>

</ul>

<ol></ol>//按钮

</div>

</div>

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<list.length;i++){

var liObj=document.creatElement("li");olObj.appendChild(liObj);

liObj.innerHTML=(i+1);

liObj.setAttribute("index",i);//ol中li添加自定义属性，存储索引值

liObj.onmouseover=function(){

for(var j=0;j<olObj.children.length;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.onmouseover=function(){

arr.style.display="block";//鼠标进入去掉之前定时器

clearInterval(timeId);

};

box.onmouseout=function(){

arr.style.display="none";

timeId=setInterval(clickHandle,1000);//鼠标离开自动播放

};

my$("right").onclick=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.length;i++){

olObj.children[i].removeAttribute("class");//去掉所有小按钮背景颜色

}

olObj.children[pic].className="current";

}

};

my$("left").onclick=function(){//左边按钮

if(pic==0){

pic=5;

ulObj.style.left=-pic*imgWidth+"px";

}

pic--;

animate(ulObj,-pic*imgWidth);

for(var i=0li<olObj.length;i++){

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<target?step:-step;//向左或向右

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);

}

</script>

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.onmousemove=function(e){ //文档的鼠标移动事件

my$("im").style.left=evt.getPageX(e)+"px";

my$("im").style.top=evt.getPageY(e)+"px";

};

</script>

猜你喜欢