|
文章目录
1.定时事件2.图片定时切换3.元素移动4.延时调用5.完整代码
1.定时事件
javaScript 一个设定的时间间隔之后来执行代码我们称之为计时事件。
setInterval 
定时器1
window.onload = function(){
var myDiv = document.getElementById("myDiv");
var number = 0;
setInterval(function(){
myDiv.innerHTML = number++;
}, 1000)
}
 但是我们的定时器有可能不会一直执行，我们要想关闭它，可以借助clearInterval清除。
window.onload = function(){
var myDiv = document.getElementById("myDiv");
var number = 0;
var timer = setInterval(function(){
myDiv.innerHTML = number++;
if(number === 5) {
clearInterval(timer);
}
}, 1000)
}
2.图片定时切换
demo2
#container {
width: 300px;
margin: 50px auto;
padding: 10px;
background-color: green;
}
div img {
width: 300px;
height: 200px;
}
window.onload = function(){
var img = document.getElementsByTagName("img")[0];
var imgArr = ["image/img32.jpg", "image/img33.jpg", "image/img34.jpg", "image/img35.jpg"];
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var index = 0;
var timer;
start.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
index++;
img.src = imgArr[index % (imgArr.length)];
},1000)
}
stop.onclick = function(){
clearInterval(timer);
}
}
开始
停止
 我们注意到我们在start.onclick = function(){} 中设置了clearInterval(timer);，这是为了防止一个用户多次点击开始按钮，导致启动多个定时器，造成图片变化地越来越快。
3.元素移动
div移动
#box {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
window.onload = function(){
var box = document.getElementById("box");
var dir = 39;
var speed = 10;
setInterval(function(){
switch(dir) {
case 37:
box.style.left = box.offsetLeft - speed + "px";
break;
case 38:
box.style.top = box.offsetTop - speed + "px";
break;
case 39:
box.style.left = box.offsetLeft + speed + "px";
break;
case 40:
box.style.top = box.offsetTop +speed + "px";
break;
}
}, 400);
document.onkeydown = function(event){
event = event || window.event;
if(event.ctrlKey) {
speed = 50;
} else if(event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40) {
dir = event.keyCode;
} else {
speed = 10;
}
}
}
 说明：
Ctrl: 加速 除了方向键外的其他键：减速
4.延时调用
setTimeout( ) 
5.完整代码
轮播图
/*
* 清楚默认样式
*/
* {
margin: 0;
padding: 0;
}
#outer {
/*设置宽高*/
width: 520px;
height: 333px;
/*居中*/
margin: 50px auto;
/*设置背景颜色*/
background-color: green;
/*设置padding*/
padding: 10px 0;
position: relative;
overflow: hidden;
}
#imgList {
list-style: none;
position: absolute;
left: 0;
}
#imgList li {
float: left;
margin: 0 10px;
}
#imgList li img {
width: 500px;
height: 333px;
}
#navDiv {
position: absolute;
bottom: 15px;
left: 197px;
}
#navDiv a {
/*设置超链接浮动*/
float: left;
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.5;
}
#navDiv a:hover {
background-color: black;
}
window.onload = function() {
//获取imgList
var imgList = document.getElementById("imgList");
//获取img
var imgArr = document.getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width = 520 * imgArr.length + "px";
//设置导航栏居中
//获取导航栏navDiv
var navDiv = document.getElementById("navDiv");
//获取outer
var outer = document.getElementById("outer");
//设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
//设置超链接特效
var allA = document.getElementsByTagName("a");
var index = 0;
allA[index].style.backgroundColor = "black";
for(var i = 0; i = imgArr.length - 1) {
index = 0;
imgList.style.left = 0;
}
for(var i = 0; i target){
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function(){
//获取box1的原来的left
var oldValue = parseInt(getStyle(obj,attr));
//在旧的基础上增加
var newValue = oldValue + speed;
//向左移动时，需要考虑newValue是否小于target
//向右移动时，需要考虑newValue是否大于target
if((speed target)){
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if(newValue === target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
callback && callback();
}
}, 30);
}
/**
*
* @param obj 要获取的样式的元素
* @param name 要获取的样式名
* @returns {string|*}
*/
function getStyle(obj, name){
if(window.getComputedStyle){
return getComputedStyle(obj, null)[name];
}else{
return obj.currentStyle[name];
}
}
 
作者：Beyong 出处：Beyong博客 github地址：https://github.com/beyong2019
本博客中未标明转载的文章归作者Beyong有，欢迎转载，但未经作者同意必须保留此段声明，且在文章明显位置给出原文连接，否则保留追究法律责任的权利。
|