妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2761|回复: 2

[练习] VIP视频LV2 JQuery课后练习 简易摇奖

[复制链接]
lixiang3341 发表于 2017-1-5 21:10:28 | 显示全部楼层 |阅读模式
本帖最后由 lixiang3341 于 2017-1-6 10:32 编辑

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jQuery自适应窗口大小轮播图特效 - 站长素材</title>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
        
</script>
<style>
        .page{width:303px; height:303px; overflow:hidden;}
        .page .li{width:100px; line-height: 100px; height:100px; overflow:hidden; text-align: center; float:left;}
</style>
<script>
        $(function(){
                var n=3;//机会次数
                var jh=$("#jh");//显示还有几次机会
                jh.html("您还有"+n+"次抽奖机会");
                var btn=$("#btn");//点击按钮
                btn.click(function(){
                        if(n>0){
                                var num=3;//抽奖数计数
                                var sum=$(".li").length-1;//框的数量-1               
                                var time=setInterval(function(){
                                        if(num>0){
                                                var shu=Math.floor(Math.random()*sum);//随机
                                                $(".li").eq(shu).css("background","red");
                                                $(".li").eq(shu).siblings().css("background","none");
                                                num--;
                                        }else{
                                                clearInterval(time);
                                        }
                                },100);
                                n--;
                                if(n!=0){
                                        jh.html("您还有"+n+"次抽奖机会");
                                }else{
                                        jh.html("没有次数了");
                                }
                        }else{
                                alert("没机会了 亲");
                        }
                });
        })
</script>
</head>
<body>
        <input type="button" value="点击抽奖" id="btn" />
        <div id="jh"></div>
        <div class="page">
                <?php
                        for($i=0;$i<9;$i++){
                ?>
                <div class="li"><?php echo $i+1; ?></div>
                <?php
                        }
                ?>
        </div>
</body>
</html>

index.php

1.45 KB, 下载次数: 164

jquery-2.1.1.min.js

82.31 KB, 下载次数: 128

回复

使用道具 举报

 楼主| lixiang3341 发表于 2017-1-5 21:13:41 | 显示全部楼层
我的思路就是  先设定 机会数和随机几次得出最终结果。然后点击按钮时先判断是否还有抽奖机会。如果有就随机出数字 然后让.li的位置的DIV变色。执行后机会减一次  抽奖机会没有试弹出提示框  没有抽奖机会了。  望老师优化一下。  谢谢
回复 支持 反对

使用道具 举报

xbests 发表于 2017-2-5 11:31:10 | 显示全部楼层
我怎么不知道还有这个练习,不过要是抽奖的话,这么写就太...  你可以先封装一个产生随机数的函数,在函数内部判断如果生成的随机值已经存在就递归重新生成,然后再去封装一个随机步伐的函数,如果非要加上优化的话,可以把已经随机过的格子存到数组中,然后添加上一个样式,之后让已经抽过的将不能再被随机到。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 19:53 , Processed in 0.129435 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表