js 公平抽奖

来源：互联网发布：知金网络教育编辑：程序博客网时间：2024/06/05 14:18

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            ul{                width: 300px;                height: 300px;            }            li{                width: 90px;                height: 90px;                float: left;                margin-right: 10px;                border: 1px solid #000;                box-sizing: border-box;                list-style: none;                margin-top: 10px;            }        </style>    </head>    <body>        <ul>            <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>        <input type="button" name="" id="" value="抽奖" />    </body>    <script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript">        //方法1        /*var n=9;        var m;        var b;        $('input').click(function(){            $('li').eq(m).remove();            var timer=setInterval(function(){                var b=parseInt(Math.random()*n);                $('li').eq(b).css('background','red');            },100);//          clearInterval(timer);            var handler=setTimeout(function(){                $('li').eq(a).css('background','#fff');                var a=parseInt(Math.random()*n);                $('li').eq(a).css('background','red');                n-=1;                m=a;            },500);//          clearTimeout(handler);        });*/        //方法二        var timer;        $('input').click(function(){            clearInterval(timer);            var now=0;            var num=parseInt(Math.random()*100+1);            timer=setInterval(function(){                $('li').css('background','#fff');                $('li').eq(now).css('background','red');                now++;                num--;                if (now==9) {                    now=0;                }                if (num==0) {                    clearInterval(timer);                    alert()                }            },100)        })    </script></html>

效果图

这里写图片描述

点击可进行一次抽检

中心思想：
方法二：
1、利用math.random随机选出数字，为抽选的跳动字数；
2、档随机数为0是结束跳动，得出幸运者；
方法1：
1、随机数确定幸运者；
2、结束时删除该幸运者的号码；

阅读全文

0 0