HTML5震动
HTML5是一种用于构建网页和应用程序的标准。它引入了许多新的功能和API，其中之一是震动功能。震动功能允许网页或应用程序通过设备的振动功能来产生震动效果，为用户提供更丰富的交互体验。
在HTML5中，震动功能可以通过Navigator.vibrate()方法来实现。这个方法接受一个参数，表示震动的持续时间。参数可以是一个数字或一个数组。如果参数是一个数字，表示震动的持续时间；如果参数是一个数组，则表示震动和间歇的交替序列，数组中的偶数索引表示震动的持续时间，奇数索引表示间歇的持续时间。
下面是一个简单的示例，展示如何使用HTML5的震动功能：
<!DOCTYPE html>
<html>
<head>
<title>HTML5震动示例</title>
<script>
function vibrate() {
navigator.vibrate(2000); // 震动2秒钟
}
</script>
</head>
<body>
<button onclick="vibrate()">点击震动</button>
</body>
</html>
上面的代码中，我们在按钮的onclick事件中调用了vibrate()函数，该函数使用Navigator.vibrate()方法来触发震动效果。指定的参数2000表示震动持续2秒钟。
可以根据需要自定义震动的持续时间和间隔时间。以下代码演示了如何创建一个震动和间隔的交替序列：
<!DOCTYPE html>
<html>
<head>
<title>HTML5震动示例</title>
<script>
function vibrate() {
navigator.vibrate([1000, 500, 1000, 500, 2000]); // 震动1秒钟，间隔0.5秒，震动1秒钟，间隔0.5秒，震动2秒钟
}
</script>
</head>
<body>
<button onclick="vibrate()">点击震动</button>
</body>
</html>
上述代码中，我们使用了一个数组作为参数，数组中的偶数索引表示震动的持续时间，奇数索引表示间隔的持续时间。这样就实现了震动和间隔的交替效果。
需要注意的是，为了使用HTML5的震动功能，用户必须在移动设备上运行网页或应用程序。在某些桌面浏览器中，调用Navigator.vibrate()方法可能会被禁用或忽略。
除了在JavaScript中调用Navigator.vibrate()方法来实现震动效果，还可以使用HTML的vibrate属性来实现。以下是一个使用vibrate属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5震动示例</title>
</head>
<body>
这是一个震动标题
<p vibrate="1s 0.5s">这是一个震动段落</p>
</body>
</html>
上述代码中，我们使用vibrate属性为标题和段落元素指定了震动效果。属性值"2s"表示震动持续2秒钟，"1s 0.5s"表示震动持续1秒钟，间隔0.5秒。
总结：
HTML5的震动功能为网页和应用程序提供了更丰富的交互体验。通过调用Navigator.vibrate()方法或使用vibrate属性，我们可以轻松实现震动效果。在使用震动功能时，我们需要注意兼容性和用户体验，确保合理使用，提升用户的交互体验。
类图如下所示：
classDiagram
class Navigator {
+vibrate(duration: number | number[]): void
}
序列图如下所示：
sequenceDiagram
participant User
participant App
User->>+App: 点击震动按钮
App->>+Navigator: 调用vibrate()方法
Navigator->>-App: 执行震动效果
App->>-User: 展示震动
