专栏首页蚂蚁开源社区又到公司年会时,给公司写的年会抽奖程序!

又到公司年会时,给公司写的年会抽奖程序!

HTML代码:

<html> <head> <meta charset="utf-8"> <title>公司年终抽奖专用程序</title> <link href="./css/style.css" type="text/css" rel="stylesheet" media="screen, projection"> <link href="./css/style1.css" type="text/css" rel="stylesheet" media="screen, projection"> <link href="./css/ui-dialog.css" type="text/css" rel="stylesheet" media="screen, projection"> </head> <body scroll="no"> <div class="readme hide"> <p>▪ 按键盘空格键或者字母A可进行抽取,隐藏菜单请按ESC。</p> <p>▪ ESC菜单中高级设置可以设置参与人数,格子大小,重置抽奖数据等信息。</p> <p>▪ 点击已经中奖格子并输入点击的格子编号可取消该格子中奖状态,并清除中奖信息。</p> <p>▪ 中奖信息保存在本机上,如清理缓存活更换机器则记录将消失。</p> <p>▪ 请使用Chrome浏览器浏览,在投影仪上展示,请进入浏览器的全屏模式浏览。</p> </div> <div id="bodybg"> <img src="./images/bodybg1.jpg" class="stretch"/> </div> <div class="model hide"> <p><b>标题:</b><input type="text" id="title" class="ui-dialog-autofocus" value="" placeholder="输入标题,可以为空。"/></p> <p><b>人数:</b><input type="text" id="personCount" class="ui-dialog-autofocus" value="" placeholder="输入人数,请输入数字。"/></p> <p><b>方格宽:</b><input type="text" id="itemk"></p> <p><b>方格高:</b><input type="text" id="itemg"></p> <p class="line"><label><input type="radio" name="ms" style="width:15px;" checked value="50">眼花缭乱模式</label> <label><input type="radio" name="ms" style="width:15px;" value="300">惊心动魄模式</label></p> <p><label>蓝色经典<input type="radio" name="pf" style="width:15px;" checked value="1"></label> <label>清新典雅<input type="radio" name="pf" style="width:15px;" value="2"></label></p> <p class="line"><label><input type="checkbox" id="reset" value="1"/>重置已产生的抽奖数据</label></p> </div> <div class="top">公司年终抽奖专用程序</div> <div class="items"></div> <div class="menu"> <div class="help"> 按键盘空格键或者字母A可进行抽取,查看帮助请按F1,隐藏请按ESC。 <a href="javascript:;" class="config">高级设定</a> </div> <div class="ss"> <h2>中奖结果:</h2> <ol></ol> </div> </div> <audio id="runingmic" class="hide" loop><source src=".\music\runing.wav"></audio> <audio id="pausemic" class="hide"><source src=".\music\stop.mp3"></audio> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/jquery.pulsate.min.js"></script> <script type="text/javascript" src="./js/dialog-plus-min.js"></script> <script type="text/javascript" src="./js/app.js"></script> </body> </html>

引入CSS代码:

<link href="./css/style.css" type="text/css" rel="stylesheet" media="screen, projection"> <link href="./css/style1.css" type="text/css" rel="stylesheet" media="screen, projection"> <link href="./css/ui-dialog.css" type="text/css" rel="stylesheet" media="screen, projection">

引入js代码:

<script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/jquery.pulsate.min.js"></script> <script type="text/javascript" src="./js/dialog-plus-min.js"></script> <script type="text/javascript" src="./js/app.js"></script>

可以进行设置,无数据库!

下载源码,请点击阅读原文。

↓↓↓↓↓↓

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:思齐大神

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 支持animate.css动画的jquery弹出层特效

    jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时,配置模态窗口打开和关闭时的CSS3,使用非常炫...

    用户5997198
  • 基于WebGL的超逼真仿透明液体流动变形效果教程

    这是一款基于WebGL的超逼真液体流动变形效果。该效果使用PixiJS和GSAP来制作,以轮播图的方式来展现不同类型的液体流动变形效果。液体流动变形效果共5组...

    用户5997198
  • 碉堡了,基于HTML5 WebGL的图像扭曲变形动画开源特效

    这是一款基于HTML5 WebGL的图像扭曲变形动画特效。该特效中,通过Three.js来制作从一幅缩略图,扭曲变形为全屏大图的动画特效,共有6种炫酷的动画效果...

    用户5997198
  • web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)

    插件也称扩展,是一种遵循一定规范的应用程序接口编写出来的程序。 1.jQuery表单验证插件-Validation: 最常使用JavaScript的场合就是表...

    Java帮帮
  • webpack实战——样式文件分离

    在之前篇章里面主要是对js的打包应用和处理,而打包方面另外一个重要工作就是样式处理。

    流眸
  • mydate97时间控件的使用

    mydate97官网: http://www.my97.net/dp/index.asp   1:用法如下所示,首先下载一个这个东西:     链接:http:...

    别先生
  • agc007C - Pushing Balls(期望 等差数列)

    $d' = \frac{(2n - 2)d + d + 2x + 3d + 3x)}{2n}$(考虑第一个位置怎么变)

    attack
  • 正则表达式同时验证手机和座机号码

    JS同时验证固话和手机号正则表达式,验证规则: 1:当input框没有填写号码的时候,input为空,可通过验证 2:当手机号码填写正确的时候,可通过验证 ...

    王小婷
  • 企业为何实施大数据?

    从2012年,全球吹起了大数据风潮,任何行动方案,言必称大数据。三年过去了,似乎仍是外热内冷:言者谆谆,听藐藐。究其原因,实乃企业不知为何着手(不知为何而战),...

    CDA数据分析师
  • InnoDB索引允许NULL对性能有影响吗

    结论4,定义列值允许为NULL并不会增加物理存储代价,但对索引效率的影响要另外考虑

    老叶茶馆

扫码关注云+社区

领取腾讯云代金券