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;*/
  width: 2.48rem;
  height: 1.41rem;
  /* left: 0.95rem;*/
  top: -0.36rem;
}
/* 皇冠定位结束 */

/* 图层蒙版 start */
/* CSS样式 */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 100%;

  z-index: 10000;
  overflow: auto;
  /* padding: 20px; */
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 13px;
  cursor: pointer;
  color: white;
  font-size: 0.5rem;
}

.content {
  /* 设置大图片背景 */
  background-image: url("//repo.bfw.wiki/bfwrepo/images/choujiang/bg-1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100%;
  color: #f2ba10;
  display: flex;
  flex-direction: column;
}
.modal-header {
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  margin-top: 0.5rem;
}
.modal-lottery {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}
.lottery-level-outer {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* background-color: pink; */
  margin-bottom: 0.3rem;
}
.lottery-level-header {
  width: 100%;
  height: 0.6rem;
  font-size: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  margin-bottom: 0.15rem;
}
.lottery-level-main {
  width: 100%;
  margin: 0 auto;
  /* height: 2rem; */
  display: flex;
  flex-wrap: wrap;
}
.lottery-level-main-item {
  width: 20%;
  height: 0.6rem;
  /* background-color: orange; */
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.45rem;
}
/* 图层蒙版 end */

.lottery-special-level {
  flex: 1;
  justify-content: center;
  align-items: center;
}
.lottery-one-level {
  flex: 1;
  width: 33%;
}

/* 媒体查询 */
@media screen and (max-width: 1023px) {
  .lottery-tabs .lottery-tabs-content .prize .people-name {
    font-size: 0.27rem;
  }
}
@media screen and (width: 1024px) {
  .lottery-tabs .lottery-tabs-content .prize .people-name {
    font-size: 0.33rem;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1279px) {
  .lottery-tabs .lottery-tabs-content .prize .people-name {
    font-size: 0.33rem;
  }
}
@media screen and (width: 1280px) {
}
@media screen and (min-width: 1281px) and (max-width: 1365px) {
}
@media screen and (width: 1366px) {
  /* absolute */
  /* .lottery-tabs .lottery-tabs-content .prize .people-absolute{
        width: 87%;
    }*/
  .lottery-tabs .lottery-tabs-content .prize .goods-img {
    width: 3.39rem;
    height: 3.19rem;
    margin-top: -0.3rem;
  }
  .lottery-tabs .lottery-tabs-content .prize .goods-name {
    font-size: 0.33rem;
    margin-top: 1%;
  }
}
@media screen and (min-width: 1367px) and (max-width: 1439px) {
}
@media screen and (width: 1440px) {
}
@media screen and (min-width: 1441px) and (max-width: 1599px) {
}
@media screen and (width: 1600px) {
  .lottery-tabs {
    margin-top: 2.2rem;
  }
}
@media screen and (max-width: 1800px) and (max-height: 520px) {
  .lottery-tabs .lottery-tabs-content .prize .people-ul .people-li {
    width: 4rem;
    height: 2.5rem;
  }
  .lottery-tabs .lottery-tabs-content .prize .people-ul .people-li img {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
  }
  .lottery-tabs {
    margin: 0rem auto 0 !important;
    padding: 0 2.5rem;
  }
  .lottery-banner .top-curtain {
    width: 5.71rem;
  }
  .lottery-tabs .lottery-tabs-content .prize .goods-name {
    margin-top: 0%;
    line-height: 3.53rem;
  }
  .lottery-tabs .lottery-tabs-content .prize .people-absolute {
    width: 80%;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    bottom: 11%;
  }
  .lottery-title {
    width: 6rem;
    height: 1.8rem;
    margin: 0 auto;
    /* padding-top: 0.99rem; */
    position: fixed;
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
  }
  .lottery-tabs .lottery-tabs-content .prize .people-ul .first-crown:after {
    top: -1.3rem;
  }
  .lottery-tabs .lottery-tabs-content .prize .people-ul .second-crown:after {
    top: -1.3rem;
  }
  .lottery-tabs .lottery-tabs-content .prize .people-ul .third-crown:after {
    top: -1.3rem;
  }
  .lottery-tabs .lottery-tabs-content .prize .people-ul .fourth-crown:after {
    top: -0.95rem;
  }
  .lottery-tabs .lottery-tabs-content .prize .people-ul .fifth-crown:after {
    top: -0.95rem;
  }
  .lottery-bg .bottom-fan {
    width: 4rem;
    height: 3.87rem;
    bottom: -1.75rem;
  }
  .lottery-bg .bottom-fan-right {
    width: 4rem;
    height: 3.87rem;
    bottom: -1.75rem;
  }
  .lottery-bg .bottom-floor {
    bottom: 2%;
  }
  .lottery-banner .left:after,
  .lottery-banner .right:after {
    height: 6.3rem;
  }
  .lottery-tabs .lottery-tabs-content .prize .lottery-absolute {
    top: 38%;
    transform: translateY(-38%);
  }

  .lottery-tabs .lottery-tabs-content .prize .lottery-absolute-timerout {
    font-size: 2.4rem;
    top: 26%;
    height: 3rem;
    line-height: 3rem;
  }
  .lottery-bg {
    background-position: center;
  }

  /* 模态框 */
  .modal-header {
    font-size: 0.65rem;
    margin-top: 0.1rem;
    margin-bottom: 0.05rem;
  }
  .modal-lottery {
    font-size: 0.6rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }
  .lottery-level-outer {
    margin-bottom: 0.03rem;
  }
  .lottery-level-header {
    margin-bottom: 0rem;
    font-size: 0.5rem;
  }
  .close-btn {
    font-size: 0.6rem;
  }
  .modal-lottery {
    display: none;
  }
  .lottery-tabs .lottery-tabs-nav .tab {
    margin-bottom: 0.4rem;
    height: 0.85rem;
    font-size: 0.3rem;
  }
  .List-winners {
    right: 7.7%;
    cursor: pointer;
  }
  .lottery-tabs .lottery-tabs-content .prize .people-name {
    font-size: 0.455rem;
  }
}
@media screen and (width: 1920px) {
  /* tab */
  .lottery-tabs .lottery-tabs-nav .tab {
    width: 3.2rem;
    height: 0.99rem;
    font-size: 0.36rem;
    margin-bottom: 0.98rem;
  }
  .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: 3.2rem;
    height: 0.99rem;
    color: #d34436;
  }
  /* 奖品图片位置 */
  .lottery-tabs .lottery-tabs-content .prize .goods-img {
    padding-top: 0.9rem;
  }

  /* add & subtract */
  .lottery-tabs .lottery-tabs-nav .special .add,
  .lottery-tabs .lottery-tabs-nav .special .subtract {
    top: 0.06rem;
  }
  /* absolute */
  /* .lottery-tabs .lottery-tabs-content .prize .people-absolute{
        width: 91%;
    }*/
  /* 地板位置 */
  .lottery-bg .bottom-floor {
    bottom: 5%;
  }

  /* 每一个li的间距调整 */
  .lottery-tabs .lottery-tabs-content .prize .people-ul,
  .lottery-tabs .lottery-tabs-content .prize .people-name-ul .people-name-li {
    padding: 0 15%;
  }
  .lottery-level-header {
    margin-top: 0.4rem;
  }
}
@media screen and (min-width: 1921px) and (max-width: 2559px) {
}
@media screen and (width: 2560px) {
  /* 标题 */
  .lottery-title {
    width: 16.07rem;
  }
  /* 窗帘 */
  .lottery-banner .top-curtain {
    width: 18.71rem;
  }
  /* 春字 */
  .lottery-banner .left:after,
  .lottery-banner .right:after {
    width: 10.16rem;
    height: 15.45rem;
  }
  /* tab 距离春字的距离 */
  .lottery-tabs-nav {
    padding: 0rem 4.73rem;
  }

  /* tab */
  .lottery-tabs .lottery-tabs-nav .tab {
    width: 5.5rem;
    height: 1.69rem;
    font-size: 0.66rem;
    margin-bottom: 0.98rem;
  }
  .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: 5.5rem;
    height: 1.69rem;
    color: #d34436;
  }
  /* 奖品图片位置 */
  .lottery-tabs .lottery-tabs-content .prize .goods-img {
    width: 6.99rem;
  }

  /* add & subtract */
  .lottery-tabs .lottery-tabs-nav .special .add {
    top: 0.06rem;
    right: -1rem;
  }
  .lottery-tabs .lottery-tabs-nav .special .subtract {
    top: 0.06rem;
    left: -1rem;
  }
  .lottery-tabs .lottery-tabs-nav .special .add,
  .lottery-tabs .lottery-tabs-nav .special .subtract {
    font-size: 1rem;
  }
  /* absolute */
  /* .lottery-tabs .lottery-tabs-content .prize .people-absolute{
        width: 93%;
    }*/
  /* 地板位置 */
  .lottery-bg .bottom-floor {
    bottom: 5%;
  }

  /* 每一个li的间距调整 */
  .lottery-tabs .lottery-tabs-content .prize .people-ul,
  .lottery-tabs .lottery-tabs-content .prize .people-name-ul .people-name-li {
    padding: 0 15%;
  }

  /* 奖品名称字体大小 */
  .lottery-tabs .lottery-tabs-content .prize .goods-name {
    font-size: 0.93rem;
    margin-top: 11%;
  }

  /* 每一个li的大小 */
  .lottery-tabs .lottery-tabs-content .prize .people-ul .people-li {
    width: 5.68rem;
    height: 3.85rem;
  }

  /* 头像图片的大小调整 */
  .lottery-tabs .lottery-tabs-content .prize .people-ul .people-li img {
    width: 3.32rem;
    height: 3.32rem;
  }

  /* 皇冠位置的调整 */
  .lottery-tabs .lottery-tabs-content .prize .people-ul .fifth-crown:after,
  .lottery-tabs .lottery-tabs-content .prize .people-ul .fourth-crown:after {
    top: -0.5rem;
  }
  .lottery-tabs .lottery-tabs-content .prize .people-ul .third-crown:after,
  .lottery-tabs .lottery-tabs-content .prize .people-ul .first-crown:after,
  .lottery-tabs .lottery-tabs-content .prize .people-ul .second-crown:after {
    top: -1.1rem;
  }
  /* 皇冠大小的调整 */
  .lottery-tabs .lottery-tabs-content .prize .people-ul .first-crown:after,
  .lottery-tabs .lottery-tabs-content .prize .people-ul .second-crown:after,
  .lottery-tabs .lottery-tabs-content .prize .people-ul .third-crown:after,
  .lottery-tabs .lottery-tabs-content .prize .people-ul .fourth-crown:after,
  .lottery-tabs .lottery-tabs-content .prize .people-ul .fifth-crown:after {
    width: 2.8rem;
    height: 1.71rem;
  }
  /* 抽奖人名字的大小 */
  .lottery-tabs .lottery-tabs-content .prize .people-name {
    font-size: 0.47rem;
  }

  /* 扇子 */
  .lottery-bg .bottom-fan,
  .lottery-bg .bottom-fan-right {
    width: 10.23rem;
    height: 4.87rem;
  }
  /* 开始按钮 */
  .lottery-btn {
    width: 2.73rem;
    height: 2.73rem;
  }
  .lottery-btn p {
    font-size: 0.83rem;
  }
}
@media screen and (min-width: 2561px) {
}

