模拟抽奖2011-12-12
来源：互联网 发布：装修软件app排行 编辑：程序博客网 时间：2024/06/05 11:13
<!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>
