web前端年会抽奖工具

笔者今天已经上班了，但是没有什么事情做，就把公司年会用到的抽奖工具跟大家分享一下。下面是素材和代码，jquery请自己下载。版本不要太低哦。

@charset "utf-8";/*** @created :   2019/02/01* @author  :   Kamto* @version :   v1.0* @desc    :   年会抽奖代码*/*{margin: 0;padding: 0;
}
html,body{width: 100%;height: 100%;
}
body{background: url("pc_bg1.jpg") top;background-size: cover;
}
.main-box{width: 1500px;margin: 0 auto;padding-top: 80px;position: relative;
}
/*******title********/
.title-box{width: 80%;margin: 0 auto;text-align: center;margin-left: 82px;
}
.title-box img{display: inline-block;max-width: 100%;
}
/*******desc********/
.desc-box{position: absolute;left: -32px;top: -24px;width: 100%;z-index: 5;
}
.desc-box img{z-index: 6;
}/*******抽奖主体********/
.main{width:1000px;height:300px;position:relative;margin:0 auto;margin-top: -60px;
}
.num-bg-box{position: relative;width: 988px;height: 262px;border: 3px solid #000;background-color: #fff;box-sizing: border-box;box-shadow: 25px 25px 20px #a30e16;-webkit-box-shadow: 25px 25px 20px #a30e16;-moz-box-shadow: 25px 25px 20px #a30e16;z-index: 8;
}
.num_box{height:100px;width:770px;position:absolute;left:50%;top:50%;margin-left:-378px;margin-top: -50px;z-index:8;overflow:hidden;text-align:center;}
.num{background:url(../images/num1.png) top center repeat-y;float:left;width: 64px;height: 100px;margin-right:6px;
}
.main p{text-align: center;font-size: 36px;color: #fefefe;letter-spacing: 5px;margin-top: 20px;
}
.btn-box{height: 50px;width: 540px;margin: 0 auto;overflow: hidden;z-index: 999;position: relative;top: 10px;
}
.btn{width:260px;height:50px;float: left;line-height: 50px;box-sizing: border-box;text-align: center;cursor:pointer;border: 1px solid #000;background-color: #fff;
}
.btn:hover{background-color: #21ba45;color: #fff;
}
.btn:last-child{margin-left: 20px;
}

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>公司年会抽奖</title><link rel="stylesheet" href="./index.css"><script type="text/javascript" src="./jquery.min.js"></script><style>.num_box {font-size: 70px;}</style></head><body><!-- 主体盒子--><div class="main-box"><!-- 喜迎新年--><div class="title-box"><img src="./pc-titile.png" alt=""></div><!-- 装饰点缀--><div class="desc-box"><img src="./dianzhui.png" alt=""></div><div class="main"><!-- 数字背景盒子--><div class="num-bg-box"><!-- 数字盒子--><div class="num_box">祝你好运~</div></div></div></div><!-- 操作按钮--><div class="btn-box"><div class="btn start">开始抽奖</div><div class="btn stop">停止抽奖</div></div><!--js--><script>$(function () {$('.start').click(function () {if (!isStart) {isStart = true;actuator = setInterval(function () {index = random(0, NAMEARRAY.length - 1);$('.num_box').text(NAMEARRAY[index]);}, 50);} else {return;}});$('.stop').click(function () {if (isStart) {isStart = false;window.clearInterval(actuator);NAMEARRAY.splice(index, 1);} else {return;}});})var actuator = null;var index = null;var isStart = false;var NAMES = "吴晓军、王浩军、田春艳、陈付强、赵利国、张丹贵、袁保禄、冯云飞、赵越、陈宁、马宏、林彬彬、纪岚菲、张彦普、崔梦娜、李建萍、陈曦、李红华、马素侠、王哲、贺伟华、杨晨芳、罗力、董萌、何烁、李婷婷、杨晶晶、张姗、赵琨、张玉、苗卉、穆彤、陈健璋、张静、尤泽润、赵坤、史学峰、王景朝、周军帅、陈雪、张锦涛、赵青、李  娇、靳焕新、马坤、高振杰、郑丽丽、封英、王义芳、郭乃欣、杨春霞、王敬轩、周鹏飞、陆桂萍、刘悦、艾岩、陈洁、张莎莎、白淑月、耿晓宇、曹梦美、康风丽、陈曦、董利刚、陈洁、陈翠萍、张聚云、李亚垒、马瑞娜、张倩倩、张伟梦、王彩霞、于琼、邵艳芸、苏园、陈迎晓、刘晶、白亚东、王思晗、田婧思、丁怡、王静、朱春平、刘翠玲、孟爽、刘千惠"var NAMEARRAY = NAMES.split('、');function random(lower, upper) {return Math.floor(Math.random() * (upper - lower + 1)) + lower;}</script>
</body></html>

web前端年会抽奖工具相关推荐

各式 Web 前端開發工具整理
各式 Web 前端開發工具整理這裡收集了一系列各式各樣與「網頁前端」相關的開發工具.函式庫與參考文件,這些工具僅針對一般桌上型/筆記型電腦的顯示環境為主 (不含平板或手機等行動版網頁相關工具). 程 ...
Web前端开发必备工具推荐
http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...
web前端开发小工具集合
收集的一些轻量级非常实用的前端开发小工具,以后还会不定期进行更新,现将目前收集的信息列表如下: CSS 3相关 1.CSS3样式生成器:http://www.css88.com/tool/css3 ...
干货 | Web前端优化及工具集锦
原文地址:http://www.csdn.net/article/2013-09-23/2817020-web-performance-optimization 前端的性能对于一个Web应用来说非 ...
关于WEB前端开发的工具
俗话说:"工谷善其事,先必利其器."一个用得顺手的工具,确实能为我们的开发带来方便,更重要的是会让我们更加享受工具开发过程中所带来的乐趣. 1.编码工具: 记事本之类的编辑器都可 ...
web前端代码开发工具_Web开发人员的有用代码比较工具
许多不同语言的开发人员都有着共同的成长难题. 冗长的源代码将在开发人员的整个职业生涯中成为一个棘手的问题,但是考虑较少的问题是编译和合并来自同一源的两个或更多副本的编辑. 幸运的是,对于这种情况,有非 ...
python 抽奖器_如何基于python实现年会抽奖工具
用python来实现一个抽奖程序,供大家参考,具体内容如下主要功能有 1.从一个csv文件中读入所有员工工号 2.将这些工号初始到一个列表中 3.用random模块下的choice函数来随机选择列表 ...
好程序员web培训简述web前端开发工具有哪些
好程序员web培训简述web前端开发工具有哪些,随着互联网技术的发展,用户对于web网页的依赖性越来越重,这对于web前端开发工程师的要求也在不断提高.作为开发者来说,开发工作需要依赖很多开发工具的协 ...
性能测试理论初探（七）性能测试工具介绍目前知道哪些性能工具？分别用在什么软件或平台的性能测试？服务端、web前端、移动端等性能测试工具有哪些？
文章目录一.前言二.常见性能测试工具 1.服务端性能测试工具 1.1 Jmeter 1.2 Locust 1.3 LoadRunner 1.4 LoadNinja 1.5 Jmeter + Pro ...

web前端年会抽奖工具

web前端年会抽奖工具相关推荐

最新文章

热门文章