Code Monkey home page Code Monkey logo

ty's Introduction

年会抽奖程序

fork自https://github.com/fouber/lottery

抽奖demo

使用办法:

  1. 建一个网站

    首先得有个网站,如果没有,可以使用Github.io博客,建站方法可参考这篇文章,如果建站只是为了抽奖,能成功打开你的Github账号名.github.io,五分钟就搞定~即可进入下一步;

  2. 增加一个页面

    即在你的Github账号名.github.io网站中增加一个页面,得到你的Github账号名.github.io/lottery。具体方法参考这篇文章

抽奖流程:

  1. 选择当次要抽奖的人数(30、10、5、2、1)
  2. 点击『开始』按钮,进入抽奖状态(这个过程仍可修改抽奖人数)
  3. 点击『停!』按钮,生成抽奖结果
  4. 点击任意人数按钮,可以回到闲置状态,已中奖的用户标记为黄色,不会二次命中
  5. 抽奖完毕,点击网页右上方的中奖名单即可查看。

PS:滚动鼠标滚轮,可以放大或缩小球体

抽奖过程 image.png

抽奖结果 image.png

个性化设置

  1. 修改号码和名单

    在'js/member.js'文件内,可修改编号和名称。

  2. 修改抽奖人数和默认值列表

    默认抽奖人数为【30,10,5,2,1】,默认值为30,可以在index.html中修改

        new Vue({
            el: '#tools',
            data: {
                selected: 30,
                running: false,
                btns: [
                    30, 10, 5, 2, 1
                ]
            },
  1. 修改奖项

    待续

  2. 教程很详细啦。如果你懒得自己弄,请我吃个雪糕,我可以帮你。

这个github地址 看着更炫酷,功能更多,但我还没试过。

ty's People

Contributors

iosdeveloperwzc avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.