JavaScript+H5怎么實現微信搖一搖功能

蝸牛 互聯網技術資訊 2022-04-26 52 0

這篇文章主要介紹了JavaScript+H5怎么實現微信搖一搖功能的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇JavaScript+H5怎么實現微信搖一搖功能文章都會有所收獲,下面我們一起來看看吧。

效果

JavaScript+H5怎么實現微信搖一搖功能  javascript 第1張

第一步,實現手機搖動改變顏色

<!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>

關于“JavaScript+H5怎么實現微信搖一搖功能”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“JavaScript+H5怎么實現微信搖一搖功能”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看