模拟抽奖2011-12-12

最新推荐文章于 2024-04-16 08:43:05 发布

KeenWon

最新推荐文章于 2024-04-16 08:43:05 发布

阅读量1.3k

点赞数

分类专栏： JS插件文章标签： function null button div border html

本文链接：https://blog.csdn.net/semanwmj/article/details/7064244

版权

JS插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>模拟抽奖2011-12-12</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css">
    #OkNum
    {
        width:100px;
        height:100px;
        border:5px solid black;	
        overflow:hidden;
        position:relative;
    }
    #numall
    {
        position:absolute;
        top:0px;
        left:0px;	
    }
    .num
    {
        width:96px;
        height:96px;
        border:2px solid red;
        font-size:50px;
        font-weight:bolder;
        color:Red;
        text-align:center;
        line-height:98px;
    }
</style>
<script type="text/javascript">
    (function () {
        var Lucky = function () {
            this.s = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"];
            this.state = null; //状态 1：开始 0：停止
            this.n = null; //要删除的元素在数组中的序号
        };
        Lucky.prototype = {
            //开始
            start: function () {
                var _self = this;
                _self.state = 1;
                if (_self.n != null) {
                    _self._hideName(_self.n);
                }
                _self.n = null;
                _self._div()//构造出div
                _self.go();
            },
            //停止
            stop: function () {
                var _self = this;
                _self.state = 0;
            },
            //重置
            reset: function () {
                var _self = this;
                _self.s = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"];
                this.state = null;
                this.n = null;
                $("#selectedList").html("");
            },
            //滚动
            go: function () {
                var _self = this;
                var _numall = $("#numall");
                _numall.animate({ top: (1 - _self.s.length) * 100 + "px" }, "fast", function () {
                    _numall.css("display", "none");
                    _numall.css("top", "0px");
                    _numall.css("display", "block");
                    if (_self.state == 1) {
                        _self.go();
                    }
                    else {
                        var n = null
                        n = parseInt(Math.random() * (_self.s.length - 0));
                        _numall.animate({ top: -n * 100 + "px" }, "slow", function () {
                            $("#selectedList").append(" " + _self._findName(n));
                            _self.n = n;
                        });
                    }
                });
            },
            //构造div
            _div: function () {
                var _self = this;
                $("#numall").html("");
                for (var i = 0; i < _self.s.length; i++) {
                    $("#numall").append("<div class='num'>" + _self.s[i] + "</div>");
                }
            },
            //改变状态
            _changeState: function (s) {
                state = s;
            },
            //找出中奖名单
            _findName: function (n) {
                return $(".num:eq(" + n + ")").text();
            },
            //隐藏已经中奖的
            _hideName: function (n) {
                this.s.splice(n, 1);
            }
        };
        window.Lucky = new Lucky();
    })();
    $(document).ready(function () {
        $("#start").click(function () {
            Lucky.start();
        });
        $("#stop").click(function () {
            Lucky.stop();
        });
        $("#reset").click(function () {
            Lucky.reset();
        });
    });
</script>
</head>
<body>
    模拟抽奖：
    <div id="OkNum">
        <div id="numall"></div>
    </div>
    <br />
    <div><span>中奖名单：</span><span id="selectedList"></span></div>
    <br />
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="reset">重置</button>
</body>
</html>

KeenWon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模拟抽奖2011-12-12

模拟抽奖2011-12-12 #OkNum { width:100px; height:100px; border:5px solid black; overflow:hidden; position:relative; } #numall { positi
复制链接

扫一扫