JavaScript 基础 - 定时器
JavaScript 中的定时器是指可以在指定时间执行某个函数或代码的机制。它可以分为两种：间隔型和延时型。间隔型定时器可以使用 `setInterval` 函数来实现，而延时型定时器可以使用 `setTimeout` 函数来实现。
在 JavaScript 中，定时器的使用非常广泛，例如创建数码时钟、延时提示框、无缝滚动等等。在这里，我们将详细介绍 JavaScript 中的定时器的使用和实现。
一、 JavaScript 中的定时器
在 JavaScript 中，定时器可以分为两种：间隔型和延时型。间隔型定时器可以使用 `setInterval` 函数来实现，而延时型定时器可以使用 `setTimeout` 函数来实现。
* 间隔型定时器：使用 `setInterval` 函数来实现，例如：
```javascript
setInterval(function(){
console.log("Hello World!");
}, 1000);
```
这个例子中，每隔 1 秒钟就会输出 "Hello World!"。
* 延时型定时器：使用 `setTimeout` 函数来实现，例如：
```javascript
setTimeout(function(){
console.log("Hello World!");
}, 3000);
```
这个例子中，3 秒钟后就会输出 "Hello World!"。
二、 停止定时器
在 JavaScript 中，可以使用 `clearInterval` 和 `clearTimeout` 函数来停止定时器。
* 停止间隔型定时器：使用 `clearInterval` 函数，例如：
```javascript
var intervalId = setInterval(function(){
console.log("Hello World!");
}, 1000);
clearInterval(intervalId);
```
这个例子中，我们可以使用 `clearInterval` 函数来停止间隔型定时器。
* 停止延时型定时器：使用 `clearTimeout` 函数，例如：
```javascript
var timeoutId = setTimeout(function(){
console.log("Hello World!");
}, 3000);
clearTimeout(timeoutId);
```
这个例子中，我们可以使用 `clearTimeout` 函数来停止延时型定时器。
三、 数码时钟
使用 JavaScript 可以创建一个简单的数码时钟。下面是一个示例代码：
```javascript
function showTime(){
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
document.getElementById("clock").innerHTML = hour + ":" + minute + ":" + second;
}
setInterval(showTime, 1000);
```
这个例子中，我们使用 `setInterval` 函数来每隔 1 秒钟更新一次时钟的显示。
四、 延时提示框
使用 JavaScript 可以创建一个延时提示框。下面是一个示例代码：
```javascript
function showTip(){
document.getElementById("tip").style.display = "block";
}
setTimeout(showTip, 3000);
```
这个例子中，我们使用 `setTimeout` 函数来延时 3 秒钟后显示提示框。
五、 无缝滚动
使用 JavaScript 可以创建一个无缝滚动的效果。下面是一个示例代码：
```javascript
var ul = document.getElementById("list");
var li = ul.getElementsByTagName("li");
var speed = 2;
function move(){
ul.style.left = ul.offsetLeft - speed + "px";
if(ul.offsetLeft <= -ul.offsetWidth){
ul.style.left = 0;
}
}
setInterval(move, 30);
```
这个例子中，我们使用 `setInterval` 函数来每隔 30 毫秒更新一次 ul 的左边距，以创建无缝滚动的效果。
六、 无缝滚动 - 扩展
使用 JavaScript 可以扩展无缝滚动的效果。下面是一个示例代码：
```javascript
var ul = document.getElementById("list");
var li = ul.getElementsByTagName("li");
var speed = 2;
function move(){
ul.style.left = ul.offsetLeft - speed + "px";
if(ul.offsetLeft <= -ul.offsetWidth){
ul.style.left = 0;
}
}
function pause(){
clearInterval(moveId);
}
function resume(){
moveId = setInterval(move, 30);
}
document.getElementById("pause").addEventListener("click", pause);
document.getElementById("resume").addEventListener("click", resume);
```
这个例子中，我们可以使用 `clearInterval` 函数来暂停无缝滚动，并使用 `setInterval` 函数来恢复无缝滚动。
JavaScript 中的定时器可以用于实现各种有趣的效果，例如数码时钟、延时提示框、无缝滚动等等。使用定时器可以让我们的网页更加生动和交互性强。
