[toc]
# 每日英語
1. `tick` 滴答聲
2. `interval` 間隔
3. `timeout` 超時
# 定時器的使用
## 開啟定時器
### `setInterval` 間隔
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
function show() {
alert("a");
}
setInterval(show, 1000);
</script>
</body>
</html>
```
### `setTimeout` 延遲
```javascript
function show() {
alert("a");
}
setTimeout(show, 5000);
```
### 兩種定時器的區別
> `setInterval`會一直執行
> `setTimeout`只執行一次
## 停止定時器
### clearInterval
使用按鈕開啟定時器
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
oBtn1.onclick = function() {
setInterval(function() {
alert("a");
}, 500);
};
};
</script>
</head>
<body>
<input type="button" value="開啟" id="btn1" />
<input type="button" value="關閉" id="btn2" />
</body>
</html>
```
使用按鈕, 停止計時器
> 因為一個頁面有很多定時器, 所以關閉時, 需要指定要關哪個定時器
```javascript
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var timer = null;
oBtn1.onclick = function() {
timer = setInterval(function() {
alert("a");
}, 500);
};
oBtn2.onclick = function() {
clearInterval(timer);
};
};
```
還有第二種關閉方式...
```javascript
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var timer = null;
oBtn1.onclick = function() {
setInterval(function() {
alert("a");
}, 500);
setInterval(function() {
alert("b");
}, 500);
};
oBtn2.onclick = function() {
clearInterval(1);
clearInterval(2);
};
};
```
如果改變順序呢?
```javascript
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var timer = null;
oBtn1.onclick = function() {
setInterval(function() {
alert("b");
}, 500);
setInterval(function() {
alert("a");
}, 500);
};
oBtn2.onclick = function() {
clearInterval(1);
// clearInterval(2);
};
};
```
### clearTimeout
> 關閉延時任務
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oBtn3 = document.getElementById("btn3");
var oBtn4 = document.getElementById("btn4");
var timer = null;
var timer1 = null;
oBtn1.onclick = function() {
// setInterval(function() {
// alert("a");
// }, 500);
// setInterval(function() {
// alert("b");
// }, 500);
timer = setTimeout(function() {
alert("c");
}, 5000);
};
oBtn2.onclick = function() {
clearInterval(1);
clearInterval(2);
};
oBtn3.onclick = function() {
timer1 = setTimeout(function() {
alert("c");
}, 5000);
};
oBtn4.onclick = function() {
console.log(timer);
console.log(timer1);
clearTimeout(timer);
clearTimeout(timer1);
};
};
</script>
</head>
<body>
<input type="button" value="開啟" id="btn1" />
<input type="button" value="關閉" id="btn2" />
<input type="button" value="延遲5秒開啟" id="btn3" />
<input type="button" value="關閉原來的開啟計劃" id="btn4" />
</body>
</html>
```
**因為順序不固定, 所以不推薦使用數字的方式, 關閉定時器**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oBtn3 = document.getElementById("btn3");
var oBtn4 = document.getElementById("btn4");
var oBtn5 = document.getElementById("btn5");
var oBtn6 = document.getElementById("btn6");
var oBtn7 = document.getElementById("btn7");
var oBtn8 = document.getElementById("btn8");
var timer1, timer2, timer3, timer4;
oBtn1.onclick = function() {
timer1 = setInterval(function() {
alert("AAA");
}, 3000);
};
oBtn2.onclick = function() {
timer2 = setInterval(function() {
alert("BBB");
}, 3000);
};
oBtn3.onclick = function() {
timer3 = setInterval(function() {
alert("CCC");
}, 3000);
};
oBtn4.onclick = function() {
timer4 = setInterval(function() {
alert("DDD");
}, 3000);
};
oBtn5.onclick = function() {
clearInterval(timer1);
};
oBtn6.onclick = function() {
clearInterval(timer2);
};
oBtn7.onclick = function() {
clearInterval(timer3);
};
oBtn8.onclick = function() {
clearInterval(timer4);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="開啟定時A" />
<input id="btn2" type="button" value="開啟定時B" />
<input id="btn3" type="button" value="開啟定時C" />
<input id="btn4" type="button" value="開啟定時D" />
<input id="btn5" type="button" value="關閉定時A" />
<input id="btn6" type="button" value="關閉定時B" />
<input id="btn7" type="button" value="關閉定時C" />
<input id="btn8" type="button" value="關閉定時D" />
</body>
</html>
```
# 數碼時鐘
## 先來一個簡單的布局
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img src="img/0.png" />
<img src="img/1.png" />
:
<img src="img/0.png" />
<img src="img/2.png" />
:
<img src="img/0.png" />
<img src="img/3.png" />
</body>
</html>
```
```css
body {
background: #000;
color: white;
font-size: 50px;
}
```
第一步: 獲取時間
第二步: 修改圖片的 src
獲取時間需要用到 Date 類
```javascript
var oDate = new Date();
console.log(oDate.getHours()); // 獲取當前的小時數
console.log(oDate.getMinutes()); // 獲取當前的分鐘數
console.log(oDate.getSeconds()); // 獲取當前的秒數
```
如何修改圖片路徑
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload = function() {
var aImg = document.getElementsByTagName("img");
var str = "221744";
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str[i] + ".png";
}
};
</script>
</head>
<body>
<img src="img/2.png" />
<img src="img/3.png" />
:
<img src="img/2.png" />
<img src="img/7.png" />
:
<img src="img/3.png" />
<img src="img/3.png" />
</body>
</html>
```
> 通過修改字符串, 就可以控制時間的顯示
> js 代碼修改如下
```javascript
window.onload = function() {
var aImg = document.getElementsByTagName("img");
// var str = "221744";
var oDate = new Date();
var str = "" + oDate.getHours() + oDate.getMinutes() + oDate.getSeconds(); // 注意數字直接相加的問題以及補零問題
// console.log(str)
// console.log(str.length)
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str[i] + ".png";
}
};
```
解決數字相加和補零之后...
```javascript
function toDouble(num) {
if (num < 10) {
return "0" + num;
} else {
return "" + num;
}
}
window.onload = function() {
var aImg = document.getElementsByTagName("img");
// var str = "221744";
var oDate = new Date();
var str =
toDouble(oDate.getHours()) +
toDouble(oDate.getMinutes()) +
toDouble(oDate.getSeconds());
console.log(str);
console.log(str.length);
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str[i] + ".png";
}
};
```
最后, 還得讓表自己動起來
```javascript
window.onload = function() {
setInterval(function() {
var aImg = document.getElementsByTagName("img");
// var str = "221744";
var oDate = new Date();
var str =
toDouble(oDate.getHours()) +
toDouble(oDate.getMinutes()) +
toDouble(oDate.getSeconds());
console.log(str);
console.log(str.length);
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str[i] + ".png";
}
}, 1000);
};
```
剛刷新的時候, 還有一個小問題...
```javascript
function toDouble(num) {
if (num < 10) {
return "0" + num;
} else {
return "" + num;
}
}
window.onload = function() {
var aImg = document.getElementsByTagName("img");
function tick() {
var oDate = new Date();
var str =
toDouble(oDate.getHours()) +
toDouble(oDate.getMinutes()) +
toDouble(oDate.getSeconds());
console.log(str);
console.log(str.length);
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str[i] + ".png";
}
}
setInterval(tick, 1000);
tick();
};
```
## 獲取系統時間
### Date 對象
### `getHours`,`getMinutes`,`getSeconds`
## 顯示系統時間
```javascript
var oDate = new Date();
console.log(oDate.getFullYear()); // 年
console.log(oDate.getMonth()); // 月+1
console.log(oDate.getDate()); // 日期, 第幾號
console.log(oDate.getDay()); // 周幾
```
### 字符串連接
### 空位補零
## 設置圖片路徑(注意兼容性)
### 字符串可以像數組那樣取值嗎？
```javascript
var str = "I love China!!!";
console.log(str[0]);
console.log(str[1]);
console.log(str[2]);
console.log(str[3]);
```
charAt 的使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
window.onload = function() {
var str = "hello world";
alert(str.charAt(0));
alert(str.charAt(1));
};
</script>
</body>
</html>
```
解決兼容性問題
遍歷字符串時的代碼需要修改一下
```javascript
var oDate = new Date();
var str =
toDouble(oDate.getHours()) +
toDouble(oDate.getMinutes()) +
toDouble(oDate.getSeconds());
console.log(str);
console.log(str.length);
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str.charAt(i) + ".png";
}
```
## 如何獲取年月日?
```javascript
var oDate = new Date();
console.log(oDate.getFullYear());
console.log(oDate.getMonth());
console.log(oDate.getDate());
console.log(oDate.getDay());
```
# 延時提示框
## 效果展示
## 具體方法
先寫 html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
float: left;
margin: 10px;
}
#div1 {
width: 50px;
height: 50px;
background: red;
}
#div2 {
width: 250px;
height: 180px;
background: #ccc;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
```
再寫移入移出隱藏
```javascript
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
oDiv1.onmouseover = function() {
oDiv2.style.display = "block";
};
oDiv1.onmouseout = function() {
oDiv2.style.display = "none";
};
};
```
需要給 div1 移出時加上延遲效果
```javascript
oDiv1.onmouseout = function() {
setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
```
移到 div2 上以后, 需要取消定時, 添加`div2`的`onmouseover`函數
完整 js 代碼如下
```javascript
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null;
oDiv1.onmouseover = function() {
oDiv2.style.display = "block";
};
oDiv1.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
oDiv2.onmouseover = function() {
clearTimeout(timer);
};
};
```
但是移出時,div2 需要消失...
需要添加`div2`的`onmouseout`函數
```javascript
oDiv2.onmouseout = function() {
oDiv2.style.display = "none";
};
```
從 div2 向 div1 移入時, 會閃一下...
所以, div2 移出時, 也需要有延遲
現在需要給`div2`的`onmuseout`函數, 添加延遲
同時移入`div1`時, 延遲需要關掉, 完整的 js 代碼如下:
```javascript
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null;
oDiv1.onmouseover = function() {
clearTimeout(timer);
oDiv2.style.display = "block";
};
oDiv1.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
oDiv2.onmouseover = function() {
clearTimeout(timer);
};
oDiv2.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
};
```
## 簡化代碼(代碼合并)
合并`div1`和`div2`的`onmouseout`
js 完整代碼如下
```javascript
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null;
oDiv1.onmouseover = function() {
clearTimeout(timer);
oDiv2.style.display = "block";
};
oDiv2.onmouseout = oDiv1.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
oDiv2.onmouseover = function() {
clearTimeout(timer);
};
};
```
合并`div1`和`div2`的`onmouseover`
不過需要加一行代碼, 讓他們一樣
完整 js 代碼如下
```javascript
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null;
oDiv2.onmouseover = oDiv1.onmouseover = function() {
clearTimeout(timer);
oDiv2.style.display = "block";
};
oDiv2.onmouseout = oDiv1.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
};
```
- 每日單詞
- JavaScript 入門
- JavaScript 基礎
- JavaScript 基礎回顧
- JavaScript 函數
- 匿名函數,多維數組,數據類型轉換
- JavaScript 類型轉換, 變量作用域
- js 運算符(一)
- js 運算符(二)
- js 流程控制語句
- JavaScript 掃盲日
- JavaScript 牛刀小試(一)
- JavaScript 牛刀小試(二)
- JavaScript 再談函數
- JavaScript-BOM
- JavaScript-定時器(一)
- JavaScript-定時器(二)
- 番外-輪播圖源碼
- JavaScript 輪播圖和 DOM 簡介
- JavaScript-DOM 基礎-NODE 接口-屬性
- JavaScript-DOM 基礎-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 節點
- CSS 復習與擴展(一)
- CSS 復習與擴展(二)
- 走進 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高級
- jquery 備忘清單-1
- jquery 備忘清單-2
- 聊聊 json
- jquery 備忘清單-3