精华内容
下载资源
问答
  • 简单的js年会抽奖代码,可自己修改图片,样式等,简单易上手。
  • 简单的js年会抽奖代码,可自己修改图片,样式等,简单易上手。
  • 对于年会,大家最关心的应该就是抽奖了吧?虽然中奖概率通常不高,但总归是个机会,期待一下也是好的。最近,我们部门举办了年会,也有抽奖环节。临近年会的前几天,Boss 突然找到我,说要做一个抽奖程序,部门年会...

    临近年末,又到了各大公司举办年会的时候了。对于年会,大家最关心的应该就是抽奖了吧?虽然中奖概率通常不高,但总归是个机会,期待一下也是好的。

    最近,我们部门举办了年会,也有抽奖环节。临近年会的前几天,Boss 突然找到我,说要做一个抽奖程序,部门年会要用。我当时都懵了:就三天时间,万一做的程序有bug,岂不是要被现场百十号人的唾沫给淹死?没办法,Boss 看起来对我很有信心,我也只能硬着头皮上了。

    需求

    1. 要一个设置页面,包括设置奖项、参与人员名单等。
    2. 如果单个奖项中奖人数过多,可分批抽取,每批人数可设置。
    3. 默认按奖项顺序抽奖,也可选定某个奖项开始。
    4. 可删除没到场的中奖者,同时可再次抽取以作替补。
    5. 可在任意奖项之间切换,可查中奖记录名单
    6. 支持撤销当前轮次的抽奖结果,重新抽取。

    实现

    身为Web前端开发,自然想到用Web技术来实现。本着不重复造轮子的原则,首先求助Google,Github。搜了一圈好像没有找到特别好用的程序能直接用的。后来看到一个Github上的一个项目,用 TagCanvas 做的抽奖程序,界面挺好,就是逻辑有问题,点几次就崩溃了。代码是不能拿来用了,标签云这种抽奖形式倒是可以借鉴。于是找来文档看了下基本用法,很快就集成到页面里了。

    由于设置页面涉及多种交互,纯手写太费时间了,直接用框架。平时 Element UI 用得比较多,自然就用它了。考虑到年会现场可能没有网络,就把框架相关的JS和CSS都下载到本地,直接引用。为了快速开发,也没搭建webpack构建工具了,直接在浏览器里引入JS。

                        复制代码
    1. 先设计数据结构。 奖项列表 awards
    [{    "name": "二等奖",    "count": 25,    "award": "办公室一日游"}, {    "name": "一等奖",    "count": 10,    "award": "BMW X5"}, {    "name": "特等奖",    "count": 1,    "award": "深圳湾一号"}]复制代码

    参与人列表 members

    [{  "id": 1,  "name": "张三"}, {  "id": 2,  "name": "李四"}]复制代码

    待抽奖人员列表players,是members 的子集

    [{  "id": 1,  "name": "张三"}]复制代码

    抽奖结果列表result,按奖项顺序索引

    [[{    "id": 1,    "name": "张三"}], [{    "id": 2,    "name": "李四"}]]复制代码
    1. 设置页面 包括奖项设置和参与人员列表。
    e30f44b01403477538eb430534c107b5.png
    1. 抽奖页面
    435120ad1e257120c71a6f10e8b4f3f4.png

    老男孩老师特别为大家准备了学习AI人工智能的干货礼包,后台私信1可获取5000G珍藏大礼包(培训视频、精选软件、内部资料)~让我们一起让IT学习更简单!

    展开全文
  • 对于年会,大家最关心的应该就是抽奖了吧?虽然中奖概率通常不高,但总归是个机会,期待一下也是好的。 最近,我们部门举办了年会,也有抽奖环节。临近年会的前几天,Boss 突然找到我,说要做一个抽奖程序,部门年会...

    a7fe7c390edb62a6b46b9e5e769c107e.png

    背景
    临近年末,又到了各大公司举办年会的时候了。对于年会,大家最关心的应该就是抽奖了吧?虽然中奖概率通常不高,但总归是个机会,期待一下也是好的。
    最近,我们部门举办了年会,也有抽奖环节。临近年会的前几天,Boss 突然找到我,说要做一个抽奖程序,部门年会要用。我当时都懵了:就三天时间,万一做的程序有bug,岂不是要被现场百十号人的唾沫给淹死?没办法,Boss 看起来对我很有信心,我也只能硬着头皮上了。
    需求

    1. 要一个设置页面,包括设置奖项、参与人员名单等。
    2. 如果单个奖项中奖人数过多,可分批抽取,每批人数可设置。
    3. 默认按奖项顺序抽奖,也可选定某个奖项开始。
    4. 可删除没到场的中奖者,同时可再次抽取以作替补。
    5. 可在任意奖项之间切换,可查中奖记录名单
    6. 支持撤销当前轮次的抽奖结果,重新抽取。

    实现
    身为Web前端开发,自然想到用Web技术来实现。本着不重复造轮子的原则,首先求助Google,Github。搜了一圈好像没有找到特别好用的程序能直接用的。后来看到一个Github上的一个项目,用 TagCanvas 做的抽奖程序,界面挺好,就是逻辑有问题,点几次就崩溃了。代码是不能拿来用了,标签云这种抽奖形式倒是可以借鉴。于是找来文档看了下基本用法,很快就集成到页面里了。
    由于设置页面涉及多种交互,纯手写太费时间了,直接用框架。平时 Element UI 用得比较多,自然就用它了。考虑到年会现场可能没有网络,就把框架相关的JS和CSS都下载到本地,直接引用。为了快速开发,也没搭建webpack构建工具了,直接在浏览器里引入JS。

      <link rel="stylesheet" href="css/reset.css" />
        <link
          rel="stylesheet"
          href="js/element-ui@2.4.11/lib/theme-chalk/index.css"
        />
        <script src="js/polyfill.min.js"></script>
        <script src="js/vue.min.js"></script>
        <script src="js/element-ui@2.4.11/lib/index.js"></script>
        <script src="js/member.js"></script>
    1. 先设计数据结构。 奖项列表 awards
     [{
        "name": "二等奖",
        "count": 25,
        "award": "办公室一日游"
    }, {
        "name": "一等奖",
        "count": 10,
        "award": "BMW X5"
    }, {
        "name": "特等奖",
        "count": 1,
        "award": "深圳湾一号"
    }]

    参与人列表 members

    [{
      "id": 1,
      "name": "张三"
    }, {
      "id": 2,
      "name": "李四"
    }]

    待抽奖人员列表players,是members 的子集

    [{
      "id": 1,
      "name": "张三"
    }]

    抽奖结果列表result,按奖项顺序索引

    [[{
        "id": 1,
        "name": "张三"
    }], [{
        "id": 2,
        "name": "李四"
    }]]


    2.设置页面 包括奖项设置和参与人员列表。

    1f70a39c9577464f1e65f0a8b8fe7e4b.png

    3.抽奖页面

    b6b262057dc0a68409636a3b605ac529.png

    具体代码可以去我的Github项目 查看,可以现在体验一下。由于时间仓促,代码写得比较将就。
    年会当天抽中了四等奖:1000元购物卡。我是不是该庆幸自己没中特等奖……

    我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我并在后台私信我:前端,即可免费获取

    5028bc1e3b9d84d17da206eda1f4cb93.png
    作者:KaysonLi
    链接:https://juejin.im/post/5e01881751882512243fa650
    展开全文
  • 对于年会,大家最关心的应该就是抽奖了吧?虽然中奖概率通常不高,但总归是个机会,期待一下也是好的。最近,我们部门举办了年会,也有抽奖环节。临近年会的前几天,Boss 突然找到我,说要做一个抽奖程序,部门年会...

    f3110107d90f03d891d8efa00e808ca0.png

    作者丨大道至简1024

    来源丨1024驿站(ID:trans1024)

    背景

    临近年末,又到了各大公司举办年会的时候了。对于年会,大家最关心的应该就是抽奖了吧?虽然中奖概率通常不高,但总归是个机会,期待一下也是好的。

    最近,我们部门举办了年会,也有抽奖环节。临近年会的前几天,Boss 突然找到我,说要做一个抽奖程序,部门年会要用。我当时都懵了:就三天时间,万一做的程序有bug,岂不是要被现场百十号人的唾沫给淹死?没办法,Boss 看起来对我很有信心,我也只能硬着头皮上了。

    需求

    1. 要一个设置页面,包括设置奖项、参与人员名单等。

    2. 如果单个奖项中奖人数过多,可分批抽取,每批人数可设置。

    3. 默认按奖项顺序抽奖,也可选定某个奖项开始。

    4. 可删除没到场的中奖者,同时可再次抽取以作替补。

    5. 可在任意奖项之间切换,可查中奖记录名单

    6. 支持撤销当前轮次的抽奖结果,重新抽取。

    实现

    身为 Web 前端开发,自然想到用 Web 技术来实现。本着不重复造轮子的原则,首先求助 Google,Github。搜了一圈好像没有找到特别好用的程序能直接用的。后来看到一个 Github 上的一个项目,用 TagCanvas 做的抽奖程序,界面挺好,就是逻辑有问题,点几次就崩溃了。代码是不能拿来用了,标签云这种抽奖形式倒是可以借鉴。于是找来文档看了下基本用法,很快就集成到页面里了。

    由于设置页面涉及多种交互,纯手写太费时间了,直接用框架。平时 Element UI 用得比较多,自然就用它了。考虑到年会现场可能没有网络,就把框架相关的JS和CSS都下载到本地,直接引用。为了快速开发,也没搭建 webpack 构建工具了,直接在浏览器里引入JS。

        "stylesheet" href="css/reset.css" />
    rel="stylesheet"
    href="js/element-ui@2.4.11/lib/theme-chalk/index.css"
    />



    1设计数据结构

    奖项列表 awards

    [{
    "name": "二等奖",
    "count": 25,
    "award": "办公室一日游"
    }, {
    "name": "一等奖",
    "count": 10,
    "award": "BMW X5"
    }, {
    "name": "特等奖",
    "count": 1,
    "award": "深圳湾一号"
    }]

    参与人列表 members

    [{
    "id": 1,
    "name": "张三"
    }, {
    "id": 2,
    "name": "李四"
    }]

    待抽奖人员列表playersmembers 的子集:

    [{
    "id": 1,
    "name": "张三"
    }]

    抽奖结果列表result,按奖项顺序索引:

    [[{
    "id": 1,
    "name": "张三"
    }], [{
    "id": 2,
    "name": "李四"
    }]]

    2参数配置页面

    包括奖项设置和参与人员列表。

    12690eb0aa86a2a89b5526b7b76fa60b.png

    3抽奖页面

    ca32933b088177d014edfe3e0bb86e92.png

    具体代码可以去我的 Github 项目

    https://github.com/kaysonli/lucky-ball 

    查看,方便的话可以点个 star。

    也可以先体验一下(在 PC 上打开):

    http://luckyball.surge.sh/index.html

    由于时间仓促,代码写得比较将就。

    年会当天抽中了四等奖:1000元购物卡。我是不是该庆幸自己没中特等奖……

    祝大家好运!

    cb393802f13709ee43efeb9c6d1353fa.png

    展开全文
  • 对于年会,大家最关心的应该就是抽奖了吧?虽然中奖概率通常不高,但总归是个机会,期待一下也是好的。最近,我们部门举办了年会,也有抽奖环节。临近年会的前几天,Boss 突然找到我,说要做一个抽奖程序,部门年会...

    背景

    临近年末,又到了各大公司举办年会的时候了。对于年会,大家最关心的应该就是抽奖了吧?虽然中奖概率通常不高,但总归是个机会,期待一下也是好的。

    最近,我们部门举办了年会,也有抽奖环节。临近年会的前几天,Boss 突然找到我,说要做一个抽奖程序,部门年会要用。我当时都懵了:就三天时间,万一做的程序有bug,岂不是要被现场百十号人的唾沫给淹死?没办法,Boss 看起来对我很有信心,我也只能硬着头皮上了。

    需求

    1. 要一个设置页面,包括设置奖项、参与人员名单等。
    2. 如果单个奖项中奖人数过多,可分批抽取,每批人数可设置。
    3. 默认按奖项顺序抽奖,也可选定某个奖项开始。
    4. 可删除没到场的中奖者,同时可再次抽取以作替补。
    5. 可在任意奖项之间切换,可查中奖记录名单
    6. 支持撤销当前轮次的抽奖结果,重新抽取。

    实现

    身为Web前端开发,自然想到用Web技术来实现。本着不重复造轮子的原则,首先求助Google,Github。搜了一圈好像没有找到特别好用的程序能直接用的。后来看到一个Github上的一个项目,用 TagCanvas 做的抽奖程序,界面挺好,就是逻辑有问题,点几次就崩溃了。代码是不能拿来用了,标签云这种抽奖形式倒是可以借鉴。于是找来文档看了下基本用法,很快就集成到页面里了。

    由于设置页面涉及多种交互,纯手写太费时间了,直接用框架。平时 Element UI 用得比较多,自然就用它了。考虑到年会现场可能没有网络,就把框架相关的JS和CSS都下载到本地,直接引用。为了快速开发,也没搭建webpack构建工具了,直接在浏览器里引入JS。

        
    1. 先设计数据结构。 奖项列表 awards
    [{    "name": "二等奖",    "count": 25,    "award": "办公室一日游"}, {    "name": "一等奖",    "count": 10,    "award": "BMW X5"}, {    "name": "特等奖",    "count": 1,    "award": "深圳湾一号"}]

    参与人列表 members

    [{  "id": 1,  "name": "张三"}, {  "id": 2,  "name": "李四"}]

    待抽奖人员列表players,是members 的子集

    [{  "id": 1,  "name": "张三"}]

    抽奖结果列表result,按奖项顺序索引

    [[{    "id": 1,    "name": "张三"}], [{    "id": 2,    "name": "李四"}]]
    1. 设置页面 包括奖项设置和参与人员列表。
    e81c325762ed0c80c1334f49c90976b9.png
    1. 抽奖页面

    具体代码可以去我的https://github.com/kaysonli/lucky-ball 项目 查看,也可以现在体验一下。由于时间仓促,代码写得比较将就。

    年会当天抽中了四等奖:1000元购物卡。我是不是该庆幸自己没中特等奖……

    我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取


    作者:KaysonLi
    链接:https://juejin.im/post/5e01881751882512243fa650

    展开全文
  • 奇技指南年会总离不开一个环节——抽奖。一个正经的抽奖程序应该怎么写捏?本文转载自奇舞周刊,作者奇舞团团长月影一个正经的抽奖程序的诞生奇舞团有一个传统项目,每年年会由我在现场写一个抽奖程序,所有人一起...
  • JS公司年会抽奖程序

    2020-08-26 00:35:20
    JS公司年会抽奖程序 JS公司年会抽奖程序,3D数字球形动画,点击开始运行抽奖程序,点击停止,显示中奖号码。
  • JS公司年会抽奖程序,3D数字球形动画,点击开始运行抽奖程序,点击停止,显示中奖号码。
  • 年会抽奖 js

    2019-01-16 16:41:20
    年会抽奖,一人一个号码,从一系列号码中抽取中奖号码, 。适合公司年会聚会使用。 抽取方法是循环滚动抽奖列表,按停止或空格键就停止,当前显示的号码即为中奖号码。没有使用随机数。 本地localStorage保存,刷新...
  • JS年会抽奖程序

    2012-01-13 16:05:02
    一个简单的JS抽奖程序,页面内有具体的代码注释,能够满足一些简单的人员抽奖。下载下来具体看一下就知道了。。
  • 年会抽奖 js 1.1版

    2019-01-23 10:41:08
    年会抽奖,一人一个号码,从一系列号码中抽取中奖号码 。适合公司年会聚会使用。 抽取方法是循环滚动抽奖列表,按停止或空格键就停止,当前显示的号码即为中奖号码。没有使用随机数。 本地localStorage保存,刷新...
  • 一款简单的年终年会抽奖js代码,可用于企业等组织年终抽奖大会活动,把奖品图片换成自己的就可以了。
  • 可用于年会抽奖的一个系统 此项目不和后台数据库交互 简单易用 项目目前无bug 解压打开Lottery.html即可应用。
  • 年会抽奖用。嘉宾入场后一一在线拍照,照片入库后,可以对照片进行抽奖。 下载地址:http://git.oschina.net/caichong/nianhui_choujiang ...
  • 1、号码抽取等级、数量自由定义 可在系统上配置或修改ini.js 2、全屏幕显示1024X768像素,界面美观大方,适合于投影仪投射晚会晚宴豪华场所抽奖系统。 3、可自由选择键盘及鼠标双重操作方式。 4、只需要IE浏览器即可...
  • 年会抽奖系统(css+div+js)效果很好!换个背景直接可以用! 本人也是JS初学者,公司年会抽奖需要,做了个css+div+js的抽奖效果!效果还不错,代码关键部分有注释,欢迎大家下载修改使用!
  • 实现滚动数字和音效的抽奖。 目前只有IE8上测试过,完好。 借鉴了互联网上的思想。 开源免费。亲们可以下载。
  • 给一个公司年会抽奖用的,用html+js简单实现了一个。有走马灯效果和照片轮流闪过的效果,抽奖时随机展示一张照片 可以把公司员工的照片按照数字编号放入文件夹中,被抽中的人不再此参与抽奖。 基本都是自己写的,...
  • 年会抽奖软件,主要使用html和js,姓名+电话号随机滚动,奖品和奖品等级也显示,中奖结果列表显示。
  • 年会抽奖系统H5版

    2019-02-15 12:17:17
    H5版本的年会抽奖代码,修改Member.js添加自己的奖池人员,修改Index中的抽奖人员即可使用
  • js实现年会现场幸运观众抽奖系统源码下载 js实现年会现场幸运观众抽奖系统源码下载
  • 年会抽奖软件

    2017-03-12 11:13:35
    2.用同样的方式打开js文件夹下的dataSource.js文件。里面每个大括号中间的tel后面的数字代表白名单号码。添加的话请按照同样的格式添加。 例如想让8号中奖那么需要在里面添加如下内容。 ,{ "tel":8 } 3....
  • 公司年会抽奖小程序 html+javascript源代码 后门设置指定中奖 排除设置指定不中奖 自定义皮肤 请运行在google chrome浏览器或火狐浏览器下 按键盘空格键或者字母A可进行抽取,隐藏菜单请按ESC。 建议每组选出10个...
  • 年会抽奖系统,采用php语言编写,html,js,增加登录验证,防止其他人作弊,抽奖后显示抽奖信息,奖项个数可以随意设置,几等奖也可以设置
  • 本文实例为大家分享了js实现年会抽奖程序的具体代码,供大家参考,具体内容如下 需求分析 1.多轮抽奖,每轮只有3个环节:展示奖品图,人名闪动,停止闪动确定中奖名单 2.中奖分级,例如试用期员工不能中二等奖或以上...
  • 佣金宝年会抽奖系统 使用说明 js/users.js 名单及图片地址数据(一个json数组) 图片放置在photos目录 o键: 清除中奖数据 enter键:开始/暂停 抽奖 s键: 显示已抽人数 ctrl [1~9] 快速设置抽取人数 时间...
  • JS开发抽奖活动.zip

    2020-01-09 14:31:51
    js开发的抽奖活动,可以在公司年会上使用,亲测可以使用,部署比较简单,下载下来,解压打开index 文件就可以了
  • JS与css3给你带来抽奖的小效果,请笑纳 开发工具与关键技术:DW CSS3、JavaScript 作者:张赵敏 撰写时间:2019/1/31 年终到了,年会少不了。这时候的你是不是很期待年终奖,是不是更期待年会上的抽奖活动呢?这么...

空空如也

空空如也

1 2 3 4
收藏数 73
精华内容 29
关键字:

js年会抽奖