定時器
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