手机摇一摇效果-html5

1.手机摇一摇效果实现

2.播放声音

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>摇一摇功能</title><script type="text/javascript">//Javascript</script>
</head>
<body onload="init()">
<p>用力摇一摇你手机</p>
<audio id="musicBox" preload="metadata" controls src="5018.mp3" autostart="0">
</audio>
<div id="btn" class="btn">点击播放</div>
<script type="text/javascript">var SHAKE_THRESHOLD = 3000;var last_update = 0;var media = document.getElementById("musicBox");var btn = document.getElementById("btn");var x = y = z = last_x = last_y = last_z = 0;function init() {if (window.DeviceMotionEvent) {window.addEventListener('devicemotion', deviceMotionHandler, false);} else {alert('not support mobile event');}}function deviceMotionHandler(eventData) {var acceleration = eventData.accelerationIncludingGravity;var curTime = new Date().getTime();if ((curTime - last_update) > 100) {var diffTime = curTime - last_update;last_update = curTime;x = acceleration.x;y = acceleration.y;z = acceleration.z;var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;if (speed > SHAKE_THRESHOLD) {//media.setAttribute("autostart", 1);//media.setAttribute("src", "5018.mp3");//media.load();
                    media.play();　　　　　　　　　　　　alert("弹窗了");}last_x = x;last_y = y;last_z = z;}}</script>
</body>
</html>

IOS 测试：Safari 弹框\不播放音乐, Chroma 弹框\不播放音乐,UC弹框\不播放音乐

Andriod 测试：UC弹框\播放音乐,Chroma 弹框\播放音乐,内置浏览器弹框\播放音乐红米note 自带浏览器弹窗/不播放

文件下载：http://files.cnblogs.com/zhidong123/yao-yao.rar

转载于:https://www.cnblogs.com/zhidong123/p/4193754.html

手机摇一摇效果-html5相关推荐

HTML5手机重力与方向感应的应用——摇一摇效果
HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重 ...
HTML5+PHP+jQuery手机摇一摇换衣
在上一篇文章中,我们了使用HTML5可以侦听到手机晃动从而实现摇一摇效果.手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等.本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手 ...
html手机端自动换,jQuery+HTML5实现手机摇一摇换衣特效
jQuery+HTML5实现手机摇一摇换衣特效 2018-12-31 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了jQuery+HTML5实现手机摇一摇换衣特 ...
HTML5实现换装,jQuery+HTML5实现手机摇一摇换衣特效
手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等.本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果. 注意,这是一篇WEB知识综合应用的文章,阅读本文前提是 ...
Html5手机微信摇一摇
<?php /*** Created by JetBrains PhpStorm.* User: 张华* Date: 16-3-4* Time: 上午11:29* To change this ...
html检测手机是否摇动,HTML5摇一摇（上）—如何判断设备摇动
刚刚过去的一道学数里屏.中近,期据面蔽最,近,期据面年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个"摇签&qu ...
用HTML5实现手机摇一摇的功能并配上声音
一.用HTML5实现手机摇一摇的功能并配上声音 HTML5的一个重要特性:DeviceOrientation,他将底层的方向传感器和运动传感器进行了高级封装,提供DOM事件支持. DeviceOrie ...
摇一摇抽奖 php,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下:if (win ...
苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖，html5devicemotion...
利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion 摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的 ...

手机摇一摇效果-html5

手机摇一摇效果-html5相关推荐

最新文章

热门文章