{"id":15363236,"url":"https://github.com/topthinking/jslottery","last_synced_at":"2026-01-24T09:33:46.736Z","repository":{"id":138492507,"uuid":"44898833","full_name":"Topthinking/jslottery","owner":"Topthinking","description":"🏃💡跑马灯","archived":false,"fork":false,"pushed_at":"2017-12-16T13:39:37.000Z","size":438,"stargazers_count":15,"open_issues_count":1,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-26T22:43:34.341Z","etag":null,"topics":["javascript","javascript-library"],"latest_commit_sha":null,"homepage":"http://topthinking.github.io/demos/jslottery/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Topthinking.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-10-25T06:15:01.000Z","updated_at":"2023-08-24T09:34:55.000Z","dependencies_parsed_at":"2023-07-02T08:42:25.246Z","dependency_job_id":null,"html_url":"https://github.com/Topthinking/jslottery","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Topthinking%2Fjslottery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Topthinking%2Fjslottery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Topthinking%2Fjslottery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Topthinking%2Fjslottery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Topthinking","download_url":"https://codeload.github.com/Topthinking/jslottery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239907072,"owners_count":19716582,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript-library"],"created_at":"2024-10-01T13:05:11.587Z","updated_at":"2026-01-24T09:33:46.690Z","avatar_url":"https://github.com/Topthinking.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"jslottery\n=========\n\n[![npm](https://img.shields.io/npm/v/jslottery.svg?style=flat-square)](https://www.npmjs.com/package/jslottery)\n\n实现效果\n\n![](./docs/jslottery.gif)\n\nexample\n\n`react` `normal`\n\n## Usage\n\n### npm 安装\n\n```\n$ npm install jslottery\n```\n\n### 示例\n\n#### HTML\n\n```html\n\u003cdiv class=\"machine\"\u003e\n\t\u003ctable class=\"machine-table\"\u003e\n\t      \u003ctbody\u003e\n\t      \u003ctr\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"1\" \u003e\u003c/td\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"2\" \u003e\u003c/td\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"3\" \u003e\u003c/td\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"4\" \u003e\u003c/td\u003e\n\t      \u003c/tr\u003e\n\t      \u003ctr\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"12\" \u003e\u003c/td\u003e\t        \t\t\t        \t\n\t       \u003ctd class=\"machine-control-cell\" colspan=\"2\" rowspan=\"2\"\u003e\n\t       \u003cdiv class=\"machine-control\" onclick=\"ClickMe(event)\"\u003e\n\t       \u003cspan\u003e抽奖\u003c/span\u003e\n\t       \u003c/div\u003e\n\t       \u003c/td\u003e\t        \t\t\t \t        \t\t\t\n\t       \u003ctd class=\"prize-cell\" data-id=\"5\" \u003e\u003c/td\u003e      \t\t\t\n\t       \u003c/tr\u003e\n\t      \u003ctr\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"11\" \u003e\u003c/td\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"6\" \u003e\u003c/td\u003e\n\t      \u003c/tr\u003e\n\t      \u003ctr\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"10\"\u003e\u003c/td\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"9\" \u003e\u003c/td\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"8\" \u003e\u003c/td\u003e\n\t       \u003ctd class=\"prize-cell\" data-id=\"7\" \u003e\u003c/td\u003e\n\t      \u003c/tr\u003e\n\t      \u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/div\u003e\n```\n\n#### CSS\n\n```css\n.machine{\n\tmargin: 0px auto;\n\twidth:280px;\n}\n.prize-cell{\n\tbackground-color: #cb1573;\n\twidth: 64px;\n\theight: 66px;\n\tposition: relative;\n}\n.prize-cell.active{\n\tbackground-color: #ffff7e;\n}\n.prize-cell::after{\n\tbackground:rgba(0,0,0,0.2) none repeat scroll 0% 0%;\n\tcontent: \"\";\n\tbottom: 0px;\n\tleft: 0;\n\tright: 0;\n\theight: 5px;\n\tposition: absolute;\n}\n.machine-control-cell{\t\t\t\n\tbackground-color: #278EF2;\n}\n.machine-control{\n\twidth: 92px;\n\theight: 96px;\n\tposition: absolute;\n\tmargin: -44px 0px 0px 20px;\n\tborder-radius: 42%;\n\tborder: 1px solid #ff0;\n\tcursor: pointer;\n}\n.machine-control span{\n\tfont-size: 30px;\n\tfloat: left;\n\tmargin: 28px 0px 0px 16px;\n}\n```\n\n#### JavaScript\n\n``` javascript\n'use strict'\n\nlet Jslottery = require('jslottery')\n\n\nvar lottery = Jslottery({\n\t\tscrollDom:'prize-cell',\n\t\tscrollId:'data-id',\t\t\n\t\tstartPosition:1,\n\t\tcallback:function(type,data){\n\t\t\tif(type==1){\n\t\t\t\t//开始滚动\n\t\t\t\tconsole.log(\"开始\")\n\t\t\t}\n\n\t\t\tif(type==2){\n\t\t\t\t//滚动完成\n\t\t\t\tconsole.log(\"结束\")\n\t\t\t}\n\n\t\t\tif(type==0){\n\t\t\t\t//出现错误\n\t\t\t\tconsole.log(\"错误\")\n\t\t\t}\n\n\t\t\tif(type==3){\n\t\t\t\t//滚动每一个格子\n\t\t\t\tconsole.log(data)\n\t\t\t}\n        }\n\t});\n\nfunction ClickMe(){\n\tlottery.options.stopPosition=Math.floor(Math.random()*1+11);\t\t\n\tlottery.options.speed=Math.floor(Math.random()*200+300);\n\tlottery.options.speedUpPosition=Math.floor(Math.random()*6+1);\n\tlottery.options.speedDownPosition=Math.floor(Math.random()*6+1);\n\tlottery.options.speedUp=Math.floor(Math.random()*30+20);\n\tlottery.options.speedDown=Math.floor(Math.random()*100+600);\n\tlottery.options.totalCircle=Math.floor(Math.random()*2+5);\n\tlottery.start();\n}\n\n```\n## 参数说明\n```\tjavascript\nlet domNumber,                      //dom个数\n    Lottery,                        //全局的Lottery对象                     \n    LotteryTimeout = false,         //当前滚动定时器\n    LotteryCircle = 0,              //当前滚动圈数\n    LotteryCircleStep = 0,          //当前滚动总步数\n    LotteryFinish = false,          //判断是否滚动完成\n    LotteryInitSpeed = null,        //记录正常的滚动速度\n    LotteryError = false,           //错误标识\n    LotteryStarted = false;         //开始滚动\n\nvar options = {\n        scrollDom:null,                         //滚动显示的dom  这里是使用class名称\n        startPosition:1,                        //开始位置\n        stopPosition:2,                         //停止位置\n        totalCircle:2,                          //滚动的圈数\n        speed:400,                              //正常速度  （这里的速度就是定时器的时间间隔，间隔越短，速度越快）\n        speedUp:100,                            //加速的时候速度\n        speedDown:600,                          //减速的时候速度\n        speedUpPosition:3,                      //加速点 （这里会和滚动的总步数进行比较 理论上总步数 = 总长度 * 总圈数 + stopPosition - startPosition +1 ）\n        speedDownPosition:5,                    //减速点\n        scrollId:null,                          //滚动的dom上的属性号，是用来标记滚动结束获得的id号对应的奖项\n        callback:function(type){}               /**\n                                                 *\t滚动回调函数   \n\t\t\t\t\t\t\t\t\t\t\t\t *\t回调类型\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t \t\t\t\t\ttype==1 : 开始滚动 \n                                                                 \ttype==2 : 停止滚动\n                                                                \ttype==0 : 出现错误\n                                                                \ttype==3 : 滚动每个格子的回调\n\t\t\t\t\t\t\t\t\t\t\t\t *\t回调内容      \t\n\t\t\t\t\t\t\t\t\t\t\t\t \t\t\t\t\tdata = {}\n                                                 */\n                                                \n    };\n```\n\n## 如何开发编译源码\n\n`jslottery`的是通过`webpack`进行打包的\n\n`example`是使用`parcel`进行构建的\n\n```bash\n#克隆\ngit clone https://github.com/Topthinking/Jslottery.git\n\n#依赖\ncd Jslottery\nnpm install\n\n#测试用例\ncd example/normal\nnpm run dev\n```\n\n打开浏览器访问 `localhost:3000`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopthinking%2Fjslottery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftopthinking%2Fjslottery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopthinking%2Fjslottery/lists"}