/* 媒体查询结束 */

/* 预加载头像 */
.reload-img {
  display: none;
}
.reload-img img {
  /* width: 174px;
    height: 174px;*/
  width: 2.32rem;
  height: 2.32rem;
  display: block;
  border-radius: 50%;
}

/* 横屏时。。。 */
/*@media all and (orientation : landscape) {
    .lottery-bg{
        background-size: 100% auto;
    }
}*/
/* 竖屏时。。。 */
/*@media all and (orientation : portrait){
    .lottery-bg{
        background-size: auto 100%;
    }
   !* .lottery-title{
        margin-top: 2rem;
    }
    .lottery-tabs{
        margin-top: 8.20rem;
    }
    .lottery-tabs .lottery-tabs-content .prize .people-absolute{
     width: 82%;
    }*!
    .lottery-tabs{
        margin: 50% auto;
    }
    .lottery-tabs .lottery-tabs-content .prize .people-absolute{
        width: 100%;
    }
    .lottery-tabs{
        padding: 0 0;
    }
}*/

</style>

<script>
  ;(function (win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    if (metaEl) {
        console.warn('将根据已有的meta标签来设置缩放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }
    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }
    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

    win.addEventListener('resize', function () {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function (e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }

    refreshRem();
    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function (d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function (d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }
})(window, window['lib'] || (window['lib'] = {}));
</script>
</head>

<body>

    <div class="lottery-bg">
        <div class="lottery-banner">
            <div class="top-curtain left">
                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/top_curtain.png" alt="" />
            </div>
            <div class="top-curtain right">
                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/top_curtain.png" alt="" />
            </div>
        </div>
        <h1 class="lottery-title">
            <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/title.png" alt="" />
        </h1>
        <div class="lottery-tabs">
            <div class="lottery-tabs-nav" id="lottery-tabs-nav">
                <div class="first tab">
                    <p>特等奖</p>
                </div>
                <div class="second tab">
                    <p>一等奖</p>
                </div>
                <div class="third tab">
                    <p>二等奖</p>
                </div>
                <div class="fourth tab">
                    <p>三等奖</p>
                </div>
                <div class="fifth tab">
                    <p>幸运奖</p>
                </div>
                <div class="special tab" id="six_lottery">
                    <p>惊喜奖</p>
                </div>
            </div>
            <div class="lottery-tabs-content">
                <div class="first-prize prize">
                    <div class="lottery-absolute">特等奖：虎牌电饭煲</div>
                    <div class="lottery-absolute-timerout"></div>
                    <div class="people-absolute">
                        <ul class="people-ul">
                            <li class="people-li first-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="lottery-btn" id="oneBtn">
                        <p>开始</p>
                    </div>
                </div>
                <div class="second-prize prize">
                    <div class="lottery-absolute">一等奖：西屋洁身器</div>
                    <div class="lottery-absolute-timerout"></div>
                    <div class="people-absolute">
                        <ul class="people-ul">
                            <li class="people-li second-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="lottery-btn" id="twoBtn">
                        <p>开始</p>
                    </div>
                </div>
                <div class="third-prize prize">
                    <div class="lottery-absolute">二等奖：瑜伽垫</div>
                    <div class="lottery-absolute-timerout"></div>
                    <div class="people-absolute">
                        <ul class="people-ul">
                            <li class="people-li third-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                            <li class="people-li third-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                            <li class="people-li third-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                            <li class="people-li third-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                            <li class="people-li third-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="lottery-btn" id="threeBtn">
                        <p>开始</p>
                    </div>
                </div>
                <div class="fourth-prize prize">
                    <h2 class="lottery-absolute">三等奖：白色四件套(洗水)</h2>
                    <div class="lottery-absolute-timerout"></div>
                    <div class="people-absolute">
                        <ul class="people-ul">
                            <li class="people-li fourth-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                            <li class="people-li fourth-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                            <li class="people-li fourth-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                            <li class="people-li fourth-crown">
                                <img src="//repo.bfw.wiki/bfwrepo/images/choujiang/question.png" alt="" />
                                <span class="people-name"></span>
                            </li>
                            <li class="people-li fourth-crown">
                               .........完整代码请登录后点击上方下载按钮下载查看