微信摇一摇页面代码

来源：互联网发布：php返回ajax请求编辑：程序博客网时间：2024/06/06 16:49

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String userid=new String(request.getParameter("userid").getBytes("ISO-8859-1"),"UTF-8");
%>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<meta name="apple-touch-fullscreen" content="yes">
<meta content="target-densitydpi=device-dpi,width=640,user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="css/style.css">

<title>摇一摇</title>
</head>
<body >
<div class="main">
<div class="content-box">

<div class="overlay" id="overlay-help">
<div class="pop-up rule-box"> <a href="#" class="rule-close"></a>
<h2>活动规则</h2>
<p>1.摇晃手机参与抽奖。</p>
<p>2.每个用户有3次抽奖机会。</p>
<h2>奖项设置</h2>
<p>一等奖:电脑（1台）</p>
<p>二等奖：手机（3部）</p>
<p>三等奖：鼠标（10个）</p>
<br />
<br />
<a href="#" class="btn">我知道了</a> </div>
</div>


<div class="overlay" id="overlay-prize">
<div class="prize-box">
<div class="content"><a href="#" class="rule-close" style="top:-38px;"></a>
<p>人品大爆发，摇到了</p>
<p>iPhone5s一部，是不是好开</p>
<p>心呀，怒赞一个！</p>
<div class="intro clear"> <img src="images/phone.png">
<div>
<h3>二等奖：手机</h3>
<span>领奖方式：在下方填写您的信</span><span>息，工作人员会尽快联系您的。</span></div>
</div>
<div class="info">
<h3>请输入个人信息：</h3>
<ul>
<li>
<label>姓名</label>
<input type="text">
</li>
<li>
<label>手机</label>
<input type="text">
</li>
<li>
<label>地址</label>
<input type="text">
</li>
</ul>
<div class="btn-box"><a href="#" class="btn" id="submit-btn">     提交     </a> </div>
</div>
</div>
</div>
</div>



<div class="overlay" id="pop-succeed">
<div class="pop-up rule-box"><a href="#" class="rule-close"></a>
<h2>温馨提示</h2>
<br />
<br />
<div id="shaketext"></div>
<br />
<br />
<br />
<a href="#" class="btn again" style="margin-right:20px;">再玩一次</a><a href="#" class="btn share">   分享   </a> </div>
</div>



<div class="overlay" id="pop-share"> <img src="images/430-290.png" class="share-pic"> </div>



<div class="clear top-nav"><a href="#" class="lf helf"><img src="images/help.png"></a><a href="#" class="lr service"><img src="images/service.png"><span class="prize"></span></a></div>


<div class="shake-box">
<div class="shake-no"><img src="images/shake-no.jpg"></div>
<div class="shake-yes"><img src="images/shake-yes.gif"></div>
<div class="btn-dynamic"><a href="javascript:history.go(-1)">返回</a></div>
</div>
</div>


</div>
<audio src="images/voice.mp3" controls preload="metadata" id="video1" style="display:none; visibility:hidden; width:0px; height:0px; background:none;" ></audio>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var userid="<%=userid%>";
//overlay
var bz=0;

$(".helf").on("click",function(){
$("#overlay-help").show();
});
$(".rule-close,.btn").on("click",function(){
$("#overlay-help,#overlay-prize,#pop-succeed").hide();
bz=0;
});

$(".service").on("click",function(){
$.post('../../cmi/shakeAction.ered?reqCode=selectMyPrize&unlogin=1',
{userid :userid},
function(data){
if(data!=""){
$("#shaketext").html("<p>您的奖品有："+data+"</p> <p>赶快点击分享跟小伙伴们炫耀一下吧。</p>");
$("#pop-succeed").show();
}else{
$("#shaketext").html("<p>您暂无奖品！</p> <p>赶快摇一摇，大大的惊喜等着您额。</p>");
$("#pop-succeed").show();
}

});
});
$("#submit-btn").on("click",function(){
$("#overlay-prize").hide();
$("#pop-succeed").show();
});
$(".again").on("click",function(){
$("#pop-succeed").hide();
bz=0;
});
$(".share").on("click",function(){
$("#pop-succeed").hide();
$("#pop-share").show();
bz=0;
});
$("#pop-share").on("click",function(){
$(this).hide();
bz=0;
});

if (window.DeviceMotionEvent) {

window.addEventListener('devicemotion',deviceMotionHandler, false);

}


var SHAKE_THRESHOLD = 3000;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;

function deviceMotionHandler(eventData) {
if(bz!=0){
return;
}
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update)> 300) {

var diffTime = curTime -last_update;
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 * 30000;

if (speed > SHAKE_THRESHOLD) {

bz=1;
$(".shake-no").css("display","none");//修改display属性为none
$(".shake-yes").css("display","block");//修改display属性为block
//添加逻辑处理
$.post('../../cmi/shakeAction.ered?reqCode=getShakeInfo&unlogin=1',
{userid :userid},
function(data){
if(data!=""){
if(data=="3"){
// 摇一摇执行播放那个函数
playVid();
$("#shaketext").html("<p>您已经超过次数限制，谢谢您的参与。</p> <p>赶快点击分享跟小伙伴们炫耀一下吧！</p>");
$("#pop-succeed").show();

}else{

// 摇一摇执行播放那个函数
playVid();
$("#shaketext").html("<p>您摇到的奖品为："+data+"</p> <p>赶快点击分享跟小伙伴们炫耀一下吧！</p>");
$("#pop-succeed").show();
}

}else{
playVid();
$("#shaketext").html("<p>谢谢您的参与</p> <p>加油，使劲摇，摇出惊喜额！</p>");
$("#pop-succeed").show();
}
$(".shake-no").css("display","block");//修改display属性为none
$(".shake-yes").css("display","none");//修改display属性为block

});

//$("#overlay-prize").show();
}
last_x = x;
last_y = y;
last_z = z;
}
}
function playVid()
{
$(document).on('touchstart', function() {
myVideo.load()
})
var myVideo = document.getElementById("video1");
myVideo.play();
}
});
</script>
</body>
</html>

0 0