|
@@ -0,0 +1,673 @@
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
+<html lang="en">
|
|
|
|
+<head>
|
|
|
|
+ <meta charset="UTF-8" />
|
|
|
|
+ <meta
|
|
|
|
+ name="viewport"
|
|
|
|
+ content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
|
|
|
+ />
|
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
|
|
+ <title>抽大奖</title>
|
|
|
|
+ <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
|
|
|
|
+ <style>
|
|
|
|
+ html,
|
|
|
|
+ body {
|
|
|
|
+ height: 100%;
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue",
|
|
|
|
+ "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
|
|
|
|
+ Arial, sans-serif;
|
|
|
|
+ padding: 0;
|
|
|
|
+ margin: 0;
|
|
|
|
+ background-color: #ba3d26;
|
|
|
|
+ font-size: 100px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .main_box {
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bg {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .slider #slider {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 0.3rem;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 16%;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ font-size: 0.14rem;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 0.3rem;
|
|
|
|
+ color: #590700;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .slider #slider .slider-img {
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ width: 3rem;
|
|
|
|
+ height: 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ -webkit-transform: translateX(-50%);
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ left: 50%;
|
|
|
|
+ top: 0;
|
|
|
|
+ z-index: -1;
|
|
|
|
+ border-radius: 15px;
|
|
|
|
+ opacity: 0.72;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .slider #slider .slider-img.active {
|
|
|
|
+ z-index: auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .slider #slider .slider-nav-list {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 5%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ -webkit-transform: translateX(-50%);
|
|
|
|
+ list-style: none;
|
|
|
|
+ margin: 0;
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .slider #slider .slider-nav-list .nav-item {
|
|
|
|
+ width: 8px;
|
|
|
|
+ height: 8px;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background: #fff;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ margin: 0 8px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ -webkit-transition: all 0.5s linear;
|
|
|
|
+ transition: all 0.5s linear;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .slider #slider .slider-nav-list .nav-item.active {
|
|
|
|
+ margin-bottom: -1px;
|
|
|
|
+ width: 10px;
|
|
|
|
+ height: 10px;
|
|
|
|
+ background: #ff9800;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .time {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 22%;
|
|
|
|
+ width: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ display: -webkit-box;
|
|
|
|
+ display: -ms-flexbox;
|
|
|
|
+ display: flex;
|
|
|
|
+ -webkit-box-pack: justify;
|
|
|
|
+ -ms-flex-pack: justify;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ font-size: 0.12rem;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .time div {
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ padding: 0.05rem 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .time span {
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ color: #c13b22;
|
|
|
|
+ padding: 0.05rem;
|
|
|
|
+ border-radius: 0.05rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .zp_out {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 28%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ width: 63.5%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .zp_out .zp {
|
|
|
|
+ width: 100%;
|
|
|
|
+ -webkit-transition: -webkit-transform 5s ease;
|
|
|
|
+ transition: -webkit-transform 5s ease;
|
|
|
|
+ transition: transform 5s ease;
|
|
|
|
+ transition: transform 5s ease, -webkit-transform 5s ease;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .zz {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 35%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ font-size: 0.16rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .zz img {
|
|
|
|
+ width: 1rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .zz span {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 38%;
|
|
|
|
+ left: 55%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ width: 0.4rem;
|
|
|
|
+ color: white;
|
|
|
|
+ }
|
|
|
|
+ .index .zz .quantity {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 38%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ width: 45%;
|
|
|
|
+ color: white;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ .index .button {
|
|
|
|
+ font-size: 0.25rem;
|
|
|
|
+ color: #9b1800;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 61%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ }
|
|
|
|
+ #lottery_button{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .button img {
|
|
|
|
+ width: 3rem;
|
|
|
|
+ height: 0.5rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .button div {
|
|
|
|
+ position: absolute;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ line-height: 0.5rem;
|
|
|
|
+ width: 3rem;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .remaining {
|
|
|
|
+ display: -webkit-box;
|
|
|
|
+ display: -ms-flexbox;
|
|
|
|
+ display: flex;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 69%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ font-size: 0.15rem;
|
|
|
|
+ color: #ffd264;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .remaining .rmb {
|
|
|
|
+ background-color: #ffd264;
|
|
|
|
+ padding: 0.03rem 0.05rem;
|
|
|
|
+ border-radius: 100px;
|
|
|
|
+ color: #ba3d26;
|
|
|
|
+ margin-right: 0.1rem;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .remaining .remaining-rmb {
|
|
|
|
+ line-height: 0.25rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .rule {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 75%;
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .rule .rule_title {
|
|
|
|
+ display: -webkit-box;
|
|
|
|
+ display: -ms-flexbox;
|
|
|
|
+ display: flex;
|
|
|
|
+ -webkit-box-pack: justify;
|
|
|
|
+ -ms-flex-pack: justify;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 0 0.77rem;
|
|
|
|
+ font-size: 0.15rem;
|
|
|
|
+ color: #fabbaf;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .rule .rule_title div {
|
|
|
|
+ padding: 0 0.1rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .rule .rule_title .rule_title_active {
|
|
|
|
+ padding-bottom: 0.1rem;
|
|
|
|
+ border-bottom: 0.02rem solid #fabbaf;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .index .rule .rule_content {
|
|
|
|
+ padding: 0 0.325rem;
|
|
|
|
+ font-size: 0.12rem;
|
|
|
|
+ color: #fabbaf;
|
|
|
|
+ overflow-y: scroll;
|
|
|
|
+ height: 1.25rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .dialog {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
|
+ z-index: 9999;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .dialog .content {
|
|
|
|
+ position: fixed;
|
|
|
|
+ width: 90%;
|
|
|
|
+ height: 3.5rem;
|
|
|
|
+ top: 45%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
+ background: top/cover url(https://cdn-novel.iycdm.com/h5/activity-2019-05-30/get.png) no-repeat;
|
|
|
|
+ font-size: 0;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .dialog .content .winning-content {
|
|
|
|
+ top: 2rem;
|
|
|
|
+ font-size: 0.24rem;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ color: white;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .dialog .content .winning-content span {
|
|
|
|
+ color: #ffdc80;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .dialog .content .dialog_button {
|
|
|
|
+ width: 3rem;
|
|
|
|
+ height: 0.5rem;
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 2.6rem;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .dialog .content .dialog_close {
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 3.3rem;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ width: 0.3rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .wei-dialog {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
|
+ z-index: 9999;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .wei-dialog .content {
|
|
|
|
+ position: fixed;
|
|
|
|
+ width: 90%;
|
|
|
|
+ height: 2.4rem;
|
|
|
|
+ top: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
+ background: top/cover url(https://cdn-novel.iycdm.com/h5/activity-2019-05-30/failure.png) no-repeat;
|
|
|
|
+ font-size: 0;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .wei-dialog .content .wei-dialog_button {
|
|
|
|
+ width: 3rem;
|
|
|
|
+ height: 0.5rem;
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 1.55rem;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .wei-dialog .content .wei-dialog_close {
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 2.5rem;
|
|
|
|
+ left: 50%;
|
|
|
|
+ -webkit-transform: translate(-50%);
|
|
|
|
+ transform: translate(-50%);
|
|
|
|
+ width: 0.3rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .hide{
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ </style>
|
|
|
|
+</head>
|
|
|
|
+
|
|
|
|
+<body>
|
|
|
|
+<main class="main_box">
|
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/bg1.jpg" class="bg" />
|
|
|
|
+ <div class="index">
|
|
|
|
+ <div class="slider">
|
|
|
|
+ <div id="slider">
|
|
|
|
+ <div class="slider-img active">香草姑娘 6月13日 11:14 获得 1000书币</div>
|
|
|
|
+ <div class="slider-img">雨过天琴 6月13日 11: 01获得 年费vip会员</div>
|
|
|
|
+ {{--<div class="slider-img">培训师钮维娜 5月22日 10:05 获得 500元京东卡</div>
|
|
|
|
+ <div class="slider-img">香草姑娘 5月22日 6:11 获得1000书币</div>
|
|
|
|
+ <div class="slider-img">liwenwen 5月22日 14:48 获得1000书币</div>--}}
|
|
|
|
+ <!-- <ul class="slider-nav-list">
|
|
|
|
+ <li class="nav-item active"></li>
|
|
|
|
+ <li class="nav-item"></li>
|
|
|
|
+ <li class="nav-item"></li>
|
|
|
|
+ </ul> -->
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="time">
|
|
|
|
+ <span>活动倒计时</span>
|
|
|
|
+ <span id="hour">00</span>
|
|
|
|
+ <div>:</div>
|
|
|
|
+ <span id="minute">00</span>
|
|
|
|
+ <div>:</div>
|
|
|
|
+ <span id="second">00</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="zp_out">
|
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/plate.png" class="zp" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="zz">
|
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/point.png" />
|
|
|
|
+ <div class="quantity">
|
|
|
|
+ <div>剩余</div>
|
|
|
|
+ <div id="left_count">{{$count}}次</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="button">
|
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/button.png" />
|
|
|
|
+ @if($count >0)
|
|
|
|
+ <div id="lottery_button">立即抽奖</div>
|
|
|
|
+ @else
|
|
|
|
+ <div id="lottery_button">充值后才可抽奖</div>
|
|
|
|
+ @endif
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <div class="remaining">
|
|
|
|
+ <div class="rmb">¥</div>
|
|
|
|
+ <div class="remaining-rmb">奖金池剩余:{{$total}}书币</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="rule">
|
|
|
|
+ <div class="rule_title">
|
|
|
|
+ <div class="rule_title_bt rule_title_active" data-toggle="role">活动规则</div>
|
|
|
|
+ <div class="rule_title_bt" data-toggle="record">中奖记录</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="rule_content" >
|
|
|
|
+ <p>1、书币奖品实时到账;</p>
|
|
|
|
+ <p>
|
|
|
|
+ 2、抽到实物奖品用户需先填手机号和身份证信息,客服
|
|
|
|
+ 确认信息后将会在7个工作日寄出;
|
|
|
|
+ </p>
|
|
|
|
+ <p>
|
|
|
|
+ 3、抽奖机会必须在活动充值页面成功充值后获得,其余
|
|
|
|
+ 充值页面充值不会获得抽奖机会;
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="dialog" style="display:none">
|
|
|
|
+ <div class="content">
|
|
|
|
+ <div class="winning-content">恭喜您抽中<span id="price">0书币</span></div>
|
|
|
|
+ <div class="dialog_button"></div>
|
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/close.png" class="dialog_close" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="wei-dialog" style="display:none">
|
|
|
|
+ <div class="content">
|
|
|
|
+ <div class="wei-dialog_button"></div>
|
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/close.png" class="wei-dialog_close" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</main>
|
|
|
|
+<div class="hide" id="record">
|
|
|
|
+ @foreach($list as $item)
|
|
|
|
+ <p>{{$item->created_at}}------------------ {{$item->price}}书币</p>
|
|
|
|
+ @endforeach
|
|
|
|
+</div>
|
|
|
|
+<div class="hide" id="role">
|
|
|
|
+ <p>1、书币奖品实时到账;</p>
|
|
|
|
+ <p>
|
|
|
|
+ 2、抽到实物奖品用户需先填手机号和身份证信息,客服
|
|
|
|
+ 确认信息后将会在7个工作日寄出;
|
|
|
|
+ </p>
|
|
|
|
+ <p>
|
|
|
|
+ 3、抽奖机会必须在活动充值页面成功充值后获得,其余
|
|
|
|
+ 充值页面充值不会获得抽奖机会;
|
|
|
|
+ </p>
|
|
|
|
+</div>
|
|
|
|
+</body>
|
|
|
|
+<script>
|
|
|
|
+ //轮播
|
|
|
|
+ function carousel() {
|
|
|
|
+ var interval = 3000; //间隔多久轮换一次
|
|
|
|
+ var duration = 3000; //轮换动画的持续时间
|
|
|
|
+ var cur = 0; //当前图片的下标
|
|
|
|
+ var next = 1; //下一个图片的下标
|
|
|
|
+
|
|
|
|
+ // var li_list = $(".nav-item");
|
|
|
|
+ var img_list = $(".slider-img");
|
|
|
|
+ setInterval(function() {
|
|
|
|
+ sliderImg();
|
|
|
|
+ }, interval);
|
|
|
|
+
|
|
|
|
+ function sliderImg() {
|
|
|
|
+ //轮换导航
|
|
|
|
+ // li_list
|
|
|
|
+ // .eq(next)
|
|
|
|
+ // .addClass("active")
|
|
|
|
+ // .siblings()
|
|
|
|
+ // .removeClass("active");
|
|
|
|
+ //轮换图片
|
|
|
|
+ img_list.eq(cur).animate(
|
|
|
|
+ {
|
|
|
|
+ left: "-150%"
|
|
|
|
+ },
|
|
|
|
+ duration,
|
|
|
|
+ function() {
|
|
|
|
+ $(this).removeClass("active");
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ img_list
|
|
|
|
+ .eq(next)
|
|
|
|
+ .addClass("active")
|
|
|
|
+ .css("left", "150%")
|
|
|
|
+ .animate({ left: "50%" }, duration);
|
|
|
|
+
|
|
|
|
+ cur = next;
|
|
|
|
+ next++;
|
|
|
|
+ if (next >= img_list.length) {
|
|
|
|
+ next = 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ carousel();
|
|
|
|
+
|
|
|
|
+ var time_diff = {{$time_diff}}
|
|
|
|
+ time_diff = parseInt(time_diff);
|
|
|
|
+ var oHour = document.querySelector('#hour');
|
|
|
|
+ var oMinute = document.querySelector('#minute');
|
|
|
|
+ var oSecond = document.querySelector('#second');
|
|
|
|
+ function times() {
|
|
|
|
+ time_diff--;
|
|
|
|
+ day = Math.floor(time_diff/86400);
|
|
|
|
+ hour = Math.floor((time_diff-day*86400)/3600)+day*24;
|
|
|
|
+ minute = Math.floor((time_diff - hour * 3600) / 60);
|
|
|
|
+ second = time_diff - hour * 3600 - minute * 60;
|
|
|
|
+ oHour.innerHTML = hour<10?hour:hour;
|
|
|
|
+ oMinute.innerHTML = minute<10?minute:minute;
|
|
|
|
+ oSecond.innerHTML = second<10?second:second;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ times();
|
|
|
|
+
|
|
|
|
+ var timeInterval = setInterval(function () {
|
|
|
|
+ if(time_diff<=0){
|
|
|
|
+ clearInterval(timeInterval);
|
|
|
|
+ }else{
|
|
|
|
+ times()
|
|
|
|
+ }
|
|
|
|
+ },1000)
|
|
|
|
+
|
|
|
|
+ //活动规则点击
|
|
|
|
+ $(function() {
|
|
|
|
+ $(".rule_title_bt").click(function(event) {
|
|
|
|
+ $(this)
|
|
|
|
+ .addClass("rule_title_bt")
|
|
|
|
+ .addClass("rule_title_active");
|
|
|
|
+ $(this)
|
|
|
|
+ .siblings()
|
|
|
|
+ .removeClass("rule_title_active");
|
|
|
|
+ if($(this).data('toggle') == 'role'){
|
|
|
|
+ $('.rule_content').html( $('#role').html() );
|
|
|
|
+ }else{
|
|
|
|
+ $('.rule_content').html( $('#record').html() );
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ var lasttime; //第一次点击时间
|
|
|
|
+ var rotatesize = 0; //旋转角度
|
|
|
|
+ var count = {{$count}}
|
|
|
|
+ count = parseInt(count);
|
|
|
|
+ //活动规则点击
|
|
|
|
+ var canClick = true;
|
|
|
|
+ $(function() {
|
|
|
|
+ $(".button").click(function(event) {
|
|
|
|
+ if(count <=0){
|
|
|
|
+ location.href='/activity/huaweiActivity';
|
|
|
|
+ return ;
|
|
|
|
+ }
|
|
|
|
+ if(time_diff<=0){
|
|
|
|
+ console.log('time_diff<=0---');
|
|
|
|
+ return ;
|
|
|
|
+ }
|
|
|
|
+ if(!canClick) return ;
|
|
|
|
+ canClick = false;
|
|
|
|
+ $.ajax({
|
|
|
|
+ 'url':'/api/activity/huaweiLottery',
|
|
|
|
+ 'type':'post',
|
|
|
|
+ 'success':function(res){
|
|
|
|
+ if (lasttime && Date.parse(new Date()) - lasttime <= 5000) {
|
|
|
|
+ //旋转时间5S在样式中修改后再修改间隔时间
|
|
|
|
+ console.log("还在旋转");
|
|
|
|
+ return;
|
|
|
|
+ } else {
|
|
|
|
+ lasttime = Date.parse(new Date());
|
|
|
|
+ //点击时间赋值
|
|
|
|
+ var m = res.data.rotate;
|
|
|
|
+ var price = res.data.price;
|
|
|
|
+ price = parseInt(price);
|
|
|
|
+ //获取旋转角度 逆时针旋转
|
|
|
|
+ $(".zp").css({ transform: "rotate(" + m + "deg)" });
|
|
|
|
+ //旋转
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ if(price >0){
|
|
|
|
+ $('#price').html(price+'书币');
|
|
|
|
+ document.querySelector(".dialog").style.display = "";
|
|
|
|
+ }else{
|
|
|
|
+ document.querySelector(".wei-dialog").style.display = "";
|
|
|
|
+ }
|
|
|
|
+ //旋转完毕后弹窗
|
|
|
|
+ console.log('over');
|
|
|
|
+ count--;
|
|
|
|
+ $('#left_count').html(count+'次');
|
|
|
|
+ if(count<=0){
|
|
|
|
+ $('#lottery_button').html('充值后才可抽奖');
|
|
|
|
+ }
|
|
|
|
+ canClick = true;
|
|
|
|
+ }, 5000);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ //获取旋转角度(随机数)
|
|
|
|
+ function getnub(x, y) {
|
|
|
|
+ /*//角度需大于x小于y
|
|
|
|
+ var m = Math.ceil(Math.random() * 10000);
|
|
|
|
+ var n = rotatesize + m;
|
|
|
|
+ var angle = n % 360;
|
|
|
|
+ if (m < 5000 || (angle < x + 10 || angle > y - 10)) {
|
|
|
|
+ return this.getnub(x, y);
|
|
|
|
+ } else {
|
|
|
|
+ rotatesize = n;
|
|
|
|
+ return n;
|
|
|
|
+ }*/
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function resetPoint() {
|
|
|
|
+ $(".zp").css({transition:"none", transform: "rotate(0deg)" });
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
+ $(".zp").css({transition:"transform 5s ease, -webkit-transform 5s ease"});
|
|
|
|
+ },200);
|
|
|
|
+ }
|
|
|
|
+ //奖励弹窗点击关闭
|
|
|
|
+ $(function() {
|
|
|
|
+ $(".dialog_button").click(function(event) {
|
|
|
|
+ document.querySelector(".dialog").style.display = "none";
|
|
|
|
+ //transition: transform 5s ease, -webkit-transform 5s ease;
|
|
|
|
+ $('#price').html('0书币');
|
|
|
|
+ resetPoint()
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ $(function() {
|
|
|
|
+ $(".dialog_close").click(function(event) {
|
|
|
|
+ document.querySelector(".dialog").style.display = "none";
|
|
|
|
+ $('#price').html('0书币');
|
|
|
|
+ resetPoint()
|
|
|
|
+
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ $(function() {
|
|
|
|
+ $(".wei-dialog_button").click(function(event) {
|
|
|
|
+ document.querySelector(".wei-dialog").style.display = "none";
|
|
|
|
+ resetPoint()
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ $(function() {
|
|
|
|
+ $(".wei-dialog_close").click(function(event) {
|
|
|
|
+ document.querySelector(".wei-dialog").style.display = "none";
|
|
|
|
+ resetPoint()
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+</html>
|