用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、修改后点击确认,就可以打开网页了。