原生js之抽奖系统网页开发（一）

第一步：

新建三个文件夹：img、js、css，一个html文件index.html

编辑器打开 index.html，

第二步：

键盘英文模式下按下!，生成html基本模版

第三步：

修改网页标题<title>Document</title>为<title>魔性抽奖</title>

第四步：

引入所需的css

<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/animate.min.css">

image.png

第五步：

分析样式布局，先实现整个网页的背景，再实现抽奖标题，再实现标题下大的白线div盒子，然后使用ul li实现抽奖人姓名列表，采用flex布局，名字列表下在实现俩按钮，按钮下使用position: absolute;定位+flex布局实现样式。然后在使用position: absolute;定位实现白色div盒子外，网页两侧的左右两个图片布局样式，最后实现幸运者文字样式布局。

下面开始开发：

先实现网页背景:

body{
  background-image: url("../img/bg.gif");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

再实现抽奖标题:

 <p class="title">抽奖</p>

.title{
  color: red;
  font-size: 40px;
  text-align: center;
}

再实现标题下大的白线div盒子：

<div class="wrapper">
  ......
  ......
  ......
</div>

.wrapper {
  width: 800px;
  height: 430px;
  margin: 10px auto;
  border: 2px solid #ccc;
  text-align: center;
  position: relative;
  padding-top: 12px;
  box-sizing: border-box;
}

然后使用ul li实现抽奖人姓名列表，采用flex布局:

<ul>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
      <li>张三</li>
    </ul>



.wrapper ul{
  list-style: none;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.wrapper ul li{
  border: 1px solid #fff;
  padding: 6px 20px;
  margin-right: 12px;
  margin-bottom: 12px;
  border-radius: 6px;

}

名字列表下在实现俩按钮:

 <!-- 按钮 -->
    <button class="start">开始抽奖</button>
    <button class="stop">停止抽奖</button>

/* 按钮样式 */
.start ,.stop{
  width: 80px;
  height: 40px;
  border: none;
  outline: none;
  background: linear-gradient(to right,pink,#5dd6c7);
  cursor: pointer;
  border-radius: 6px;
  color: #333;
  font-weight: bold;
  margin-top: 12px;
  margin-right: 12px;
}

按钮下使用position: absolute;定位+flex布局实现样式:

<div class="img_wrap">
      <img src="./img/audio.gif"  alt="">
      <img src="./img/come.gif"  alt="">
</div>



.img_wrap{
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}
.img_wrap img{
  width: 200px;
  height: 180px;
}

然后在使用position: absolute;定位实现白色div盒子外，网页两侧的左右两个图片布局样式:

<!-- box外围左右俩图片 -->
  <div class="img1">
    <img src="./img/audio1.gif" alt="">
  </div>
  <div class="img2">
    <img src="./img/audio1.gif" alt="">
  </div>


.img1{
  width: 300px;
  height: 200px;
  position: absolute;
  left: 0%;
  bottom: 10%;
}
.img2{
  width: 300px;
  height: 200px;
  position: absolute;
  right: 0% !important;
  bottom: 10%;
}
.img1 img{
  width: 100%;
  height: 100%;
}
.img2 img{
  width: 100%;
  height: 100%;
}

最后实现幸运者文字样式布局:

  <div class="lucking">幸运者</div>

.lucking{
  text-align: center;
  color: #fff;
  font-size: 60px;
  color:pink;
  font-weight: bold;
  line-height: 140px;
}

拓展一点：实现幸运者文字无限循环放大：

引入animate.css

lucking的div加上对应的class类名：animated bounceIn infinite

animated是必要的类名，bounceIn是动画效果，infinite是无限循环

end！