javascript--21--定时器
定时器
setTimeout循环一次
setTimeout(boom,1000)
function boom() {
console.log("boom");
}在一秒之后执行函数 只执行一次 只能用毫秒 一小时1000*60*60
setInterval循环多次
setInterval(boom,1000)
function boom() {
console.log("boom");
}循环多次
setInterval(a,3000)
var a =function boom() {
console.log("boom");
}括号第一个值为变量
setInterval("alert(123)",3000);第一个值为字符串 但是只有点击确定等三秒后才出现123 alert会阻碍后面的事件
setInterval(function () {
console.log("那你好");
},3000);第一个值为回调函数 也可以执行
setInterval((function () {
console.log("111");
return go;
})(),3000);
function go() {
console.log("你好");
}会立即出现111 等三秒出现你好 再等三秒会出现 你好
function test(callback) {
var a =1;
var b=a+1;
var c=b;
callback(a,b,c);//传进来是个函数，所以能加括号执行
}
test(function (a,b,c) {
console.log(a,b,c)
})结果是122 这是一个回调函数
console.log("1");
setTimeout(function () {
console.log("2")
},0);
console.log("3");结果是132 解析顺序从上到下 但是到定时器时并不会立即执行
- console.log（1）
- settimeout
- console.log(3)
- 执行定时器
console.time();
setTimeout(function () {
console.timeEnd();
},0);时间并不是0
var time =setTimeout(function () {
console.log("1");
},1000);
var time2 = setInterval(function () {
console.log("2");
},1000);
console.log(time2);最开始出现的时2 1 然后重复出出现2 定时器有自己的队列 从1 开始 time2定时器的返回值是他的队列值 mark
取消定时器 clearTimeout(time2)/clearInterval(time2)
var timer =setTimeout(function () {
console.log("1");
},1000);
var time2 = setInterval(function () {
console.log("2");
},1000);
clearTimeout(time2);结果只会出现1
var time =setTimeout(function () {
console.log("1");
},1000);
time = setInterval(function () {
console.log("2");
},1000);
clearInterval(time);结果为1 因为后面覆盖了 所以关闭后面的定时器
var timer =setTimeout(function () {
console.log("1");
},1000)
timer = setInterval(function () {
console.log("2");
},1000);
clearInterval(1);结果打印的是2 因为定时器有自己的队列 从一开始
console.log(setTimeout(function () {
console.log("3");
},1000));
var time2 =setInterval(function () {//执行一个定时器 并将返回值赋值给timer2这个变量
console.log("2");
},1000);
clearInterval(time2);结果是 1 过一秒出现3
动画的原理
- 递归函数就是在函数体内调用本函数。
- 动画两种方法
#box{
width: 143px;
height: 278px;
margin: 100px auto;
border: 1px solid red;
background:url("images/1.jpg") no-repeat 0 0 ;
}
style>
head>
<body>
<div id="box">div>
body>
<script>
var oBox = document.getElementById("box");
var i=0;
// setInterval(function () {
// oBox.style.backgroundPosition = i*143+"px 0";
// i--;
// i %=9;//执行9次返回0
// },2000/9)
(function run() {
oBox.style.backgroundPosition = i*143+"px 0";
i--;
i %=9;//执行9次返回0
setTimeout(run,1000/9);
})();
script>如果想执行10次就停止
(function run() {
oBox.style.backgroundPosition = i*143+"px 0";
i--;
i %=9;//执行9次返回0
j++;
if (j<10){
var a =setTimeout(run,1000/9);//这样就只能执行10次
}
})();(function run() {
oBox.style.backgroundPosition = i*143+"px 0";
i--;
i %=9;//执行9次返回0
j++;
var a=setTimeout(run,1000/9);
if (j>=10){
clearInterval(a);
}
})();数学函数和圆周运动
abs绝对值
console.log(Math.abs(-12))结果为12
console.log(Math.random());打印会发现是个大于0 的小数 刷新后 数字会变化Math.random()返回一个[0,1) 能取到0，永远取不到1 一个16位小数的伪随机数 Math.random()括号里面不接受传参 如果要取5-10console.log(Math.random()*5+5);- Math.floor() 向下取整 舍去小数 取整数
console.log(Math.floor(5.11));结果是5 Math.ceil向上取整 不管小数有多小 向上取整console.log(Math.ceil(5.00011));结果是6Math.trunc()舍去小数 当都是正数时 和floor效果一样 但是当是负数时候console.log(Math.floor(-5.00011));结果是-6console.log(Math.trunc(-5.00011));结果是-5Math.round()四舍五入Math.cos()Math.sin()Math.tan()Math.abs()绝对值Math.max()取最大值Math.min()Math.pow()x的y次幂console.log(Math.pow(2,3))结果是8Math.cbrt()立方根Math.pI()Math.sqrt()平方根- 弧度 1°为π/180弧度
π/180 topleft是关键字
是实现页面自动跳转
window.location.href