<#include "/wap/include/_layout_head.html">
<@layout_head>
<title>幸运九宫格</title>
</@layout_head>
<#include "/wap/include/_layout_nav.html">
<style type="text/css">
a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{
margin: 0;
border: 0;
padding: 0;
font-style: normal;
color: #323232;
box-sizing: border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
html,body{
background: #fff;
}
ul{
width: 320px;
margin:20px auto;
text-decoration: none;
list-style-type: none;
padding-bottom: 1%;
}
ul:after{
content: "";
display: block;
width: 100%;
height: 0;
clear: both;
}
.video_list{
margin:0 auto;
width:320px;
height:294px;
/* background:url('${ossPath!''}/upload/basActivity/12/wk.png') */
}
.video_list>li{
float: left;
width: 95px;
text-align: center;
padding-top: 91px;
margin-left: 0px;
margin-top: 0px;
position: relative;
/* border-radius: 5px; */
}
.video_list>li>div{
position: absolute;
left: 0;
top: 0;
width:95px;
height:91px;
background:url('${ossPath!''}/upload/basActivity/12/jgg1.png');
}
.video_list>li>div>span{
display: inline-block;
margin-top:30px;
line-height:20px;
width:80%;
}
#btnwrap{
width: 70%;
margin:10px auto;
text-align: center;
}
#btnwrap input{
width: 100%;
height: 35px;
margin-bottom: 10px;
border-radius: 5px;
border:1px solid orange;
background-color: #fff;
}
#btnwrap input:hover{
background-color: orange;
}
.login_div_shade {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
background: rgba(0,0,0,0.8);
display: none;
z-index: 9999999;
}
.login_div.login {
position: absolute;
width: 300px;
height: 216px;
overflow: hidden;
top: 50%;
margin-top: -174px;
left: 50%;
margin-left:-150px;
z-index: 99999;
min-height: 216px;
background:url('${ossPath!''}/upload/basActivity/12/award_text.png');
}
.login {
width: 100%;
min-height: 216px;
/* background-size: cover; */
}
.login_div.login .box-login {
margin: 0;
}
.login .box-login {
width: 300px;
position: relative;
/* border: solid 1px #aaaaaa; */
float: right;
margin-top: 160px;
margin-right: 60px;
/* background: #f6f6f6; */
}
.login_div.login .box-close {
font-size: 44px;
line-height: 44px;
}
.login .box-login .ico-login {
width: 44px;
height: 44px;
position: absolute;
right: 0;
top: 0;
z-index: 10;
cursor: pointer;
}
.login .tab {
width: 283px;
min-height: 320px;
text-align: center;
padding-top: 25px;
margin: 0 auto;
}
</style>
<div style="background:#33CC99 url('${ossPath!''}/upload/basActivity/12/bg.jpg');">
<img src="${ossPath!''}/upload/basActivity/12/bt.png" width="320" style="margin:0 auto;" />
<div style="clear:both;overflow:hidden;"></div>
<div style="width:320px; height:294px;margin:0 auto; background:url('${ossPath!''}/upload/basActivity/12/wk.png')">
<ul class="video_list" style="padding-top:10px;padding-left:16px;">
<li><div><span>灵山门票+净素自助餐</span></div></li>
<li><div><span>拈花湾+电瓶车</span></div></li>
<li><div><span>灵山精舍+灵山双人门票</span></div></li>
<li><div><span>2017双园年卡</span></div></li>
<li><div><span style="margin-top:20px;">2017拈花湾单园年卡（亲子 ）</span></div></li>
<li><div><span>客栈</span></div></li>
<li><div><span>灵山免票</span></div></li>
<li><div><span>拈花湾免票</span></div></li>
<li><div><span>客栈免费住宿一晚</span></div></li>
</ul>
</div>
<div id="btnwrap" style="width:260px;margin:0 auto;margin-top:20px;">
<div style="float:left;">
<input type="button" id="btn1" style="background: url('${ossPath!''}/upload/basActivity/12/start.png');width:120px;border:0;display:block"/>
<input type="button" id="btn2" style="background: url('${ossPath!''}/upload/basActivity/12/stop.png');width:120px;border:0;display:none;"/>
</div>
<div style="float:right;">
<input type="button" id="btnaward" style="background: url('${ossPath!''}/upload/basActivity/12/award.png');width:120px;border:0;"/>
</div>
</div>
<div style="clear:both;overflow:hidden;"></div>
<div style="margin:0 auto;margin-top:20px;width:320px;height:247px;background:url('${ossPath!''}/upload/basActivity/12/guize.png') ">
</div>
<br/><br/>
</div>
<div class="login_div_shade" >
<div class="login login_div">
<div class="box-login">
<div class="box-close ico-login" onclick="hideLoginDialog()" >
<img src="${ossPath!''}/upload/basActivity/12/btn_03.png" style="margin-top:-8px;" />
</div>
<div class="tab tab-login" id="log" style="display: block;">
<div style="width: 100%;">
<div style="height:60px;"> </div>
<div style="color:#fff;">XXXXXXXXXXXXXXXXXXXXx</div>
<div style="height:30px;"> </div>
<input type="button" style="cursor:pointer; width:120px;height:47px;background:url('${ossPath!''}/upload/basActivity/12/buy.png') " />
</div>
</div>
</div>
</div>
</div>
<script>
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oUl = document.querySelector(".video_list");
var oLi = oUl.getElementsByTagName('li');
//获取随机数
function rands(n){
var rands = Math.floor(Math.random()*n);
return rands
}
//去重
function checkArrIn(rand,array){
if(array.indexOf(rand) > -1){
return true
}
return false;
}
function fn(n,value) {
var arr = [];
var isNum = !isNaN(Number(n));//判断n是不是一个数字，包含字符串类型的数字
// var isRandOk = (n >= min && n <= max && n <= (max - min)) ? true : false;//判断n的取值是否符合要求
if (n) {
for (var i = 0; i < n; i++) {
var rand = rands(value);
if (checkArrIn(rand, arr)) {
i--
} else {
arr.push(rand)
}
}
}
return arr;
}
//获取随机的格子标签
function randdiv(){
var ran = fn(1,9);
var arry = [];
for (var i = 0; i < 1; i++){
arry.push(oLi[ran[i]].getElementsByTagName('div')[0])
}
return arry;
}
//获取随机颜色值：
var timer;
var nowBoxIndex = 0;
var prizeBoxIndex = 0
oBtn1.onclick = function(){
// console.log(randdiv())
oBtn1.style.display = "none";
oBtn2.style.display = "block";
oBtn2.disabled="disabled";
getPrizeIndex();//获取得奖项
clearInterval(timer);
timer = setInterval(function(){
// 随机格子
var box = randdiv();
for (var i = 0; i < oLi.length; i++) {
//oLi[i].getElementsByTagName('div')[0].style.background = "#fdb274";
oLi[i].getElementsByTagName('div')[0].style.background = "url('${ossPath!''}/upload/basActivity/12/jgg1.png')";
}
// console.log(color)
for (var i = 0; i < 1; i++) {
//var color = fn(3,255);
//box[i].style.background = "rgb("+color[0]+','+color[1]+','+color[2]+")";
box[i].style.background = "url('${ossPath!''}/upload/basActivity/12/jjg2.png')";
nowBoxIndex = i;
}
},50);
}
//ajax 获取得奖项目
function getPrizeIndex(){
prizeBoxIndex = 7; // 获奖的id
oBtn2.disabled="";
// ajax
}
oBtn2.onclick = function(){
for (var i = 0; i < oLi.length; i++) {
oLi[i].getElementsByTagName('div')[0].style.background = "url('${ossPath!''}/upload/basActivity/12/jgg4.png')";
}
oLi[prizeBoxIndex].getElementsByTagName('div')[0].style.background = "url('${ossPath!''}/upload/basActivity/12/jjg2.png')";
oLi[prizeBoxIndex].getElementsByTagName('div')[0].style.cursor="pointer";
clearInterval(timer);
oBtn1.style.display = "block";
oBtn2.style.display = "none";
showLoginDialog();
}
}
$('.login_div .menu-login em').hover(function(){
$(this).addClass('cur').siblings().removeClass('cur');
var index=$('.login_div .menu-login em').index(this);
$('.login_div .form-login').eq(index).show().siblings().hide();
});
function showLoginDialog(){
$('.login_div_shade').show();
}
function hideLoginDialog(){
$('.login_div_shade').hide();
}
</script>
