js摇一摇事件

今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少. 发现很有意思. 一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我. //运动事件监听if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler,false);} //获取加速度信息//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行…

利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖

摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', handler, !1); lastTime = new Date(); } else { alert('你的浏览器不支持摇一摇功能.'); } devicemotion…

使用shake.js让你博客支持摇一摇

大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake.js,shake.js github地址,我们只需要里面的shake.js,然后引入. 添加“摇一摇”事件监听 window.addEventListener('shake', shakeEventDidOccur, false); //function to call when shake oc…

js微信摇一摇功能以及api

一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>inde.html访问成功</p> <div id="status" style="fo…

shake.js实现微信摇一摇功能

项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码: /* * Author: Alex Gibson * https://github.com/alexgibson/shake.js * License: MIT license */ (function(global, factory) { if (typeof define === 'func…

js检测手机摇一摇

1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandler(event) { accGravity = event.acceleration; } if (window.DeviceMotionEvent) { window.addEventListener("devicemotion", motionHandler, false); } el…

js html5 仿微信摇一摇

看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊先放代码 <body onload="init()"> <p>用力摇一摇你手机</p> <audio style="display:hiden;width:0px; height:0px;" id="musicBox" preload="metadata" controls src=&q…

H5 DeviceMotionEvent 事件制作“摇一摇效果”

摇一摇”的效果制作主要依赖于H5的deviceMotionEvent事件先讲怎么使用,具体的原理在后边补充第一步:捕捉重力加速度 var acceleration = eventData.accelerationIncludingGravity; 第二步:监听函数并执行. var SHAKE_THRESHOLD = 800; var last_update = 0; var x, y, z, last_x, last_y, last_z; if ((window.DeviceMotionEv…

H5+JS实现手机摇一摇功能

在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientation事件提供了设备角度.朝向等信息). 而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果. 现在把完整代码记录下: //运动事件监听 if (wi…

用js实现摇一摇功能

function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemotion', deviceMotionHandler, false); } } var SHAKE_THRESHOLD = 3000; // 定义一个变量保存上次更新的时间 var last_update = 0; // 紧接着定义x.y.z记录三个轴的数据以及上一次出发的时间 var x; var…

h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信息,表示为一系列本地坐标系的旋角.devicemotion:提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标.其还提供了设备在坐标系中的自转速率.若可行的话,事件应该提供设备重心处的加速信息.compassneedscalibration:用于通知Web站点使用罗盘信息校准上述事件. 5…

js实现手机摇一摇

//手机摇一摇 ---------------------------------------------------------- init();var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y = last_z = 0; function init() { if (window.DeviceMotionEvent) {…

C#开发微信门户及应用(38)--微信摇一摇红包功能

摇一摇周边红包接口是为线下商户提供的发红包功能.用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包.我曾经在<C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实现>介绍过微信摇一摇的相关管理,包括页面.设备之间的关系,以及使用等方面内容.本篇继续介绍摇一摇设备的另外一项功能,摇一摇红包功能,介绍如何利用微信摇摇周边的后台配置好页面及地址,然后通过微信JSSDK的方式,摇一摇获取红包的整个流程功能. 1.微信摇一摇红包功能介绍功能说明摇一摇周边红包接口是为线…

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

经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动…

html5 DeviceOrientation来实现手机网站上的摇一摇功能

原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的幸福2胖纸的码农生活,直接转载了,不要介意!呵呵以下是转载内容. ——————————————————— 介绍之前做两个声明: 1.以下代码可以直接运行,当然你别忘了引用jQuery才行,我可提醒了,别到时候跑不起来骂我就成: 2.下面的实现思想参照了网上的一些文章,自己做了以下整理,对代码加入了一些注释说明,本人并非原创. <html lang="zh…

利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一段事件的思考,绝对采用html5+socket.io来实现这个功能.首先我把该功能的实现拆分为以下几个步骤: 移动端前端页面+脚本逻辑实现 PC端前端页面+脚本逻辑实现后台逻辑实现加入socket.io实现长连接实现移动端控制PC端逻辑下文中的代码有不全的地方,大家可以查看我的Github项…

HTML5实现摇一摇的功能（实测后）--转

eviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息.加速度的数据将包含三个轴:x,y和z(示意如下图所示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘).因为有些设备可能没有硬件来排除重力的影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响. 涉及到我们如何计算用户摇晃手机的原理了.考虑的要点…

【HTML5 】手机重力与方向感应的应用——摇一摇效果

http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果. DeviceOrientation包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方…

html5实现web app摇一摇换歌

微信可以摇歌曲,根据声音识别出歌曲,然后返回歌曲信息,利用html5的deviceOrientation特性和deviceMotion事件也可以在web app上实现类似于微信摇一摇的功能,原生的app实现也有相关接口,这里只考虑web app的情况...... Section One 先来看下demo效果图: 测试地址:http://hcy2367.github.io/music/,请在手机浏览器中打开该链接,建议WiFi下操作,否则一首歌几M的流量挺坑的,然后摇一摇换歌,操作可能会有点慢.…

前端笔记之微信小程序（四）WebSocket&Socket.io&摇一摇案例&地图|地理位置

一.WebSocket概述 http://www.ruanyifeng.com/blog/2017/05/websocket.html Workerman一款开源高性能异步PHP socket即时通讯框架https://workerman.net HTTP是无连接的:有请求才会有响应,如果没有请求,服务器想主动推送信息给浏览器是不可能的. 比如图文直播.聊天室原理:长轮询. setInterval(function(){ $.get() },1000) 间隔一定的时间,主动向服务器发起请求,询问…

H5实现摇一摇技术总结

摇一摇遇到的问题一.如何对摇晃效果进行反馈刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像微信的摇一摇一样,摇晃过程中,会有上下移动的动画,这里加入了周围金币做跳跃运动的动画. 二.摇晃不灵敏,需要用力摇晃手机才行摇晃灵敏度是个不太好控制的量,即要求不是很灵敏,比如,不能稍微碰一下就摇晃了,也不能使劲摇才能摇中,这就需要对X.Y.Z轴上的加速度进行合理利用,这里是几种…

HTML5 摇一摇加强版之一次失败的探索

最近在看设备传感器的API,当然也少不了研究一下让微信称神的“摇一摇”了.关于“摇一摇”的实现,网上很多资料所以不详细说了,但总是有布局.效果不全等各种问题,所以作为一名资深copypaster,代码肯定是要贴的: 源码在此手机扫二维码看看效果,支持Chrome.Safari.微信(新版): 核心代码是这一段: this.deviceMotionHandler = function(eventData) { var acceleration = eventData.acceleration;…

Android 摇一摇功能的注意事项

/**开始重力传感器的检测*/ public void start() { // 获得传感器管理器 sensorManager = (SensorManager) mContext.getSystemService(Context.SENSOR_SERVICE); if (sensorManager != null) { // 获得重力传感器 sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER); } // 注册 i…

H5摇一摇遇到的问题

一.如何对摇晃效果进行反馈刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像微信的摇一摇一样,摇晃过程中,会有上下移动的动画,这里加入了周围金币做跳跃运动的动画. 二.摇晃不灵敏,需要用力摇晃手机才行摇晃灵敏度是个不太好控制的量,即要求不是很灵敏,比如,不能稍微碰一下就摇晃了,也不能使劲摇才能摇中,这就需要对X.Y.Z轴上的加速度进行合理利用,这里是几种网上常见的处理方式…

html5实现摇一摇功能

原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion 通过DeviceMotionEvent,可以获得accelerationIncludingGravity的x,y,z属性,根据x,y,z属性的变化来判断设备是否有摇一摇的事件发生. accelerationIncludeingGravity说明: The accele…

【WP开发】实现“摇一摇”功能

尽管我的微信是每八个月登录一次,但我相信各位玩得比我多.微信有一个“摇一摇”功能,这个功能其实是利用了加速度传感器来实现的,这个传感器,我估计再低端的手机都会有的,这是严重基本的传感器. 重力加速度既可以用于判断手机当前所放置的方向,也可以用来检测运动方向,当用户甩手机时就会产生运动加速度. 位于Windows.Devices.Sensors命名空间下的Accelerometer类封装了重力加速器相关的操作,“摇一摇”可以判断手机在X,Y,Z三个方向上的加速度来实现,甩手机时比较激动,因此,X,…

ios UIWindow 错误使用导致无法接收motionEnded（摇一摇）函数

今天遇到一个问题,第一次运行程序时,- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event函数无法调用,第二次就好了.找了1天,终于找到了原因.在第一次运行时,显示了一个帮助页面,而这个页面当时是使用再加一层UIWindow来实现的,显示时调用了makeKeyAndVisible这个函数,导航结束后,也没有把原始的window设置为key.在ios8上没什么问题,但是在ios9上,原始的window就无法接收mo…

Android 摇一摇之传感器片

要监视原始的传感器数据,你需要实现两个通过SensorEventListener接口暴露的回调方法:onAccuracyChanged()和onSensorChanged(). 传感器数据的速度值,这些值如下: 1.SENSOR_DELAY_GAME : 如果利用传感器开发游戏,建议使用该值. 一般大多数实时行较高的游戏使用该级别.2.SENSOR_DELAY_NORMAL : 默认的获取传感器数据的速度.标准延迟,对于一般的益智类游戏或者EASY界别的游戏可以使用,但过低的采样率可能对一些赛车…

利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持. // 这个特性包括两个事件: // 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据(手机所处的角度.方位和朝向等). // 2.deviceMotion:封装了运动传感器的事件,可以获取手机运动状态下的运动加速度等数据. // 使…

android手电筒（摇一摇也可开启手电筒）

package com.firefly.myflashlight; import android.app.Activity; import android.hardware.Camera; import android.hardware.Camera.Parameters; import android.hardware.Sensor; import android.hardware.SensorEvent; import android.hardware.SensorEventListener…

【js摇一摇事件】的更多相关文章