[HTML5] 手机摇一摇实现

最新推荐文章于 2020-11-12 18:51:50 发布
最新推荐文章于 2020-11-12 18:51:50 发布
阅读量107 收藏
点赞数
文章标签： javascript 移动开发 ViewUI
目录结构

图片

引入jQuery：jquery-1.11.1.min.js

html代码

<!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" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="shake.js"></script>
    <script type="text/javascript">
     var count = 1;
     window.onload = function() { 
    var myShakeEvent = new Shake({ 
        threshold: 15 
    }); 
 
    myShakeEvent.start(); 
 
    window.addEventListener('shake', shakeEventDidOccur, false); 
 
    function shakeEventDidOccur () {
shakingAutoPlay();
$("#shakeMe").text("第"+count+"次摇晃手机");
count++;
window.setTimeout(shakeoverAutoPlay,1500);
    } 
}; 
 
//摇动时的声音
function shakingAutoPlay(){
var shaking = document.getElementById("shaking");//必须使用 document.getElementById 获取dom而非jQuery对象
shaking.loop = false;//必须设置为false   不然在android手机4.0版本上会一直循环播放该音效
shaking.play();
}
 
//摇动结束后的声音
function shakeoverAutoPlay(){
var shakeover = document.getElementById("shakeover");
shakeover.loop = false;
shakeover.play();
}
        
    </script>
</head>
<body>
<div id="pro"> 
    <p>使劲晃动您的手机</p>
    <h1 id="shakeMe">尚未摇动</h1> 
<audio id="shaking" src="shaking.mp3" controls="controls" loop="false" hidden="true"></audio>
<audio id="shakeover" src="shakeover.mp3" controls="controls" loop="false" hidden="true"></audio>
</div>
</body>
</html>

shake.js

/*
 * Author: Alex Gibson
 * https://github.com/alexgibson/shake.js
 * License: MIT license
 */
 
(function(global, factory) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return factory(global, global.document);
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory(global, global.document);
    } else {
        global.Shake = factory(global, global.document);
    }
} (typeof window !== 'undefined' ? window : this, function (window, document) {
 
    'use strict';
 
    function Shake(options) {
        //feature detect
        this.hasDeviceMotion = 'ondevicemotion' in window;
 
        this.options = {
            threshold: 15, //default velocity threshold for shake to register
            timeout: 1000 //default interval between events
        };
 
        if (typeof options === 'object') {
            for (var i in options) {
                if (options.hasOwnProperty(i)) {
                    this.options[i] = options[i];
                }
            }
        }
 
        //use date to prevent multiple shakes firing
        this.lastTime = new Date();
 
        //accelerometer values
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;
 
        //create custom event
        if (typeof document.CustomEvent === 'function') {
            this.event = new document.CustomEvent('shake', {
                bubbles: true,
                cancelable: true
            });
        } else if (typeof document.createEvent === 'function') {
            this.event = document.createEvent('Event');
            this.event.initEvent('shake', true, true);
        } else {
            return false;
        }
    }
 
    //reset timer values
    Shake.prototype.reset = function () {
        this.lastTime = new Date();
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;
    };
 
    //start listening for devicemotion
    Shake.prototype.start = function () {
        this.reset();
        if (this.hasDeviceMotion) {
            window.addEventListener('devicemotion', this, false);
        }
    };
 
    //stop listening for devicemotion
    Shake.prototype.stop = function () {
        if (this.hasDeviceMotion) {
            window.removeEventListener('devicemotion', this, false);
        }
        this.reset();
    };
 
    //calculates if shake did occur
    Shake.prototype.devicemotion = function (e) {
        var current = e.accelerationIncludingGravity;
        var currentTime;
        var timeDifference;
        var deltaX = 0;
        var deltaY = 0;
        var deltaZ = 0;
 
        if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
            this.lastX = current.x;
            this.lastY = current.y;
            this.lastZ = current.z;
            return;
        }
 
        deltaX = Math.abs(this.lastX - current.x);
        deltaY = Math.abs(this.lastY - current.y);
        deltaZ = Math.abs(this.lastZ - current.z);
 
        if (((deltaX > this.options.threshold) && (deltaY > this.options.threshold)) || ((deltaX > this.options.threshold) && (deltaZ > this.options.threshold)) || ((deltaY > this.options.threshold) && (deltaZ > this.options.threshold))) {
            //calculate time in milliseconds since last shake registered
            currentTime = new Date();
            timeDifference = currentTime.getTime() - this.lastTime.getTime();
 
            if (timeDifference > this.options.timeout) {
                window.dispatchEvent(this.event);
                this.lastTime = new Date();
            }
        }
 
        this.lastX = current.x;
        this.lastY = current.y;
        this.lastZ = current.z;
 
    };
 
    //event handler
    Shake.prototype.handleEvent = function (e) {
        if (typeof (this[e.type]) === 'function') {
            return this[e.type](e);
        }
    };
 
    return Shake;
}));
 
 demo地址：http://files.cnblogs.com/files/avivaye/shake.zip
