從零開始學 Web 之 BOM（二）定時器
一、定時器
BOM 中有兩中方式設定定時器。
1、方式一
特點：定時器可以重複使用。
// 引數有兩個：
// 第一個引數：定時器定時結束處理函式
// 第二個引數：定時事件，單位毫秒。
// 返回值：定時器id值
var timeId = window.setInterval(function() {
// ...
}, 1000); // 定時1s
// 清除定時器
// 引數只有一個：定時器的 id 值。
window.clearInterval(timeId);1.1、案例：圖片搖起來
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: absolute; } </style> </head> <body> <input type="button" value="搖起來" id="btn1"> <input type="button" value="停止" id="btn2"> <div id="dv"> <img src="images/Daotin.png" alt=""> </div> <script src="common.js"></script> <script> var timeId = 0; my$("btn1").onclick = function () { timeId = setInterval(function () { //讓圖片動起來可以使div動起來 var x = parseInt(Math.random() * 100) + 1; // 1-100隨機數 var y = parseInt(Math.random() * 100) + 1; my$("dv").style.left = x + "px"; my$("dv").style.top = y + "px"; }, 100); }; my$("btn2").onclick = function () { clearInterval(timeId); }; </script> </body> </html>
點選”搖起來“按鈕，圖片每隔 100ms 動一次，點選停止按鈕，圖片停止移動。
遺留問題：
多次點選“搖起來”按鈕的時候，圖片動的越來越快，而且點選“停止”按鈕沒法停下來。
原因分析：
多次點選“搖起來”按鈕的時候，timeId 的值會有多個，而停止的時候，只會清理最後一個值，其他的值對應的定時器沒有清理。
解決方法：
在每次點選按鈕的時候，先進行一次定時器的清理動作。clearInterval(timeId);
2、方式二
特點：定時器是一次性的。
setTimeout(); // 引數與返回值同 setInterval();這個定時器只執行一次。雖然只執行一次，但是還是要清零，不然就一直佔記憶體。
clearTimeOut(); // 引數為 setTimeout() 定時器的 id。2.1、案例：協議禁用倒計時
<body> <input type="button" value="請認真閱讀協議(5)" id="btn" disabled> <script src="common.js"></script> <script> var time = 5; var timeId = setInterval(function () { time--; if (time >= 0) { my$("btn").value = "請認真閱讀協議(" + time + ")"; } else { clearInterval(timeId); my$("btn").value = "同意"; my$("btn").disabled = false; } }, 1000); </script> </body>
倒計時後才可以點選同意按鈕。
2.2、案例：移動元素
目標：有兩個按鈕，點選第一個按鈕，div 緩慢移動到 400px 位置，點選第二個按鈕緩慢移動到 800px 位置，再點選第一個按鈕緩慢移動到 400px 位置......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
input {
margin-top: 10px;
}
div {
position: absolute;
width: 200px;
height: 100px;
background-color: yellowgreen;
margin-top: 10px;
/*left: 20px;*/
}
</style>
</head>
<body>
<input type="button" value="移動400px" id="btn1">
<input type="button" value="移動800px" id="btn2">
<div id="dv"></div>
<script src="common.js"></script>
<script>
// 移動400px
my$("btn1").onclick = function () {
animation(my$("dv"), 400);
};
// 移動800px
my$("btn2").onclick = function () {
animation(my$("dv"), 800);
};
// 封裝動畫移動函式
function animation(element, target) {
// 判斷當前的位置
var current = element.offsetLeft; // 不能使用 element.style.left
var onestep = 7;
var timeId = setInterval(function () {
current += current < target ? onestep : -onestep;
if (Math.abs(current - target) >= onestep) {
element.style.left = current + "px";
} else {
clearInterval(timeId);
element.style.left = target + "px";
}
}, 20);
}
</script>
</body>
</html>1、既然要緩慢移動，就需要定時器。
2、當前位置的獲取不能使用 element.style.left; 而需要使用 element.offsetLeft; 因為所有寫在標籤中的 style 屬性值都拿不到，只有內聯的 style 屬性值可以使用 element.style.left 拿到。而 element.offsetLeft 則兩種方式都可以拿到。
3、需要每次移動的步數 onestep，而且有回退的需要，所以 onestep 可能是負數。
4、每次移動後判斷現在的位置到目標位置的距離，如果大於 onestep，那麼就移動 當前 current 加減 onestep 的位置，否則就移動到目標位置，這樣做的目的是避免 onestep 的不確定，導致最後的終點與目標還差少許的距離。
5、使用當前與目標距離的絕對值來決定是前進還是後退。
6、到達目標位置後，關閉定時器。
7、將動畫過程封裝成一個函式，引數為移動的目標和移動的距離。
8、注意：div 需要脫離文件流。
2.3、案例：輪播圖
2.3.1、簡單的輪播圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 400px;
height: 250px;
margin: 200px 0 0 400px;
position: relative;
border: 2px solid #31608a;
overflow: hidden;
}
ul {
width: 1300px;
position: absolute;
}
li {
list-style-type: none;
float: left;
}
img {
width: 400px;
height: 250px;
}
li a {
display: inline-block;
}
.sp {
position: absolute;
left: 50%;
margin-left: -45px;
bottom: 10px;
}
span {
float: left;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
text-align: center;
font: 400 16px/20px Consolas;
margin: 0 5px 0 5px;
cursor: pointer;
}
.current {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><a href="#"><img src="images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/img2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/img3.jpg" alt=""></a></li>
</ul>
<div class="sp">
<span class="current">1</span>
<span>2</span>
<span>3</span>
</div>
</div>
<script src="common.js"></script>
<script>
// 獲取box元素
var boxObj = my$("box");
// 獲取ul元素，因為移動的就是整個ul
var ulObj = boxObj.children[0];
// 移動寬度
var moveWidth = document.getElementsByTagName("img")[0].offsetWidth;
// 獲取所有span標籤
var spanObjs = boxObj.children[1].getElementsByTagName("span");
// console.log(spanObjs);
for (var i = 0; i < spanObjs.length; i++) {
// 獲取每個span的編號，設定自定義屬性
spanObjs[i].setAttribute("index", "" + i);
spanObjs[i].onmouseover = function () {
for (var j = 0; j < spanObjs.length; j++) {
// 清空span背景
spanObjs[j].removeAttribute("class");
}
// 設定當前span標籤
this.className = "current";
// 每個編號*移動的寬度就是移動到的目標位置
var index = this.getAttribute("index");
animation(ulObj, -index*moveWidth);
};
}
// 封裝動畫移動函式
function animation(element, target) {
// 判斷當前的位置
var current = element.offsetLeft;
var onestep = 7;
var timeId = setInterval(function () {
current += current < target ? onestep : -onestep;
if (Math.abs(current - target) >= onestep) {
element.style.left = current + "px";
} else {
clearInterval(timeId);
element.style.left = target + "px";
}
}, 10);
}
</script>
</body>
</html>1、移動的時候移動的是 ul，而不是單獨的 li 或者 img。
2、span 小標籤在滑鼠進入的時候，背景變成紅色。（排他事件：需要兩步，第一清理所有，第二當前元素設定屬性）
3、為每個 span 繫結事件時，程式開始，for 迴圈就執行完了，得不到每個span 標籤的編號，所以要自定義屬性儲存每個 span 標籤的編號。
4、直接呼叫封裝好的動畫移動函式來移動 ul 標籤。
2.3.2、左右焦點輪播圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 400px;
height: 250px;
margin: 200px 0 0 400px;
position: relative;
border: 2px solid #31608a;
overflow: hidden;
}
ul {
width: 1300px;
position: absolute;
}
li {
list-style-type: none;
float: left;
}
img {
width: 400px;
height: 250px;
}
.sp {
width: 400px;
height: 50px;
position: absolute;
top: 100px;
display: none;
}
#left {
width: 50px;
height: 50px;
float: left;
cursor:pointer;
text-align:center;
font: 400 28px/50px Consolas;
background-color: #fff;
opacity: 0.4; /* 透明度 */
}
#right {
float: right;
width: 50px;
height: 50px;
cursor:pointer;
text-align:center;
font: 400 28px/50px Consolas;
background-color: #fff;
opacity: 0.4;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><a href="#"><img src="images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/img2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/img3.jpg" alt=""></a></li>
</ul>
<div class="sp">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script src="common.js"></script>
<script>
// 獲取box元素
var boxObj = my$("box");
// 獲取ul元素，因為移動的就是整個ul
var ulObj = boxObj.children[0];
// 移動寬度
var moveWidth = document.getElementsByTagName("img")[0].offsetWidth;
// 獲取sp標籤
var spObj =boxObj.children[1];
// 獲取span左標籤
var leftObj = my$("left");
// 獲取span右標籤
var rightObj = my$("right");
var index = 0;
boxObj.onmouseover = function () {
spObj.style.display = "block";
};
boxObj.onmouseout = function () {
spObj.style.display = "none";
};
// 左移
leftObj.onclick = function () {
if(index) {
index--;
animation(ulObj, -index*moveWidth);
}
};
// 右移
rightObj.onclick = function () {
if(index<ulObj.children.length-1) {
index++;
animation(ulObj, -index*moveWidth);
}
};
// 封裝動畫移動函式
function animation(element, target) {
// 判斷當前的位置
var current = element.offsetLeft;
var onestep = 17;
var timeId = setInterval(function () {
current += current < target ? onestep : -onestep;
if (Math.abs(current - target) >= onestep) {
element.style.left = current + "px";
} else {
clearInterval(timeId);
element.style.left = target + "px";
}
}, 10);
}
</script>
</body>
</html>2.3.3、完整輪播圖
需求：滑鼠進入數字按鈕自動切換；滑鼠點選左右切換按鈕切換，並且數字按鈕跟著切換；自動輪播。
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="base.css">
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 400px;
height: 250px;
margin: 100px 0 0 400px;
position: relative;
border: 2px solid #31608a;
overflow: hidden;
}
ul {
width: 1300px;
position: absolute;
}
li {
list-style-type: none;
float: left;
}
img {
width: 400px;
height: 250px;
}
.sp {
position: absolute;
left: 50%;
margin-left: -45px;
bottom: 10px;
}
span {
float: left;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
text-align: center;
font: 400 16px/20px Consolas;
margin: 0 5px 0 5px;
cursor: pointer;
}
.spdiv {
width: 400px;
height: 50px;
position: absolute;
top: 100px;
display: none;
}
#left {
width: 50px;
height: 50px;
float: left;
cursor: pointer;
text-align: center;
font: 400 28px/50px Consolas;
color: #fff;
background-color: rgba(255, 255, 255, 0.3);
}
#right {
float: right;
width: 50px;
height: 50px;
cursor: pointer;
text-align: center;
font: 400 28px/50px Consolas;
color: #fff;
background-color: rgba(255, 255, 255, 0.3);
}
.current {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><a href="#"><img src="images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/img2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/img3.jpg" alt=""></a></li>
</ul>
<div class="sp">
<span class="current">1</span>
<span>2</span>
<span>3</span>
</div>
<div class="spdiv">
<s id="left"><</s>
<s id="right">></s>
</div>
</div>
<script src="common.js"></script>
<script>
// 獲取box元素
var boxObj = my$("box");
// 獲取ul元素，因為移動的就是整個ul
var ulObj = boxObj.children[0];
// 移動寬度
var moveWidth = document.getElementsByTagName("img")[0].offsetWidth;
// 獲取ul中所有的li
var liObjs = ulObj.children;
ulObj.appendChild(liObjs[0].cloneNode(true)); // 克隆第一個li，加入到ul中的最後
ulObj.style.width = ulObj.offsetWidth + moveWidth + "px"; // 重新設定ul的寬度
// 獲取所有span標籤
var spanObjs = boxObj.children[1].getElementsByTagName("span");
// console.log(spanObjs);
// 獲取spdiv標籤
var spdivObj = boxObj.children[2];
// 獲取span左標籤
var leftObj = my$("left");
// 獲取span右標籤
var rightObj = my$("right");
var pos = 0;
var myTimeId = setInterval(moveRight, 1000);
// 自動播放 + 滑鼠進入事件
boxObj.onmouseover = function () {
spdivObj.style.display = "block";
clearInterval(myTimeId);
};
boxObj.onmouseout = function () {
spdivObj.style.display = "none";
myTimeId = setInterval(moveRight, 1000);
};
// 左移
leftObj.onclick = function () {
if (pos === 0) {
pos = spanObjs.length;
ulObj.style.left = -spanObjs.length * moveWidth + "px";
}
pos--;
animation(ulObj, -pos * moveWidth);
for (var i = 0; i < spanObjs.length; i++) {
// 清空span背景
spanObjs[i].removeAttribute("class");
}
// 設定當前span標籤
spanObjs[pos].className = "current";
};
// 右移
rightObj.onclick = moveRight;
function moveRight() {
if (pos === spanObjs.length) { // 在到達克隆的一張的時候，立即跳到第一張
pos = 0;
ulObj.style.left = 0 + "px";
}
pos++;
animation(ulObj, -pos * moveWidth);
if (pos === spanObjs.length) {
spanObjs[0].className = "current";
spanObjs[spanObjs.length - 1].className = "";
} else {
for (var i = 0; i < spanObjs.length; i++) {
// 清空span背景
spanObjs[i].removeAttribute("class");
}
// 設定當前span標籤
spanObjs[pos].className = "current";
}
};
// 遍歷所有的 span 標籤
for (var i = 0; i < spanObjs.length; i++) {
// 獲取每個span的編號，設定自定義屬性
spanObjs[i].setAttribute("index", i + "");
spanObjs[i].onmouseover = function () {
for (var j = 0; j < spanObjs.length; j++) {
// 清空span背景
spanObjs[j].removeAttribute("class");
}
// 設定當前span標籤
this.className = "current";
// 每個編號*移動的寬度就是移動到的目標位置
pos = this.getAttribute("index");
if (pos) {
animation(ulObj, -pos * moveWidth);
} else {
}
};
}
// 封裝動畫移動函式
function animation(element, target) {
// 判斷當前的位置
var current = element.offsetLeft;
var onestep = 7;
var timeId = setInterval(function () {
current += current < target ? onestep : -onestep;
if (Math.abs(current - target) >= onestep) {
element.style.left = current + "px";
} else {
clearInterval(timeId);
element.style.left = target + "px";
}
}, 10);
}
</script>
</body>
</html>1、首先獲取所有需要的元素。
2、使用克隆第一個 li 標籤來模擬從最後一個圖片切換到第一個圖片的過程。注意：這時候 ul 的寬度要改變，保證 li 的浮動在一行顯示。
3、在右移最後一張過度到第二張的時候的處理方式為：當用戶看到第一張的時候其實是最後一張，這個時候怎麼過度到第二張？處理方法是，當在需要從最後一張跳轉到第二張的時候，先讓最後一張圖切換到第一張，因為是克隆的，所以最後一張和第一張沒有區別，使用者看到的第一張其實是最後一張切換到了第一張，這個時候正常切換到第二張即可。
4、當需要點選左右切換按鈕，需要數字按鈕相對應的時候，注意第一個數字按鈕和最後一個數字按鈕的特殊處理。
5、圖片下標 pos 是連結點選按鈕和數字按鈕的關鍵。
6、設定自動播放的時候，不使用定時器設定 pos 的方式，是因為當前 pos 的值不確定，使用自動點選右移按鈕的方式。之所以設定兩個 setInterval(moveRight, 1000); ，一個是進入頁面自動播放，一個是滑鼠退出 box 後的自動播放。
相關推薦
從零開始學 Web 之 BOM（二）定時器
一、定時器 BOM 中有兩中方式設定定時器。 1、方式一 特點：定時器可以重複使用。 // 引數有兩個： // 第一個引數：定時器定時結束處理函式 // 第二個引數：定時事件，單位毫秒。 // 返回值：定時器id值 var timeId = window.setInterval(function()
從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數
樣式 清理 java mar dde sof mov har width 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：
從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函式
一、直接使用 document 獲取的元素 // 獲取 body document.body; // 獲取 title document.title; // 獲取的是 title 中的值 // 獲取 html document.documentElement; 1、案例：圖片跟著滑鼠移動 <!DOC
從零開始學 Web 之 BOM（四）client系列
一、client 系列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style
從零開始學 Web 之 BOM（一）BOM的概念，一些BOM物件
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之
從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性
eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔
從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性
器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
從零開始學 Web 之 CSS（一）選擇器
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 W
從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影
一、顏色模式 顏色模式有兩種： RGBA rgba(0,0,0,0.5); //黑色，透明度0.5 HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)） 紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。比如紅色為0，黃色為120，綠色為240。
從零開始學Web之HTML（二）標籤、超連結、特殊符號、列表、音樂、滾動、head等
大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、標籤 1、單標籤 註釋標籤
從零開始學 Web 之 DOM（二）對樣式的操作，獲取元素的方式
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 1、對樣式的操作
從零開始學 Web 之 Ajax（二）PHP基礎語法
一、PHP 基礎語法 1、基本結構 所有PHP程式碼都要寫到 <?php ... ?> 裡面。 PHP檔案可以和 HTML 檔案結合進行使用。 PHP檔案的預設副檔名是 ".php"。 PHP程式碼必須在伺服器上執行。 2、列印語句 echo： 的作用在頁面中輸入字串（只能列印字串，數字等
從零開始學 Web 之 ES6（二）ES5的一些擴充套件
一、json物件擴充套件 把一個Json物件轉換成字串 JSON.stringify(js物件/陣列); 把一個json格式的字串轉換成Json物件 JSON.parse(json物件/陣列); 示例： <script type="text/javascript"> var o
從零開始學 Web 之 JavaScript（二）變數
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、變數 1、變數
從零開始學 Web 之 CSS（二）文字、標籤、特性
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、文字元素 1、
從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作
關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，
從零開始學 Web 之 DOM（四）節點
def clas scrip while p標簽 設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相
從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件
png 好用 添加 方式 執行 存在 區別 也會 地址 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：http://ww
從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理
eval uri turn 定位 return 也會 否則 ont sele 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客
從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手
lan 技術分享 php 概述 由於 val asc logs 更新 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht