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中的运用上部
Nov 20 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
详解vue v-model
Aug 31 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
jquery 指南/入门基础
2007/11/30 Javascript
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python刷投票的脚本实现代码
2014/11/08 Python
python安装twisted的问题解析
2018/08/21 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
如何做好总经理助理
2013/11/12 职场文书
教师个人鉴定材料
2014/02/08 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
秋季运动会加油词
2015/07/18 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript