JavaScript+H5如何實(shí)現(xiàn)微信搖一搖功能
這篇文章主要介紹JavaScript+H5如何實(shí)現(xiàn)微信搖一搖功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了青云譜免費(fèi)建站歡迎大家使用！
項(xiàng)目終于如約上線，但是在春節(jié)前又有一個(gè)新的活動(dòng)要做，類(lèi)似微信的搖一搖活動(dòng)。也一直在做微信公眾號(hào)的東西，但是要調(diào)用微信搖一搖的接口還是有些困難，因?yàn)橹惶峁┝藫u一搖周邊，附近的人以及一系列的紅包頁(yè)面，相對(duì)于我們的需求只需要搖一搖這個(gè)動(dòng)作卻是大相徑庭。
其實(shí)H5+JavaScript寫(xiě)出來(lái)的頁(yè)面，通過(guò)獲取手機(jī)的屏幕長(zhǎng)和寬，以及添加聲音等就可以實(shí)現(xiàn)搖一搖的效果。
第一步，實(shí)現(xiàn)手機(jī)搖動(dòng)改變顏色
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>HTML5 手機(jī)搖一搖</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>
手機(jī)搖一搖，改變屏幕顏色。
</body>
</html>主要是手機(jī)的DeviceMotionEvent事件
第二步，微信搖一搖手勢(shì)
相對(duì)于第一步就是增加了搖一搖手勢(shì)，改變了搖動(dòng)事件。在搖一搖動(dòng)作之后再添加自己想要的方法即可，無(wú)論是想要進(jìn)入下一個(gè)自己做的頁(yè)面還是觸發(fā)一個(gè)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();
//在此為搖動(dòng)之后的事件，這里為調(diào)用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>正確姿勢(shì)：握緊手機(jī)，用力搖動(dòng)3秒，苦練18年的麒麟臂終于派上用場(chǎng)了。</td>
</tr>
</tbody>
</table>
</body>
</html>有時(shí)候真的可以換一種方法去實(shí)現(xiàn)自己想要的功能。附圖：demo本來(lái)實(shí)現(xiàn)的效果是:
改版之后
以上是“JavaScript+H5如何實(shí)現(xiàn)微信搖一搖功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
本文題目：JavaScript+H5如何實(shí)現(xiàn)微信搖一搖功能
轉(zhuǎn)載來(lái)源：http://jinyejixie.com/article12/posgdc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、搜索引擎優(yōu)化、面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、虛擬主機(jī)、軟件開(kāi)發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 企業(yè)網(wǎng)站改版的頻率對(duì)網(wǎng)站影響有多大 2022-11-13
- 網(wǎng)站改版怎樣做才能更平穩(wěn)？ 2015-07-27
- 網(wǎng)站改版應(yīng)該要注意的常見(jiàn)事項(xiàng) 2014-12-23
- 企業(yè)怎么網(wǎng)站改版？ 2019-07-26
- 企業(yè)網(wǎng)站改版優(yōu)化要注意哪些問(wèn)題? 2023-03-29
- 網(wǎng)站改版應(yīng)該注意哪些關(guān)鍵點(diǎn) 2023-03-10
- 淺談西匯電器網(wǎng)站改版的見(jiàn)解 2023-02-14
- 網(wǎng)站改版前的注意事項(xiàng)有哪些？ 2022-05-27
- 如何避免因網(wǎng)站改版帶來(lái)的降權(quán)等問(wèn)題 2022-08-04
- 上海做網(wǎng)站/網(wǎng)站設(shè)計(jì)/網(wǎng)站改版/企業(yè)網(wǎng)站/創(chuàng)新互聯(lián) 2021-06-26
- 成都網(wǎng)站建設(shè)：進(jìn)行企業(yè)網(wǎng)站改版重要性 2017-01-10
- 網(wǎng)站改版了，權(quán)重和排名如何自處？ 2022-05-05