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 相关文章推荐
validator验证控件使用代码
Nov 23 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
javaScript封装的各种写法
Aug 14 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
如何使用vue3打造一个物料库
May 08 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
基于文本的留言簿
2006/10/09 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
php错误日志简单配置方法
2016/07/11 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
JS常用表单验证方法总结
2014/05/22 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
js实现简单的验证码
2015/12/25 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
基于python实现删除指定文件类型
2020/07/21 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
介绍一下#error预处理
2015/09/25 面试题
经典C++面试题一
2016/11/06 面试题
餐饮管理自我介绍信
2014/01/15 职场文书
调解员先进事迹材料
2014/02/07 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
机关职员工作检讨书
2014/10/23 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
导游词之江西赣州
2019/10/15 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
如何用python清洗文件中的数据
2021/06/18 Python
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js