JQUERY+HTML九宫格抽奖作业代码

最新推荐文章于 2023-10-17 12:57:21 发布

独行侠谁也不带

最新推荐文章于 2023-10-17 12:57:21 发布

阅读量290

点赞数

分类专栏： JAVA全栈文章标签： javascript jquery ajax css3 html5 Powered by 金山文档

本文链接：https://blog.csdn.net/xielong8866/article/details/129783458

版权

JAVA全栈专栏收录该内容

15 篇文章 1 订阅

订阅专栏

########################################################################################################################
#   declare   吼吼吼！hohoho~~~~ 开始了开始了                                                                             # 
#   begin                                                                                                              #
#     代码肌肉兄贵         ~~~~~~      {  ]       OH  YEAH~~~    author:Vincent                                          # 
#              ________  |^^\  }  _____\ \                                                                             #                                                 
#             \  ______ (_-__\ }  ________\       来到代码世界~展示我的超能力                                              #                                   
#               \ \     |____|____/                                                                                    #                                   
#                 [  }   | __/__ /             祝小伙儿们看完文章后                                                       #                                  
#      ^ ^                |__/__/      工作顺利，吃啥啥没够儿~！                                                          #                                   
#  这里是ISO-8859-1        |__/__|       不要惹我，一拳从多线程给你打成hello world！                                      #                                    
#  西欧字符集  ------>    /  \??/   \         欢迎关注微信 2012letitgo2012                                                #                                   
#    中文乱码！！！！    |    | |     |                                                                                  #                                     
#                       \   /  \   /                                                                                   # 
########################################################################################################################

前提

在网页上如果有会动，渐变的效果，那很炫酷。

上一个会动的抽奖代码：

来！上代码~~

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 300px;
                height: 300px;
                margin: auto;
                /*border: 1px solid greenyellow;*/
                position: relative;
                
            }
            .aa{
                width: 80px;
                height: 80px;
                background-color: orange;
                text-align: center;
                line-height: 80px;
                font-size: 14px;
                color: white;
                position: absolute;
            } 
            #div1-2{
                left: 100px;
            }
            #div1-3{
                left: 200px;
            }
            #div1-4{
                top: 100px;
                left: 200px;
            }
            #div1-5{
                top: 200px;
                left: 200px;
            }
            #div1-6{
                top: 200px;
                left: 100px;
            }
            #div1-7{
                top: 200px;
            }
            #div1-8{
                top: 100px;
            }
            #div1-9{
                top: 100px;
                left: 100px;
                background-color: greenyellow;
            }
            #div1-9:hover{
                cursor: pointer;
            }
            .sel{
                background-color: greenyellow;
            }
        </style>
        <script type="text/javascript" src="js/jquery.js"></script>
        
    </head>
    <body>
        <div id="div1">
            <div id="div1-1" class="aa">oppo手机</div>
            <div id="div1-2" class="aa">小米pad</div>
            <div id="div1-3" class="aa">充电宝</div>
            <div id="div1-4" class="aa">U盘</div>
            <div id="div1-5" class="aa">微波炉</div>
            <div id="div1-6" class="aa">再来一次</div>
            <div id="div1-7" class="aa">谢谢惠顾</div>
            <div id="div1-8" class="aa">扫地机器人</div>
            
            <div id="div1-9" class="aa">开始</div>
        </div>
    </body>

    <!--<script>
            $(function(){
                const arr = ['#div1-1','#div1-2','#div1-3','#div1-4','#div1-5','#div1-6','#div1-7','#div1-8']
                
                function chouJiang()
                {
                    alert("cc");
                    
//                    let randomNum = Math.floor(Math.random() * (arr.length-1 - 0 + 1) + 0)
//                    for (var i = 0; i < arr.length; i++) {
//                        $(arr[i]).addClass("sel");
//                    }
                    setTimeout(chouJiang(),2000);
                }

                
                function zhuanLun(div)
                {
                    $("#div1-1").addClass("sel");
                }
                
//                function quxiaoZhuanlun()
//                {
//                    $("#div1-1").removeClass("sel");
//                }
                
                $("#div1-9").click(function(){
//                    $("#div1-1").addClass("sel");
                    chouJiang();
                })
            })
        </script>-->
        <script>
                arr = ['div1-1','div1-2','div1-3','div1-4','div1-5','div1-6','div1-7','div1-8']
                var div;
                var lastshow = "";
                var jiangPin = "";
//                function ff(){
//                    alert("你黑少女了吗11111？")
//                    setTimeout( "ff()",5000);
//                }
//                setTimeout( "ff()",5000); //以毫秒为单位
                
                function getRandom(m,n)
                {
                    var num = Math.floor(Math.random()*(n - m + 1) + m)
                    return num;
                }
                
                function chouJiang()
                {
                    
//                    alert("你黑少女了吗");
                    var randomNum = getRandom(0,arr.length-1);
                    
                    if(8==arr.length){
                        while(lastshow == arr[randomNum])
                        {
                            randomNum = getRandom(0,arr.length-1);
                        }
                    }


                    div = document.getElementById(arr[randomNum]);

                    jiangPin=div.textContent;
//                    alert(jiangPin);
                    div.style.backgroundColor="greenyellow";
                    c=setTimeout("cancel()",200);
                    
                    if(1==arr.length)
                    {
//                        alert(arr.length)
//                        alert(arr)
                        lastshow = arr[randomNum];
                        arr = ['div1-1','div1-2','div1-3','div1-4','div1-5','div1-6','div1-7','div1-8']
                    }else{
//                        alert(arr.length)
//                        alert(arr)
                        arr.splice(randomNum,1)
                    }
//                        
                    a=setTimeout( "chouJiang()",200);
                        
                }
                b=setTimeout( "chouJiang()",100);
                
                function cancel(){
//                    alert("你黑少女了吗11111？")
                    div.style.backgroundColor="orange";
                }
                
                function ff2()
                {
//                    alert("定时器清除");
                    alert("恭喜 "+jiangPin);
                    clearTimeout(a);
                    clearTimeout(b);//清除定时器
                    clearTimeout(c);
                }
                document.getElementById("div1-9").onclick=function(){
                    ff2();
                }
//            setTimeout( "chouJiang()",2000);

//            $("#div1-9").click(function(){
                    $("#div1-1").addClass("sel");
//                    chouJiang();
//            })
        </script>
</html>

效果，加了JQuey就是会动的了：

########################################################################################################################
#     end;                                                                                                             #
#     代码肌肉兄贵         ~~~~~~      {  ]       OH  YEAH~~~    author:Vincent                                          # 
#              ________  |^^\  }  _____\ \                                                                             #                                                 
#             \  ______ (_-__\ }  ________\       来到代码世界~展示我的超能力                                              #                                   
#               \ \     |____|____/                                                                                    #                                   
#                 [  }   | __/__ /             祝小伙儿们看完文章后                                                       #                                  
#      ^ ^                |__/__/      工作顺利，吃啥啥没够儿~！                                                          #                                   
#  这里是ISO-8859-1        |__/__|       不要惹我，一拳从多线程给你打成hello world！                                        #                                    
#  西欧字符集  ------>    /  \??/   \         欢迎关注微信 2012letitgo2012                                                #                                   
#    中文乱码！！！！    |    | |     |                                                                                  #                                     
#                       \   /  \   /                                                                                   # 
########################################################################################################################