zhuishuyun
/
zhuishuyun_quickapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>"双十一" 充值狂欢</title>
    <style>
        html,
        body {
            margin: 0 auto;
            padding: 0;
            max-width: 450px;
            font-size: 100px;
        }

        html {
            background: #cf1e18;
        }

        .main_box {
            font-size: 0;
            position: relative;
        }

        .main_box img {
            width: 100%;
        }

        .recharge_box_one {
            width: 100%;
        }

        .countdown {
            font-size: .16rem;
            color: #fff;
            width: 80%;
            margin: 0 auto .2rem;
            padding: .05rem 0;
            border: 1px solid #fff;
            border-radius: 20px;
            text-align: center;
        }

        .recharge_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            width: 95%;
            height: .6rem;
            border-radius: 4px;
            margin: 0 auto .2rem;
        }

        .recharge_item p {
            flex: 1;
            background: #fff;
            font-size: .18rem;
            height: 100%;
            line-height: .6rem;
            padding: 0 .1rem;
            color: #333;
        }

        .recharge_item span {
            color: #cf1e18;
            font-weight: bold;
        }

        .recharge_item a {
            width: 1rem;
            -webkit-tap-highlight-color: transparent;
        }

        .recharge_item img {
            width: 100%;
        }

        .d_none {
            display: none;
        }
    </style>
</head>
<body>
<main class="main_box">
    <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-07/banner.jpg" alt="">
    <div class="recharge_box_one">
        <!-- 活动未开始 使用undone.png 开始后 使用doing.png 结束 使用over.png -->
        <p class="countdown">狂欢倒计时：<span id="day">{{$time['day']}}</span>天<span id="hour">{{$time['hour']}}</span>小时<span id="minute">{{$time['minute']}}</span>分<span id="second">{{$time['second']}}</span>秒</p>
        @foreach($url as $v)
            <div class="recharge_item">
                <p>充<span>{{$v['price']}}</span>送<span>{{$v['given']}}</span>得<span>{{$v['get']}}</span>书币</p>
                @if($code == 1)
                    <a href="{{$v['url']}}" class="paying">
                        <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-07/doing.png" alt="" class="payimg">
                    </a>
                @elseif($code == -1)
                    <!-- 未开始-->
                    <a href="#">
                        <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-07/undone.png" alt="">
                    </a>
                @elseif($code == -2)
                    <!-- 结束-->
                    <a href="#">
                        <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-07/over.png" alt="">
                    </a>
                @endif
            </div>
        @endforeach
    </div>
    <!-- 新用户使用rule_first.png -->
    @if($user_charge_count>0)
        <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-07/rule.jpg" alt="">
        @else
        <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-07/rule_first.jpg" alt="">
    @endif

</main>
</body>
<script>
    var time_diff = {{$time_diff}}
    var status = {{$code}}
    var p = document.querySelectorAll('.paying');
    var payimg = document.querySelectorAll('.payimg');
    var i = 0;
    var j = 0;
    status  =parseInt(status);
    time_diff = parseInt(time_diff);
    function times() {
        var oDay = document.querySelector('#day');
        var oHour = document.querySelector('#hour');
        var oMinute = document.querySelector('#minute');
        var oSecond = document.querySelector('#second');
        time_diff--;
        day = Math.floor(time_diff/86400);
        hour = Math.floor((time_diff-day*86400)/3600);
        minute = Math.floor((time_diff - day * 86400 - hour * 3600) / 60);
        second = time_diff - day * 86400 - hour * 3600 - minute * 60;
        oDay.innerHTML = day;
        oHour.innerHTML = hour<10?'0'+hour:hour;
        oMinute.innerHTML = minute<10?'0'+minute:minute;
        oSecond.innerHTML = second<10?'0'+second:second;
    }
    function over() {
        for(i = 0;i<p.length;i++){
            p[i].setAttribute('href','#');
        }

        for(j = 0;j<payimg.length;j++){
            payimg[j].setAttribute('src','https://cdn-novel.iycdm.com/h5/activity-2018-11-07/over.png');
        }
    }
    times();
    if(status == 1){
        var timeInterval = setInterval(function () {
            if(time_diff<=0){
                clearInterval(timeInterval);
                over();
            }else{
                times()
            }
        },1000)
    }
</script>
</html>