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;
    bottom: 3%;*/
  /*margin-top: 1vh;*/
  position: fixed;
  bottom: 7%;
  width: 100%;
  z-index: 3;
  left: 0;
}

.lottery-tabs .lottery-tabs-content .prize .people-ul,
.lottery-tabs .lottery-tabs-content .prize .people-name-ul {
  display: flex;
  justify-content: space-around;
}

.lottery-tabs .lottery-tabs-content .prize .people-ul,
.lottery-tabs .lottery-tabs-content .prize .people-name-ul .people-name-li {
  font-size: 0.37rem;
  line-height: 1.33rem;
  text-align: center;
  color: #fceb81;
  position: relative;
  z-index: 3;
}

.lottery-tabs .lottery-tabs-content .prize .people-ul .people-li {
  /* width: 336px;
    height: 214px;*/
  width: 6.48rem;
  height: 3.85rem;
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/border_crown.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
}

.lottery-tabs .lottery-tabs-content .prize .people-ul .people-li img {
  /*width: 174px;
    height: 174px;*/
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
}

/* 中奖名单 */
.List-winners {
  position: fixed;
  bottom: 3%;
  width: 2rem;
  height: 0.7rem;
  z-index: 3;
  right: 9%;
  background-color: #ffd960;
  border: 2px solid #ffbf57;
  border-radius: 0.1rem;
  line-height: 0.7rem;
  text-align: center;
  font-size: 0.3rem;
  color: #87010c;
}

/* 抽奖开始按钮 */

.lottery-btn {
  position: absolute;
  bottom: 2%;
  right: 2%;
  z-index: 999;
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/btn.png") no-repeat center top;
  background-size: 100% 100%;
  /* width: 130px;
    height: 130px;*/
  width: 1.73rem;
  height: 1.73rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.lottery-btn p {
  color: #87010c;
  /*font-size:32px;*/
  font-size: 0.43rem;
}

/* 底部扇子 */
.lottery-bg .bottom-fan {
  /*width: 542px;
    height: 290px;*/
  width: 7.23rem;
  height: 3.87rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.lottery-bg .bottom-fan-right {
  /*width: 542px;
    height: 290px;*/
  width: 7.23rem;
  height: 3.87rem;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: rotateY(180deg);
  z-index: 2;
}

.lottery-bg .bottom-fan img,
.lottery-bg .bottom-fan-right img {
  width: 100%;
  display: block;
}

/* 底部木板 */
.lottery-bg .bottom-floor {
  width: 100%;
  /*height: 129px;*/
  height: 1.72rem;
  position: absolute;
  left: 0;
  bottom: 3%;
  z-index: 1;
}
.lottery-bg .bottom-floor img {
  width: 100%;
  display: block;
}

/* 皇冠定位 */
.lottery-tabs .lottery-tabs-content .prize .people-ul .first-crown:after {
  content: "";
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/first_crown.png") no-repeat center top;
  background-size: 100% 100%;
  position: absolute;
  /*width: 186px;
    height: 106px;*/
  /*left: 53px;
    top: -38px;*/
  width: 2.48rem;
  height: 1.41rem;
  /*left: 1.01rem;*/
  top: -0.83rem;
}

.lottery-tabs .lottery-tabs-content .prize .people-ul .second-crown:after {
  content: "";
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/second_crown.png") no-repeat center top;
  background-size: 100% 100%;
  position: absolute;
  /*width: 186px;
    height: 106px;*/
  /*left: 53px;
    top: -38px;*/
  width: 2.48rem;
  height: 1.41rem;
  /*left: 1.01rem;*/
  top: -0.83rem;
}

.lottery-tabs .lottery-tabs-content .prize .people-ul .third-crown:after {
  content: "";
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/third_crown.png") no-repeat center top;
  background-size: 100% 100%;
  position: absolute;
  /*width: 186px;
    height: 106px;*/
  /*left: 53px;
    top: -38px;*/
  width: 2.48rem;
  height: 1.41rem;
  /*left: 1.01rem;*/
  top: -0.83rem;
}

.lottery-tabs .lottery-tabs-content .prize .people-ul .fourth-crown:after {
  content: "";
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/fourth_crown.png") no-repeat center top;
  background-size: 100% 100%;
  position: absolute;
  /*width: 186px;
    height: 106px;*/
  /*left: 53px;
    top: -38px;*/
  width: 2.48rem;
  height: 1.41rem;
  /*left: 0.95rem;*/
  top: -0.36rem;
}

.lottery-tabs .lottery-tabs-content .prize .people-ul .fifth-crown:after {
  content: "";
  background: url("//repo.bfw.wiki/bfwrepo/images/choujiang/fifth_crown.png") no-repeat center top;
  background-size: 100% 100%;
  position: absolute;
  /*width: 186px;
    height: 106px;*/
  /*left: 53px;
    top: -38px.........完整代码请登录后点击上方下载按钮下载查看