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('這個已經被抽過了！');}};}
文件目錄結構：
評論
圖片
表情