你好,我网站有一个纯js抽奖页面,我已经实现了可抽奖初始次数等于会员金币数(问题里的php代码)

JavaScript014

你好,我网站有一个纯js抽奖页面,我已经实现了可抽奖初始次数等于会员金币数(问题里的php代码),第1张

用AJAX吧,每次抽奖之后跟后台进行交互,获取用户抽奖后金币数~同时后台也需要对用户金币数进行校验,每次抽奖后减少用户金币= =`

var M_Money = <?php echo $cfg_ml->M_Money ?>

var C_Money = 10

$('button').click(function(){

    if (M_Money >= C_Money) {

        runCup()

        $('button').attr("disabled", true)

        $.ajax({

            url: 'choujiang.php',

            data: {res: 抽奖结果},

            method: 'POST',

            success: function(res){

               

               M_Money = res.M_Money

               $('button').removeAttr("disabled", true)

               // 抽奖结果通知

               // Todo

            }

        })

    }

    else{

        alert("亲,抽奖次数已用光!充值金币或点击“邀请好友”")

    }

})

//css部分

body{background:#626262}

.number{float: left margin-left: 50px}

.number ul li{

float: left 

width: 30px height: 30px 

list-style: none

background-color:#fff

color:#8080ff

margin-right: 10px

line-height: 30px

text-align: center

border-radius: 3px

}

.box{float: left}

.box ul li{

float: left 

width: 20px height: 20px 

list-style: none

background-color:#fff

color:#8080ff

margin-right: 10px

line-height: 20px

text-align: center

border-radius: 3px

font-size: 12px

}

.number ul li.active,

.box ul li.act{

background: #e558cb

color: yellow

} //html部分

<div class="number">

<ul>

<li>0</li>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

</ul>

</div>

<div class="box">

<ul>

<li>全</li>

<li>大</li>

<li>小</li>

<li>奇</li>

<li>偶</li>

<li>清</li>

</ul>

</div> //js部分 需要引入jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

$(function(){

var oLiBox = $('.box ul li')

var oLiNumber = $('.number ul li')

//点数字

oLiNumber.bind('click',function(){

$(this).addClass('active')

})

// 点击全 

oLiBox.eq(0).bind('click',function(){

oLiNumber.addClass('active')

})

//  点击大

oLiBox.eq(1).bind('click',function(){

oLiNumber.removeClass('active')

$('.number ul li:gt(4)').addClass('active')

})

//  点击小

oLiBox.eq(2).bind('click',function(){

oLiNumber.removeClass('active')

$('.number ul li:lt(5)').addClass('active')

})

//  点击奇

oLiBox.eq(3).bind('click',function(){

oLiNumber.removeClass('active')

$('.number ul li:odd').addClass('active')

})

//  点击偶

oLiBox.eq(4).bind('click',function(){

oLiNumber.removeClass('active')

$('.number ul li:even').addClass('active')

})

//  点击清

oLiBox.eq(5).bind('click',function(){

oLiNumber.removeClass('active')

})

})

在线查看代码请移步

http://codepen.io/dongsongshan/pen/yMZLjK

这个网页制作步骤如下:

1、在电脑桌面右击,新建“文本文档”。

2、打开新建好的文本文档,输入的内容会在网页的内容显示出来,若什么都不输入,到时网页也就是空白的。

3、写好内容后,一定要保存。不然都到时网页也会没有内容。

4、保存后,重命名,输入网址,记住要选择全部名称修改。也就是原本的.txt改成.html

5、修改后点击确认,就可以打开网页了。