web前端年会抽奖工具

最新推荐文章于 2023-09-01 09:00:00 发布

别来无恙``

最新推荐文章于 2023-09-01 09:00:00 发布

阅读量3.9k

点赞数 1

分类专栏： jQuery 文章标签：工具抽奖

本文链接：https://blog.csdn.net/qq_34439125/article/details/87067033

版权

jQuery 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

笔者今天已经上班了，但是没有什么事情做，就把公司年会用到的抽奖工具跟大家分享一下。下面是素材和代码，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>

别来无恙``

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
web前端年会抽奖工具

笔者今天已经上班了，但是没有什么事情做，就把公司年会用到的抽奖工具跟大家分享一下。下面是素材和代码，jquery请自己下载。版本不要太低哦。@charset "utf-8";/** * @created : 2019/02/01 * @author : Kamto * @version : v1.0 * @desc : 年会抽奖代码 */...
复制链接

扫一扫