JavaScript+H5实现微信摇一摇功能


Posted in Javascript onMay 23, 2018

项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动。也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对于我们的需求只需要摇一摇这个动作却是大相径庭。

其实H5+JavaScript写出来的页面,通过获取手机的屏幕长和宽,以及添加声音等就可以实现摇一摇的效果。 

JavaScript+H5实现微信摇一摇功能

第一步,实现手机摇动改变颜色

<!doctype html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 
 <title>HTML5 手机摇一摇</title> 
  <script type="text/javascript"> 
   var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff'); 
   if(window.DeviceMotionEvent) { 
    var speed = 25; 
    var x = y = z = lastX = lastY = lastZ = 0; 
    window.addEventListener('devicemotion', function(){ 
     var acceleration =event.accelerationIncludingGravity; 
     x = acceleration.x; 
     y = acceleration.y; 
     if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) { 
      document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6]; 
     } 
     lastX = x; 
     lastY = y; 
    }, false); 
   } 
  </script> 
 </head> 
 <body> 
    手机摇一摇,改变屏幕颜色。 
 </body> 
</html>

主要是手机的DeviceMotionEvent事件

第二步,微信摇一摇手势

相对于第一步就是增加了摇一摇手势,改变了摇动事件。在摇一摇动作之后再添加自己想要的方法即可,无论是想要进入下一个自己做的页面还是触发一个Controller事件都可以。

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"> 
 <title>摇一摇</title> 
 <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/shake.css" rel="external nofollow" > 
 <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/myDialog.css" rel="external nofollow" > 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/jquery.min.js"></script> 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/howler.min.js"></script> 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/fastclick.js"></script> 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/myDialog.js"></script> 
 
 <script type="text/javascript"> 
   var SHAKE_THRESHOLD = 1000; 
   var last_update = 0; 
   var last_time = 0; 
   var x; 
   var y; 
   var z; 
   var last_x; 
   var last_y; 
   var last_z; 
   var sound = new Howl({ urls: ['/shake/sound/shake_sound.mp3'] }).load(); 
   var findsound = new Howl({ urls: ['/shake/sound/shake_match.mp3'] }).load(); 
   var curTime; 
   var isShakeble = true; 
 
   function init() { 
    if (window.DeviceMotionEvent) { 
     window.addEventListener('devicemotion', deviceMotionHandler, false); 
    } else { 
     $("#cantshake").show(); 
    } 
   } 
 
   function deviceMotionHandler(eventData) { 
    curTime = new Date().getTime(); 
    var diffTime = curTime - last_update; 
    if (diffTime > 100) { 
     var acceleration = eventData.accelerationIncludingGravity; 
     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 && curTime - last_time > 1100 && $("#loading").attr('class') == "loading" && isShakeble) { 
      shake(); 
     } 
     last_x = x; 
     last_y = y; 
     last_z = z; 
    } 
   } 
 
   function shake() { 
    last_time = curTime; 
    $("#loading").attr('class','loading loading-show'); 
    $("#shakeup").animate({ top: "10%" }, 700, function () { 
     $("#shakeup").animate({ top: "25%" }, 700, function () { 
      $("#loading").attr('class','loading'); 
  
      findsound.play(); 
        //在此为摇动之后的事件,这里为调用ControllergoShakeResult方法 
      window.location.href = "shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}"; 
     }); 
    }); 
    $("#shakedown").animate({ top: "40%" }, 700, function () { 
     $("#shakedown").animate({ top: "25%" }, 700, function () { 
     }); 
    }); 
    sound.play(); 
   } 
 
   //各种初始化 
   $(document).ready(function () { 
    Howler.iOSAutoEnable = false; 
    FastClick.attach(document.body); 
    init(); 
   }); 
 </script> 
</head> 
<body> 
 <table id="container"> 
   <tbody> 
       <tr> 
        <td class="container" colspan="2"> 
       <div id="shake"> 
        <img src="plug-in/liuliangbao/shake/images/inner.png" class="inner"> 
        <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_up" id="shakeup"> 
        <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_down" id="shakedown"> 
         </div><div id="loading" class="loading"></div> 
        </td> 
     </tr> 
     <tr> 
      <td> 
       您今天还可以摇<input id="shakeCount" name="shakeCount" value="${leftcount}">次 
      </td> 
     </tr> 
     <tr> 
      <td>正确姿势:握紧手机,用力摇动3秒,苦练18年的麒麟臂终于派上用场了。</td> 
     </tr> 
    </tbody> 
 </table> 
</body> 
</html>

有时候真的可以换一种方法去实现自己想要的功能。附图:demo本来实现的效果是:

            JavaScript+H5实现微信摇一摇功能       JavaScript+H5实现微信摇一摇功能

改版之后

JavaScript+H5实现微信摇一摇功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
vue中$refs的用法及作用详解
Apr 24 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 #Javascript
vue动态路由配置及路由传参的方式
May 23 #Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 #Javascript
深入剖析Node.js cluster模块
May 23 #Javascript
Node.js进阶之核心模块https入门
May 23 #Javascript
使用 vue-i18n 切换中英文效果
May 23 #Javascript
centos 上快速搭建ghost博客方法分享
May 23 #Javascript
You might like
php数组去重的函数代码
2013/02/03 PHP
提高PHP编程效率的方法
2013/11/07 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python脚本调试工具安装过程
2021/01/11 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
大学生自荐书范文
2013/12/10 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
学校督导评估方案
2014/06/10 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android