1、一次性定时器
<input type="button" id="btn"/>
<script>
window.οnlοad=function(){
var timeId=window.setTimeout(
function(){
alert("您好");
},1000);
document.getElementById("btn").οnclick=function(){
clearTimeout(timeId);
};
};
</script>
2、协议按钮禁用
<textarea name="" is="">
协议内容
</textarea>
<input type="button" value="" id="btn" disabled="disabled"/>
<script src="common.js"></script>
<script>
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渐变
<div id="dv"></div>
<input type="button" value="" id="btn"/>
<script src="common.js"></script>
<script>
my$("btn").οnclick=function(){
var opacity=10;//透明化
var timeId=setInterval(function(){
opacity--;
if(opacity<=0){
clearInterval(timeId);
}
my$("dv").style.opacity=opacity/10;
},200);
};
</script>
4、div变宽
<div id="dv"></div>
<input type="button" value="" id="btn"/>
<script src="common.js"></script>
<script>
my$("btn").οnclick=function(){
var width=200;
var timeId=setInterval(function(){
width+=10;
my$("dv").style.width=width+"px";
},200);
};
</script>
5、移动元素
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
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<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="box" id="box">
<div class="inner">//相框
<ul>
<li><a href="#"><img src=""/></a></li>
<li><a href="#"><img src=""/></a></li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
</div>
</div>
</div>
<script src="common.js"></script>
<script>
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].οnmοuseοver=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、左右焦点轮播图
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><a href="#"><img src=""/></a></li>
</ul>
</div>
<div id="docusD">
<span id="left"><</span>
<span id="right">></span>
</div>
<script src="common.js"></script>
<script>
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<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、无缝轮播图
<div class="box" id="screen">
<ul>
<li><img src=""/></li>
</ul>
</div>
<script src="common.js"></script>
<script>
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);
};
</script>
9、完整轮播图
<div id="box" class="all">
<div id="screen">//相框
<ul>
<li><img src=""/></li>
<li><img src=""/></li>
</ul>
<ol></ol>//按钮
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
<script src="common.js"></script>
<script>
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.οnmοuseοver=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.ο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.length;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.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、图片跟着鼠标走
<img src="" id="im"/>
<script src="common.js"></script>
<script>
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";
};
</script>