jquery实现大气通用活动礼品随机抽奖代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery实现大气通用活动礼品随机抽奖代码，设置参与抽奖人员后，设置奖项，分特等奖、一等奖、二等奖、三等奖、幸运奖等奖项，每个奖项的获奖人数不一样。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta content="maximum-dpr=2" name="flexible" />
 
<style>
@charset "utf-8";
html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
html,body{font-family:sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}
q:before,q:after{content:''}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
a:hover{text-decoration:underline}
ins,a{text-decoration:none}
html {
  background-color: #a71015;
  height: 100%;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.lottery-bg {
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/bg.jpg") no-repeat center top;
  background-size: 100% 100%;
  /*  background: #a71015;*/
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* 头部窗帘 */
.lottery-banner {
  display: flex;
  justify-content: space-between;
}

.lottery-banner .top-curtain {
  /* width: 803px;
    height: 189px;*/
  width: 10.71rem;
  height: 1.82rem;
  z-index: -1;
}
.lottery-banner .top-curtain img {
  width: 100%;
}

.lottery-banner .right {
  transform: rotateY(180deg);
  position: relative;
}

/* 金色春字 */
.lottery-banner .right:after {
  content: "";
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/golden_chun.png") no-repeat center top;
  background-size: 100% 100%;
  position: absolute;
  /* width: 387px;
    height: 634px;*/
  width: 5.16rem;
  height: 8.45rem;
  left: 0;
  top: 0;
  transform: rotateY(180deg);
  z-index: -1;
}

.lottery-banner .left:after {
  content: "";
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/golden_chun.png") no-repeat center top;
  background-size: 100% 100%;
  position: absolute;
  /*width: 387px;
    height: 634px;*/
  width: 5.16rem;
  height: 8.45rem;
  left: 0;
  transform: rotateY(180deg);
  top: 0;
  z-index: -1;
}

/* 标题 */
.lottery-title {
  /* width: 680px;
    height: 135px;*/
  width: 9.07rem;
  height: 1.8rem;
  margin: 0 auto;
  /* padding-top: 0.99rem;*/
}

.lottery-title img {
  width: 100%;
}

/* 选项卡 */
.lottery-tabs {
  /*   margin-top: 90px;
    padding: 0 280px;*/
  margin-top: 1.2rem;
  /*padding: 0 3.73rem;*/
  padding: 0 1.73rem;
  /*position: relative;*/
}

/* 选项卡导航栏 */
.lottery-tabs-nav {
  padding: 0 1.73rem;
}

.lottery-tabs .lottery-tabs-nav .tab {
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/tab.png") no-repeat center top;
  background-size: 100% 100%;
  /*width: 201px;
    height: 61px;
    font-size: 22px;*/
  width: 2.68rem;
  height: 0.81rem;
  font-size: 0.29rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffe281;
  cursor: pointer;
  z-index: 999;
}

.lottery-tabs .lottery-tabs-nav .on {
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/tab_active.png") no-repeat center top;
  background-size: 100% 100%;
  /*width: 201px;
    height: 61px;*/
  width: 2.68rem;
  height: 0.81rem;
  color: #d34436;
}

.first,
.third,
.fifth {
  float: left;
}
.second,
.fourth,
.special {
  float: right;
}
.third,
.fifth {
  clear: both;
}

.lottery-tabs .lottery-tabs-nav .tab {
  /* margin-bottom: 51px;*/
  margin-bottom: 0.68rem;
}

.lottery-tabs .lottery-tabs-nav .special {
  position: relative;
  /*  自定义按钮默认隐藏*/
  /*visibility: hidden;*/
}
.lottery-tabs .lottery-tabs-nav .special .add {
  height: 0.81rem;
  position: absolute;
  right: -0.5rem;
  font-size: 0.5rem;
  color: #ffe281;
  top: 0;
}
.lottery-tabs .lottery-tabs-nav .special .subtract {
  height: 0.81rem;
  position: absolute;
  left: -0.5rem;
  font-size: 0.5rem;
  color: #ffe281;
  top: 0;
}

/* 选项卡内容 */
.lottery-tabs .lottery-tabs-content .prize {
  display: none;
}
.lottery-tabs .lottery-tabs-content .show {
  display: block;
}

.lottery-tabs .lottery-tabs-content {
  /*width:  800px;
    height: 754px;*/
  /*width: 10.67rem;
    height: 10.05rem;*/
  margin: 0 auto;
  /* border: 1px solid black;*/
}

.lottery-tabs .lottery-tabs-content .prize .goods-img {
  /* width: 224px; */
  /* height: 239px;*/
  /*width: 4.99rem;*/
  /* height: 3.19rem;*/
  margin: 0 auto;
  width: 17%;
}

.lottery-tabs .lottery-tabs-content .prize .goods-img img {
  width: 100%;
}

.lottery-tabs .lottery-tabs-content .prize .goods-name {
  /*font-size: 32px;*/
  /*line-height: 100px;*/
  font-size: 0.63rem;
  /*line-height: 1.53rem;*/
  /*line-height: 2.03rem;*/
  margin-top: 3%;
  text-align: center;
  color: #fceb81;
  text-shadow: 2px 2px 0px #000;
}

.lottery-tabs .lottery-tabs-content .prize .people-name {
  /*font-size: 28px;*/
  /*line-height: 100px;*/
  font-size: 0.37rem;
  line-height: 1.33rem;
  text-align: center;
  color: #ffe281;
  font-weight: bold;
  position: absolute;
  left: 0;
  bottom: -1rem;
  z-index: 3;
  width: 100%;
  text-shadow: 2px 2px 0px #000;
}

/* 奖品名称 */
.lottery-tabs .lottery-tabs-content .prize .lottery-absolute {
  font-size: 0.7rem;
  line-height: 1.33rem;
  text-align: center;
  color: #ffe281;
  font-weight: bold;
  text-shadow: 2px 2px 0px #000;
  position: fixed;
  top: 40%;
  width: 100%;
  z-index: -1;
  left: 0;
}
/* 奖品名称 */
.lottery-tabs .lottery-tabs-content .prize .lottery-absolute-timerout {
  font-size: 3rem;
  line-height: 1.33rem;
  text-align: center;
  /* color: #ffe281; */
  color: #a5a5a5;
  font-weight: bold;
  text-shadow: 2px 2px 0px #000;
  position: fixed;
  top: 40%;
  width: 100%;
  z-index: -1;
  left: 0;
}

/* 参与抽奖人员头像 */
.lottery-tabs .lottery-tabs-content .prize .people-absolute {
  /*width: 78%;
    position: absolute.........完整代码请登录后点击上方下载按钮下载查看