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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
Javascript动画效果(1)
Oct 11 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
微信小程序中setInterval的使用方法
Sep 29 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
vuex入门最详细整理
Mar 04 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
浅谈使用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
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
javascript中对对层的控制
2006/12/29 Javascript
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
微信小程序 动画的简单实例
2017/10/12 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python的多重继承的理解
2017/08/06 Python
django自带调试服务器的使用详解
2019/08/29 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
财务人员个人工作总结
2015/02/27 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript