定时器的认识
- 定时器：就是可以不断地自动的重复某一个操作的东西。
- 定时的分类：
- 1.多次定时器：setInterval（）
- 2.一次定时器：setTimeout（）
- 第一个参数：表示执行的操作，一般就是事件指令
- 第二个参数表示间隔的时间，但是注意这个时间是毫秒 1s = 1000ms；
- 定时器的特点：
对于一般的变量以及函数当使用完成后，系统会自动回收对应的内存，但是定时器当使用完成后系统不会自动回收对应的内存，所以我们需要手动回收。
- 清空定时器：clearTimeout（）
因为清空定时器的时候，我们不知道是哪一个，但是一个页面中可能有多个定时器，所以我们一般在设置定时器的时候，给定时器制定名称,清空的时候直接清空对应名称的定时器就可以。
定时器的匀速动画
- 动画原理：就是让实现动画的标签距离某个方向的位置不断地变化，可以通过多次定时器实现不断地变化
window.onload = function () {
1.1获取标签
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var timer = null;
// var begin = 0;//用来记录距离左边的间距
// var target = 800;//用来记录动画的目标值
2.点击按钮
btn.onclick = function () {
2.3调用下面抽取的匀速动画
constant(0,40,800);
}
抽取匀速动画
function constant(begin,speed,target) {
定时器会叠加，如果我们上次没有清空，当点击按钮的时候，会再次创建一个新的定时器和原来的定时器叠加所以会越来越快，所以我们需要在点击的时候，清空上一次定时器
clearInterval(timer);
2.1实现动画,使用定时器
timer = setInterval(function () {
begin += speed;
2.11判断终止值
if(begin >= target){
clearInterval(timer);
begin = target;
}
2.2设置距离左边的间距
box.style.left = begin + 'px';
},10)
}
}
定时器的减速动画
window.onload = function () {
1.获取标签
var box = document.getElementById('box');
var btn = document.getElementById('btn');
var timer = null;
var begin = 0;//用来记录距离左边的间距
var target = 800;//用来记录动画的目标值
2.点击按钮
btn.onclick = function () {
2.1清空定时器
clearInterval(timer);
timer = setInterval(function () {
//ceil：向上取整，如果是1.1，取出来的是2
//计算出速度
var speed = Math.ceil((target - begin)*0.2);
//我们的速度需要向上取整
begin += speed;
if (begin >= target){
clearInterval(timer);
begin = target;
}
2.2设置距离
box.style.left = begin + 'px';
},100)
}
}
一次定时器执行多次操作
window.onload = function () {
// 就是使用一次定时器执行多次操作
var timer = null;
var count = 5;//用来记录秒数
var box = document.getElementById('box')
timer = setTimeout(jumpPage,1000);
//用来执行定时器的操作的函数
function jumpPage() {
clearInterval(timer);
box.innerHTML = '要在'+count+'秒后跳转'
count --;
if(count >= 0){
timer = setInterval(arguments.callee,1000);
//函数中调用函数自己，叫做递归函数
//arguments.callee:相当自己本身。
}else {//小于0,跳转,清空最后一次定时器
window.location.href = 'http://baidu.com';
clearInterval(timer);
}
}
}
随机数
- Math.random():可以随机生成一个大于等于0但是需要小于1的数字，不能等于1
使用Js设置值
- 获取box的样式
- 如果直接设置我们获取的是行内样式的值,但是有时候我们需要获取在页内设置的值。
- 在不同的浏览器使用不同的方法获取：
- 如果是ie或者opera：
function getCssAttr(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj,null)[attr];
}
}
如果当我们使用.语法访问不到值,我们可以采用[]来访问.
alert(getCssAttr(box,'width'));
}
简单的无限轮播
window.onload = function () {
//1.获取标签
var oul = document.getElementById('oul');
//2.设置距离左边的间距不断变化，需要时定时器
var timer = null;
var begin = 0;//设置距离左边的间距
timer = setInterval(setLeft,20);
function setLeft() {
begin -= 4;
if(begin <= -1200){
begin = 0;
}
oul.style.left = begin + 'px';
}
}
