实现效果如下：

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>摇一摇</title>

</head>

<body onload="init()">

<p>用力摇一摇你手机</p>

<audio style="display:hiden;width:0px; height:0px;" id="musicBox" preload="metadata" controls src="http://other.web.rh01.sycdn.kuwo.cn/resource/n3/21/19/3413654131.mp3">

</audio>

</body>

<script>

init();

var SHAKE_THRESHOLD = 3000;//定义一个摇动的值

var last_update = 0;//定义一个变量保存上次更新的时间

var x = y = z = last_x = last_y = last_z = 0;//定义xyz记录三个轴的数据以及上一次出发的时间

function init() {

if (window.DeviceMotionEvent) {

window.addEventListener('devicemotion', deviceMotionHandler, false);

} else {

alert('not support mobile event');

}

}

function deviceMotionHandler(eventData) {

var meda01=document.getElementById('musicBox');

var acceleration = eventData.accelerationIncludingGravity;//含重力加速度

var curTime = new Date().getTime();//获取当前时间

if ((curTime - last_update) > 100) {//curTime - last_update 是固定时间段

var diffTime = curTime - last_update;

last_update = curTime;

//alert('last_update='+last_update)

x = acceleration.x;

//alert('x='+x)

y = acceleration.y;

//alert('y='+y)

z = acceleration.z;

//alert('z='+z)

var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;

//alert('speed='+speed)  abs是取绝对值

if (speed > SHAKE_THRESHOLD) {

alert("摇动了+中大奖了，就是不知道有没有声音");

media.setAttribute("src", "http://other.web.rh01.sycdn.kuwo.cn/resource/n3/21/19/3413654131.mp3");

//setAttribute  锁定元素。此方法不能通过document对象调用，只能通过元素节点对象调用他

//例如，你可以把他与getElementByTagName()方法结合起来，去查询每个<p>元素的title属性

//var txt=document.getElementsByTagName('p')

//for(var i=0;i<text.length;i++){

//alert(txt[i].getAttribute('title'))

//}

//

//

//

//

media.load();

media.play();

meda01.play();

}

last_x = x;

last_y = y;

last_z = z;

}

}

</script>

</html>

使用JAVAScript技术在WEB网页实现摇一摇的应用的更多相关文章

  1. C#开发BIMFACE系列49 Web网页中加载模型与图纸的技术方案

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在BIMFACE二次系列博客中详细介绍了服务器端API的调用方式,如下列表 C#开发BIMFACE系列1   BIMFAC ...

  2. Javascript网页摇一摇

    function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemot ...

  3. 通过手机Web实现手机摇一摇的功能

    经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 ...

  4. [原创作品] javascript 实现的web分页器原理

    很久没有写博客了,因为最近忙于一些杂七杂八的事情.不过,互联网的价值在于信息共享,因为共享,所以互联网才能飞快发展.博主建了一个技术共享qq群:164858883,因为目前人数还比较少,活跃度还不是很 ...

  5. 20155324王鸣宇 《网络对抗技术》Web基础

    20155324王鸣宇 <网络对抗技术>Web基础 实践要求 ①Web前端HTML: 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HT ...

  6. 20155208徐子涵 《网络对抗技术》Web基础

    20155208徐子涵 <网络对抗技术>Web基础 实验要求 Web前端HTML Web前端javascipt Web后端:MySQL基础:正常安装.启动MySQL,建库.创建用户.修改密 ...

  7. 20145311王亦徐 《网络对抗技术》 Web安全基础实践

    2014531王亦徐 <网络对抗技术> Web安全基础实践 实验内容 利用WebGoat平台尝试了一些XSS.CSRF.SQL注入攻击 基础问题回答 1.SQL注入攻击原理,如何防御原理: ...

  8. 20145311 王亦徐 《网络对抗技术》 Web基础

    20145311 王亦徐 <网络对抗技术> Web基础 实验内容 简单的web前端页面(HTML.CSS等) 简单的web后台数据处理(PHP) Mysql数据库 一个简单的web登陆页面 ...

  9. 20145325张梓靖 《网络对抗技术》 Web安全基础实践

    20145325张梓靖 <网络对抗技术> Web安全基础实践 实验内容 使用webgoat进行XSS攻击.CSRF攻击.SQL注入 XSS攻击:Stored XSS Attacks.Ref ...

随机推荐

  1. git clone克隆项目太慢，或者直接导致克不下来的解决办法（转载请注明出处）

    从github下载项目下来,由于项目提交历史过多等各种原因导致文件太大,clone的时候非常的慢,或者直接出现 error: RPC failed; curl 18 transfer closed w ...

  2. Google Chome浏览器下如何开发UHF读写器

    google Chrome浏览器不支持ocx,也就不能通过ocx来连接UHF读写器,只能使用RFID读写器云服务插件,通过javascript语言来连接和操控UHF读写器YW-602H.RFID读写器 ...

  3. QT--HTTP文件下载器

    QT--HTTP文件下载器 1.pro文件添加 QT       += core gui network 2.头文件 #include <QNetworkAccessManager> #i ...

  4. [20191101]完善vim的bccalc插件8.txt

    [20191101]完善vim的bccalc插件8.txt --//今天移植bccalc插件到linux,发现一些问题.我自己已经在windows下使用一段时间,从来没有在linux下测试.看来很少人 ...

  5. 使用docker-compose安装wordpress

    一.建立应用的目录 mkdir my_wordpress cd my_wordpress 二.创建 docker-compose.yml touch docker-compose.yml;vi doc ...

  6. Druid-代码段-3-1

    所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应主流程3,新增连接的守护线程: //DruidDataSource的内部类,对应主流程3,用来补充连接 public class ...

  7. Python入门基础学习(文件与异常处理)

    Python基础学习笔记(七) 捕获异常的语法格式: 文件的基本操作: 打开文件 读.写文件 关闭文件 read方法 --读取文件: open函数的第一个参数是要打开的文件名(文件名区分大小写) 如果 ...

  8. 0day2安全——笔记4(修改临界变量)

    第二章 修改临界变量 #include <stdio.h> #include <string.h> #define PASSWORD "1234567" i ...

  9. MongoDB学习笔记（三、MongoDB聚合与更新）

    目录: 聚合 更新 更新选择器 ObjectId 更新操作的原子性 聚合: 聚合语法:db.collectionName.aggregate(aggregate_operation) 聚合操作其实就是 ...

  10. angular路由事件

    Angular 4检测路由变化,可以使用router.events来监听: 支持的事件类型: NavigationStart:导航开始 NavigationEnd:导航结束 NavigationCan ...