h5移动端手机震动

最新推荐文章于 2023-12-13 20:08:40 发布

菜鸟老五

最新推荐文章于 2023-12-13 20:08:40 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端通用文章标签： h5手机震动

本文链接：https://blog.youkuaiyun.com/qq_35695041/article/details/82888077

前端通用专栏收录该内容

52 篇文章

订阅专栏

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	</head>
	<!--设置地图容器显示-->
	<style type="text/css">
		html {
			height: 100%
		}
		
		body {
			height: 100%;
			margin: 0px;
			padding: 0px
		}
		
		#container {
			height: 100%
		}
	</style>

	<body>
		<!--标题栏-->
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">首页</h1>
		</header>
		<!--主体内容-->
		<div class="mui-content">
			<!--单击button-->
			<button type="button" onclick="btn()" class="mui-btn mui-btn-blue">震动</button>

		</div>
		<script>
			//单击事件
			function btn() {
				navigator.vibrate = navigator.vibrate ||
					navigator.webkitVibrate ||
					navigator.mozVibrate ||
					navigator.msVibrate;

				if(navigator.vibrate) {
					// 支持
					console.log("支持设备震动！");
				}

				navigator.vibrate([500, 300, 400, 300]);
			}
		</script>

	</body>

</html>