├── img
└── qrcode.png
├── index.html
├── js
└── shake.js
├── music
├── yao.mp3
└── zhong.mp3
└── readme.md
/img/qrcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jayin/demo-wx-shake/7a507e0309838cceedb3a59774f57c3baa90f797/img/qrcode.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 微信摇一摇demo
8 |
9 |
10 |
11 |
12 | 请摇一摇, 50%几率出现中奖声音
13 |
14 |
15 |
17 |
19 |
20 |
22 |
23 |
24 |
25 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/js/shake.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Author: Alex Gibson
3 | * https://github.com/alexgibson/shake.js
4 | * License: MIT license
5 | */
6 |
7 | (function(global, factory) {
8 | if (typeof define === 'function' && define.amd) {
9 | define(function() {
10 | return factory(global, global.document);
11 | });
12 | } else if (typeof module !== 'undefined' && module.exports) {
13 | module.exports = factory(global, global.document);
14 | } else {
15 | global.Shake = factory(global, global.document);
16 | }
17 | } (typeof window !== 'undefined' ? window : this, function (window, document) {
18 |
19 | 'use strict';
20 |
21 | function Shake(options) {
22 | //feature detect
23 | this.hasDeviceMotion = 'ondevicemotion' in window;
24 |
25 | this.options = {
26 | threshold: 15, //default velocity threshold for shake to register
27 | timeout: 1000 //default interval between events
28 | };
29 |
30 | if (typeof options === 'object') {
31 | for (var i in options) {
32 | if (options.hasOwnProperty(i)) {
33 | this.options[i] = options[i];
34 | }
35 | }
36 | }
37 |
38 | //use date to prevent multiple shakes firing
39 | this.lastTime = new Date();
40 |
41 | //accelerometer values
42 | this.lastX = null;
43 | this.lastY = null;
44 | this.lastZ = null;
45 |
46 | //create custom event
47 | if (typeof document.CustomEvent === 'function') {
48 | this.event = new document.CustomEvent('shake', {
49 | bubbles: true,
50 | cancelable: true
51 | });
52 | } else if (typeof document.createEvent === 'function') {
53 | this.event = document.createEvent('Event');
54 | this.event.initEvent('shake', true, true);
55 | } else {
56 | return false;
57 | }
58 | }
59 |
60 | //reset timer values
61 | Shake.prototype.reset = function () {
62 | this.lastTime = new Date();
63 | this.lastX = null;
64 | this.lastY = null;
65 | this.lastZ = null;
66 | };
67 |
68 | //start listening for devicemotion
69 | Shake.prototype.start = function () {
70 | this.reset();
71 | if (this.hasDeviceMotion) {
72 | window.addEventListener('devicemotion', this, false);
73 | }
74 | };
75 |
76 | //stop listening for devicemotion
77 | Shake.prototype.stop = function () {
78 | if (this.hasDeviceMotion) {
79 | window.removeEventListener('devicemotion', this, false);
80 | }
81 | this.reset();
82 | };
83 |
84 | //calculates if shake did occur
85 | Shake.prototype.devicemotion = function (e) {
86 | var current = e.accelerationIncludingGravity;
87 | var currentTime;
88 | var timeDifference;
89 | var deltaX = 0;
90 | var deltaY = 0;
91 | var deltaZ = 0;
92 |
93 | if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
94 | this.lastX = current.x;
95 | this.lastY = current.y;
96 | this.lastZ = current.z;
97 | return;
98 | }
99 |
100 | deltaX = Math.abs(this.lastX - current.x);
101 | deltaY = Math.abs(this.lastY - current.y);
102 | deltaZ = Math.abs(this.lastZ - current.z);
103 |
104 | 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))) {
105 | //calculate time in milliseconds since last shake registered
106 | currentTime = new Date();
107 | timeDifference = currentTime.getTime() - this.lastTime.getTime();
108 |
109 | if (timeDifference > this.options.timeout) {
110 | window.dispatchEvent(this.event);
111 | this.lastTime = new Date();
112 | }
113 | }
114 |
115 | this.lastX = current.x;
116 | this.lastY = current.y;
117 | this.lastZ = current.z;
118 |
119 | };
120 |
121 | //event handler
122 | Shake.prototype.handleEvent = function (e) {
123 | if (typeof (this[e.type]) === 'function') {
124 | return this[e.type](e);
125 | }
126 | };
127 |
128 | return Shake;
129 | }));
130 |
--------------------------------------------------------------------------------
/music/yao.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jayin/demo-wx-shake/7a507e0309838cceedb3a59774f57c3baa90f797/music/yao.mp3
--------------------------------------------------------------------------------
/music/zhong.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jayin/demo-wx-shake/7a507e0309838cceedb3a59774f57c3baa90f797/music/zhong.mp3
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | 微信摇一摇
2 | =========
3 |
4 | 扫一扫尝试
5 | 
6 |
--------------------------------------------------------------------------------