weixin_34162228
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5 实现摇一摇功能
04-11
NULL 博文链接：https://yongkuang.iteye.com/blog/1680869
HTML5实现手机摇一摇功能
那迷离的背影的博客
05-17 511
HTML5新增了一些JavaScript API接口，比如地理定位、重力感应等。今天主要介绍devicemotion事件（设备事件），它提供设备的加速信息，表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。本文给大家讲解了HTML5实现手机摇一摇的效果。 HTML5 实现手机摇一摇 - 梦幻雪冰 - 梦幻雪冰摇一摇的实现思路： 1、检测
用HTML5实现手机摇一摇的功能并配上声音
感恩、奋进、自信
09-24 8272
用HTML5实现手机摇一摇的功能并配上声音 HTML5的一个重要特性：DeviceOrientation，他将底层的方向传感器和运动传感器进行了高级封装，提供DOM事件支持。 DeviceOrientation这个特性包括两种事件： 1、deviceOrientation：封装方向传感器数据的事件，可以获取手机静止状态下的方向数据，如手机的方位、角度、朝          向
vue微信公众号 摇一摇的踩坑之路
ll9675728的博客
11-12 499
小编第一次写博客，如有哪不对 请多多包含 本编讲的是在微信公众号模仿微信摇一摇的采坑之路，供大家参考 小编只做个搬运工 源码地址:https://alexgibson.github.io/shake.js 实现原理: 微信摇一摇事件需要有硬件支撑，要求手机中有 陀螺仪(顾明思议它是利用手机硬件来做支撑） 通过陀螺仪的重力加速来判断当前用户手动摇动的重力感应，并获取到指来做函数的判断 最终要的一...
jQuery手机摇一摇抽油卡代码.zip
07-04
jQuery手机摇一摇抽油卡代码是一款汽车网站常用的油卡抽奖活动代码。
Html5+JS实现手机摇一摇功能
09-28
主要介绍了Html5+JS实现手机摇一摇功能,本文使用HTML5的DeviceOrientation实现监听手机方向传感器数据,实现摇一摇功能雏形,需要的朋友可以参考下
jQuery+HTML5实现手机摇一摇换衣特效|angluo-javascript-125951.pdf
10-24
经常我们玩微信都会用到查到附近的人，都是在app上实现手机摇一摇的功能。现在，我们将此技术搬移到手机web上，供大家学习，有需要的小伙伴可以参考下。
用HTML5实现手机摇一摇的功能的教程
09-28
手机上的摇一摇功能不错.怎么实现的呢
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
09-28
主要介绍了HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例,本文直接给出实现代码,需要的朋友可以参考下
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
09-27
主要介绍了基于HTML5实现类似微信手机摇一摇功能(计算摇动次数),需要的朋友可以参考下
nodejs+express(ejs)做摇一摇小游戏（公司年会摇一摇游戏环节，大屏幕统计前几名摇动次数），大家一起摇一摇，看谁摇的次数多，并用excel-export导出excel
12-06 1027
马上要年会了，有个什么总突然过来找我们部门后端负责人（我们公司后端用的PHP），询问是否能做个摇一摇的小游戏，大家一起摇一摇，有个类似比赛的小游戏互动，谁摇的次数多，谁靠前，最终前几名获奖，后端负责人直接来一句，这前端能做，你找前端吧，就这么着，把我叫了过去，问我能不能做，我说：以前没做过，我试试先做个小 demo 吧，没做过的东西真就不一定能整出来 自己先想了个游戏环节和互动流程： 看人家那架...
从shakejs来看自定义事件，及addEventListener
weixin_34356138的博客
03-19 445
shakejs是一个摇一摇的工具 gitHub : https://github.com/alexgibson/shake.js 使用方法 <script src="shake.js"></script> //引入 初始化 var myShakeEvent = new Shake({ thresho...
shake.js监测手机摇一摇
Rey
01-24 4459
下面是shake.js代码 (function(global, factory) { if (typeof define === 'function' && define.amd) { define(function() { return factory(global, global.document); }); } els
js实现手机端摇一摇
banana960531的博客
09-21 2280
实现摇一摇功能，有两种js事件负责处理设备方向的信息，第一种是：DeviceOrientationEvent，它会在加速度传感器检测到设备在方向上产生变化时触发；第二种是：DeviceMotionEvent，它会在加速度发生改变时触发，在这里采用的是第二种方法。 代码如下： 可以通过将该文件放在wamp的web目录下，手机通过跟本地服务器在同一局域网下实现访问，进行摇一摇。 wamp...
vue 写h5页面-摇一摇
03-18 451
依赖的第三方的插件shake.js github地址：https://github.com/alexgibson/shake.js 提供一个摇一摇音效下载地址：http://aspx.sc.chinaz.com/query.aspx?keyword=%E6%91%87%E4%B8%80%E6%91%87&classID=14 安装包shake.js： 　　np...
用vue 写h5页面-摇一摇
weixin_34130389的博客
05-16 1208
　　vue配合其他ui框架除了开发一个完整的web项目外，也有不少的项目做一些h5的活动页面开发。你的页面现在需要模拟微信的摇一摇动作。 　　项目环境： vue-cli 完成的一个项目 　　准备插件（包）：依赖的第三方的插件（后续会完成如何写vue插件的方法）shake.js ,github地址：https://github.com/alexgibso...
html5 navigator 手机震动,js实现手机震动
热门推荐
spring mongodb maven
01-19 1万+
html5 navigator 的 vibrate实现手机震动主要用到的代码//if phone support navigator.vibrate if (navigator.vibrate) { //vibrate 1 second navigator.vibrate(1000); } else if (naviga
手机摇一摇抽奖代码实现
最新发布
06-13
下面是一个简单的手机摇一摇抽奖代码实现示例： HTML部分： ```html <!-- 抽奖按钮 --> <button id="lotteryBtn">摇一摇抽奖</button> <!-- 中奖提示 --> <div id="result"></div> ``` JavaScript部分： ```javascript // 监听DeviceMotion事件 window.addEventListener('devicemotion', function(event) { // 获取加速度数据 var acceleration = event.accelerationIncludingGravity; // 计算加速度大小 var accelerationMagnitude = Math.sqrt( Math.pow(acceleration.x, 2) + Math.pow(acceleration.y, 2) + Math.pow(acceleration.z, 2) ); // 判断是否达到摇一摇条件 if (accelerationMagnitude > 20) { // 触发抽奖事件 lottery(); } }); // 抽奖函数 function lottery() { // 随机生成中奖结果（这里假设有10%的概率中奖） var isWin = Math.random() < 0.1; if (isWin) { // 中奖提示 document.getElementById('result').innerHTML = '恭喜你中奖了！'; } else { // 未中奖提示 document.getElementById('result').innerHTML = '很遗憾，未中奖！'; } } // 绑定抽奖按钮点击事件 document.getElementById('lotteryBtn').addEventListener('click', function() { // 触发抽奖事件 lottery(); }); ``` 在实现中，我们通过监听DeviceMotion事件来判断手机是否摇动，如果达到摇一摇条件，就触发抽奖事件。在抽奖事件中，我们通过随机生成中奖结果来模拟抽奖过程，并根据结果提示用户是否中奖。同时，我们也通过绑定抽奖按钮点击事件来实现手动抽奖的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值