传闻不做小程序的_JavaScript+H5完成微信摇一摇功用

日期:2021-01-08 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

JavaScript+H5实现微信摇一摇功能       这篇文章主要为大家详细介绍了JavaScript+H5实现微信摇一摇功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

 !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 
 td colspan="2" 
 div id="shake" 
 img src="plug-in/liuliangbao/shake/images/inner.png" 
 img src="plug-in/liuliangbao/shake/images/shake.png" id="shakeup" 
 img src="plug-in/liuliangbao/shake/images/shake.png" id="shakedown" 
 /div div id="loading" /div 
 /td 
 /tr 
 您今天还可以摇 input id="shakeCount" name="shakeCount" value="${leftcount}" 次 
 /td 
 /tr 
 td 正确姿势:握紧手机,用力摇动3秒,苦练18年的麒麟臂终于派上用场了。 /td 
 /tr 
 /tbody 
 /table 
 /body 
 /html 

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

                  

改版之后

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