-
簡單運動
-
簡單運動：是一種視覺暫留效果，只要元素變化程序時間夠短，給人眼造成的效果就是一個運動的效果，人眼的視覺殘留的時間0.1~0.4 s
-
可以通過定時器，實作每隔一個極短時間（50~100毫秒左右），執行函式，函式內部讓運動的屬性值發生變化
-
定時器常見問題1
- 將定時器的開始和停止程序寫在不同的事件函式內部，容易出現用戶錯誤點擊情況:
? 簡單運動代碼如下：
-
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 0;
background-color: lightcoral;
}
</style>
</head>
<body>
<input type="button" id="start" value="https://www.cnblogs.com/dreamtown/archive/2021/03/04/開始">
<input type="button" id="end" value="https://www.cnblogs.com/dreamtown/archive/2021/03/04/停止">
<div id="box"></div>
<script>
var start = document.getElementById("start");
var end = document.getElementById("end");
var box = document.getElementById("box");
//信號量 -- 全域變數存盤left的屬性值，每次都會發生變化實作移動
var boxleft = 0;//初始值必須與box的初始屬性值一樣
var boxInveral;
start.onclick = function(){
boxInveral = setInterval(function(){
boxleft += 10;
box.style.left = boxleft + "px";
},100);
};
//清除定時器
end.onclick = function(){
clearInterval(boxInveral);
}
</script>
</body>
</html>
- 定時器常見問題1
- 將定時器的開始和停止程序寫在不同的事件函式內部，容易出現用戶錯誤點擊情況:
- 多次點擊開始，會造成加速 ：(每一個定時器都是獨立的，每點擊一次，就相當于再＋10，造成加速)；
多次點擊開始，不能夠停止 ：(清除定時器，清除的是當前最新的定時器，而前面設定的全域變數存盤的定時器，在你每點擊一次開始按鈕，就會改變其指向，指向最新的定時器，所以清除定時器，只能清除當前最新的定時器，而前面的那些點擊生成的定時器沒有辦法參考到，也就沒有辦法再去清除了）； - 解決方法：設表先關，每次開啟新定時器之前，先清除一次前面的定時器,這樣就會永遠保留當前最新的定時器，
<script>
var start = document.getElementById("start");
var end = document.getElementById("end");
var box = document.getElementById("box");
//信號量 -- 全域變數存盤left的屬性值，每次都會發生變化實作移動
var boxleft = 0;//初始值必須與box的初始屬性值一樣
var boxInveral;
start.onclick = function(){
//定時器寫在事件函式內部，當事件多次被觸發，會導致定時器累積
//解決方法：設表先關
clearInterval(boxInveral);//關閉之前的定時器
boxInveral = setInterval(function(){
boxleft += 10;
box.style.left = boxleft + "px";
},100);
};
//清除定時器
end.onclick = function(){
clearInterval(boxInveral);
}
</script>
-
定時器常見問題2
-
要求讓元素走到指定位置停止，如果步長設定不合理，停止的位置可能就不是指定位置，
-
解決方法：拉鐘停表，在定時器內部每次都要判斷是否走到了終點，要不要停止定時器；
如果走到或超過了終點，強行拉到終點，并停止定時器
-
<script>
var start = document.getElementById("start");
var end = document.getElementById("end");
var box = document.getElementById("box");
//信號量 -- 全域變數存盤left的屬性值，每次都會發生變化實作移動
var boxleft = 0;//初始值必須與box的初始屬性值一樣
var boxInveral;
start.onclick = function(){
clearInterval(boxInveral);
boxInveral = setInterval(function(){
// boxleft += 10;
// boxleft += 20;
// boxleft += 30;//當前進設定的逐漸變大，最終停下來的位置也不是指定位置了
boxleft += 35;
//判斷這一次的運動是否走到了指定500px位置
if(boxleft >= 500){
// 解決上面問題方法就是 強行拉到指定位置，直接給變數賦值指定位置
box.style.left = 500 + "px";
// 清除定時器
clearInterval(boxInveral);
}
box.style.left = boxleft + "px";
},100);
};
//清除定時器
end.onclick = function(){
clearInterval(boxInveral);
}
</script>
-
定時器常見問題3
-
要求規定時間內讓元素走到規定的結束位置，時間間隔可以更改
-
解決方法：步標整除；
? 總距離 = 步長 * 次數；
? 時間間隔自定義，總時長固定；
? 求出總次數 = 總時間 / 時間間隔
? 定義計數器變數，每執行一次定時器函式加1，直到執行達到總次數，停止定時器
-
如：3秒，讓div從100px走到700px
<html> <head> <style> #box{ width: 100px; height: 100px; position: absolute; left: 100px; background-color: lightcoral; } </style> </head> <body> <input type="button" id="start" value="https://www.cnblogs.com/dreamtown/archive/2021/03/04/開始"> <input type="button" id="end" value="https://www.cnblogs.com/dreamtown/archive/2021/03/04/停止"> <div id="box"></div> <script> var start = document.getElementById("start"); var end = document.getElementById("end"); var box = document.getElementById("box"); //已知 開始位置、結束位置、總時長、時間間隔 // 總距離 = 步長 * 總次數 // 總距離可以由 開始位置 減 結束位置 得到；已知 // 總次數由 總時長 / 時間間隔 得到；已知 // 所以 步長 = （開始位置 減 結束位置）/（總時長 / 時間間隔）； //信號量 ,相當于初始值 var boxleft = 100;//初始值必須與box的初始屬性值一樣 var endleft = 700;//結束位置 var time = 1000;//總時長 var interval = 50;//時間間隔 var step = (endleft - boxleft)/(time / interval);//步長 var boxInveral; var count = 0;//定義一個次數的累加器 start.onclick = function(){ clearInterval(boxInveral); boxInveral = setInterval(function(){ //每次加步長 boxleft += step; //每運動一次，累加器加1 count ++; //判斷是否達到總次數 if(count >= (time / interval)){ //由于總距離與總時長可能求出的次數不是整數，這樣最后停下來的位置也肯可能不準 // 拉鐘停表 boxleft = endleft; clearInterval(boxInveral); } box.style.left = boxleft + "px"; },interval); }; //清除定時器 end.onclick = function(){ clearInterval(boxInveral); } </script> </body> </html>
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/266270.html
標籤：其他