另一个定时器-------一次性的定时
window.onload=function () {
//一次性的定时器
var timeId=window.setTimeout(function () {
alert("您好");
},1000);
//点击这个按钮,停止这个一次性的定时器
document.getElementById("btn").onclick=function () {
clearTimeout(timeId);
};
};
案例:定时器阅读协议
<textarea name="texta" id="" cols="30" rows="10">
这个世界就是这么疯狂,你不同意,我就让你注册,秦始皇,打钱
</textarea>
<input type="button" value="请仔细阅读协议(5)" 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>
案例:透明度渐变
<div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script src="common.js"></script>
<script>
my$("btn").onclick=function () {
var opacity=10;
//按钮的点击事件
var timeId=setInterval(function () {
//透明化了
opacity--;
if(opacity<=0){
clearInterval(timeId);//清理定时器
}
//设置div的透明度
my$("dv").style.opacity=opacity/10;
},200);
案例:修改宽度实现loading的效果
<input type="button" value="变宽" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
var width = 200;
var timeId = setInterval(function () {
width+=10;
if(width==800){
clearInterval(timeId);
}
my$("dv").style.width=width+"px";
}, 20);
};
</script>
案例:移动div
//div要移动,要脱离文档流---position:absolute
//如果样式的代码是在style的标签中设置,外面是获取不到
//如果样式的代码是在style的属性设置,外面是可以获取
//获取div的当前位置
//console.log(my$("dv").offsetLeft);
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//点击第一个按钮移动到400px
my$("btn1").onclick = function () {
//一会要清理定时器(只产生一个定时器)
var timeId= setInterval(function () {
//获取div的当前的位置
var current = my$("dv").offsetLeft;//数字类型,没有px
//div每次移动多少像素---步数
var step = 9;
//每次移动后的距离
current += step;
//判断当前移动后的位置是否到达目标位置
if(current<=400){
my$("dv").style.left=current+"px";
}else{
//清理定时器
clearInterval(timeId);
}
}, 20);
};
上个案例移动方法的封装第二版
my$("btn1").onclick = function () {
animate(my$("dv"), 400);
};
//点击第二个按钮移动到800px
my$("btn2").onclick = function () {
animate(my$("dv"), 800);
};
//动画函数---任意一个元素移动到指定的目标位置
function animate(element, target) {
//先清理定时器
clearInterval(element.timeId);
//一会要清理定时器(只产生一个定时器)
element.timeId = setInterval(function () {
//获取div的当前的位置
var current = element.offsetLeft;//数字类型,没有px
//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);
上个案例移动方法的封装第三版
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 20);
}
获取元素的位置信息
*在style标签中设置的样式属性获取不到
*style属性中设置的样式属性是可以获取到的
*获取元素的样式,无法获取。
* offsetWidth:获取元素的宽
* offsetHeight:获取元素的高
* offsetLeft:获取元素距离左边位置的值
* offsetTop:获取元素距离上面位置的值
//没有脱离文档流:
*
* offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin
* 脱离文档流了
*position: absolute;
* 主要是自己的left和自己的margin
my$("btn").onclick=function () {
console.log(my$("dv1").style.width);
console.log(my$("dv1").style.height);
//以后获取元素的宽和高,应该使用offset系列来获取
console.log(my$("dv1").offsetWidth);
console.log(my$("dv1").offsetHeight);
console.log(my$("dv1").offsetLeft);
console.log(my$("dv1").offsetTop);
};
通过document直接获取元素
//获取body
console.log(document.body);//获取的是元素--标签
//获取title
console.log(document.title);//标签中的值
document.title="嘎嘎去";
//获取html
console.log(document.documentElement);
案例:图片跟着鼠标飞
<img src="images/tianshi.gif" alt="" id="im">
<script src="common.js"></script>
<script>
//鼠标在页面中移动,图片跟着鼠标移动
document.onmousemove=function (e) {
//鼠标的移动的横纵坐标
//可视区域的横坐标
//可视区域的纵坐标
my$("im").style.left=e.clientX+"px";
my$("im").style.top=e.clientY+"px";
案例:动态轮播图三部曲,不难是不难但是css看的好麻烦啊
*第一步:实现点击图片下的按钮,图片更换
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
img {
vertical-align: top
}
.box {
width: 730px;
height: 454px;
margin: 100px auto;
padding: 5px;
border: 1px solid #ccc;
}
.inner {
width: 730px;
height: 454px;
background-color: pink;
overflow: hidden;
position: relative;
}
.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner li {
float: left;
}
.square {
position: absolute;
right: 10px;
bottom: 10px;
}
.square span {
display: inline-block;
width: 16px;
height: 16px;
background-color: #fff;
text-align: center;
line-height: 16px;
cursor: pointer;
}
.square span.current {
background-color: orangered;
color: #fff;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner"><!--相框-->
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</div>
<script src="common.js"></script>
<script>
//获取最外面的div
var box=my$("box");
//获取相框
var inner=box.children[0];
//获取相框的宽度
var imgWidth=inner.offsetWidth;
//获取ul
var ulObj=inner.children[0];
//获取所有的span标签
var spanObjs=inner.children[1].children;
//循环遍历所有的span标签,注册鼠标进入的事件
for(var i=0;i<spanObjs.length;i++){
//循环的时候把索引值保存在每个span的自定义属性中
spanObjs[i].setAttribute("index",i);
//注册鼠标进入事件
spanObjs[i].onmouseover=function () {
//先干掉所有的span的背景颜色
for(var j=0;j<spanObjs.length;j++){
//移除了每个span的类样式
spanObjs[j].removeAttribute("class");
}
//设置当前的span的背景颜色
this.className="current";
//移动ul(每个图片的宽*鼠标放在这个按钮的索引值)
//获取当前鼠标进入的span的索引
var index=this.getAttribute("index");
animate(ulObj,-index*imgWidth);
};
}
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 20);
*点击左右焦点更换图片
<style>
body, ul, ol, li, img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 520px;
height: 280px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
}
.ad {
width: 520px;
height: 280px;
overflow: hidden;
position: relative;
}
#box img {
width: 520px;
}
.ad ol {
position: absolute;
right: 10px;
bottom: 10px;
}
.ad ol li {
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
_display: inline;
}
.ad ol li.current {
background: yellow;
}
.ad ul li {
float: left;
}
.ad ul {
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current {
display: block;
}
#focusD {
display: none;
}
#focusD span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#focusD #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
<li><img src="images/04.jpg"/></li>
<li><img src="images/05.jpg"/></li>
</ul>
</div><!--相框-->
<div id="focusD"><span id="left"><</span><span id="right">></span>
</div>
</div>
<script src="common.js"></script>
<script>
//获取最外面的div
var box = my$("box");
//获取相框
var ad = box.children[0];
//获取相框的宽度
var imgWidth = ad.offsetWidth;
//获取ul
var ulObj = ad.children[0];
//获取左右焦点的div
var focusD = my$("focusD");
//显示和隐藏左右焦点的div----为box注册事件
box.onmouseover = function () {
focusD.style.display = "block";
};
box.onmouseout = function () {
focusD.style.display = "none";
};
//点击右边按钮
var index=0;
my$("right").onclick = function () {
if(index<ulObj.children.length-1){
index++;
animate(ulObj,-index*imgWidth);
}
};
//点击左边按钮
my$("left").onclick = function () {
if(index>0){
index--;
animate(ulObj,-index*imgWidth);
}
};
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 20);
}
*自动轮播实现
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
vertical-align: top;
}
/*取消图片底部3像素距离*/
.box {
width: 300px;
height: 200px;
margin: 100px auto;
background-color: pink;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.box ul li {
float: left;
}
.box ul {
width: 1500px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" id="screen">
<ul>
<li><img src="imagess/01.jpg" alt=""/></li>
<li><img src="imagess/02.jpg" alt=""/></li>
<li><img src="imagess/03.jpg" alt=""/></li>
<li><img src="imagess/04.jpg" alt=""/></li>
<li><img src="imagess/01.jpg" alt=""/></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";
current = 0;
} else {
ulObj.style.left = current + "px";
}
}
var timeId=setInterval(f1, 20);
my$("screen").onmouseover=function () {
//停止
clearInterval(timeId);
};
my$("screen").onmouseout=function () {
//继续
timeId=setInterval(f1, 20);
};
最后揉到一块就是一个完整的前台动态轮播图了。