HTML+CSS+JS阶段性测试项目-抽奖-技术圈

项目截图：

1.初始页面：

2.点击抽奖弹窗！

3.抽过奖的红包！

4.再次点击抽过奖的红包！

项目体验地址：http://47.105.32.145:56005

HTML源代码：

<html>  <head>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="css/main.css"/>    <title>抽奖title>  head>  <body>    <div id="div_bg">      <div class="container">
        <table border="1" cellspacing="0" cellpadding="0">          <tr>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>          tr>          <tr>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>          tr>          <tr>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>          tr>          <tr>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>          tr>          <tr>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>            <td><img class="image" src="./img/wc.png">td>          tr>
        table>      div>    div>  body>  <script src="js/index.js" type="text/javascript" charset="utf-8">script>html>

CSS源代码：

/* 把我们所有标签的内外边距清零 */* {  margin: 0;  padding: 0;  /* css3盒子模型 */  box-sizing: border-box;  clear: both;}
.container {  width: 50%;  position: relative;  margin: 0 auto;  padding: 200px 15px;  box-sizing: border-box}
#div_bg {  width: 100%;  height: 1000px;  background-image: url(../img/bg.jpg);  background-size: 100% 1080px;}
.image {  width: 54px;  height: 84px;}
td {  width: 100px;  height: 100px;  background-color: antiquewhite;  text-align: center;  opacity: 0.6;}

JS源代码：

var tds = document.getElementsByTagName('td');var imgs = document.getElementsByClassName('image');for (var i = 0; i < imgs.length; i++) {  imgs[i].outed = false;  BindEvent(i, imgs[i]);}
function BindEvent(index, img) {  img.onclick = () => {    if (!img.outed) {      img.src = "./img/yc.png";      tds[index].style.backgroundColor = 'grey';      alert('别玩儿了！怎么可能中奖呢？');      console.log(img.outed);      img.outed = true;    } else {      alert('这个已经被抽过了！');    }  };}

文件目录结构：