用css+js写一个抽奖页面
时间: 2024-05-06 18:19:45 浏览: 21
抽奖页面的实现需要前端技术,包括HTML、CSS和JavaScript。下面是一个简单的抽奖页面示例,代码如下:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>抽奖页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>抽奖页面</h1>
<div class="lottery">
<div class="lottery-box">
<div class="lottery-cards">
<div class="card">
<img src="images/card1.png">
</div>
<div class="card">
<img src="images/card2.png">
</div>
<div class="card">
<img src="images/card3.png">
</div>
<div class="card">
<img src="images/card4.png">
</div>
<div class="card">
<img src="images/card5.png">
</div>
</div>
<button class="btn" id="btn-start">开始抽奖</button>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
.lottery {
margin-top: 50px;
text-align: center;
}
.lottery-box {
position: relative;
display: inline-block;
}
.lottery-cards {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.card {
width: 100px;
height: 100px;
margin: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.card img {
max-width: 100%;
max-height: 100%;
}
.btn {
display: block;
margin: 50px auto;
padding: 10px 20px;
background-color: #f00;
color: #fff;
border: none;
border-radius: 5px;
font-size: 24px;
cursor: pointer;
}
.btn:hover {
background-color: #f66;
}
```
JavaScript代码:
```javascript
var btnStart = document.getElementById('btn-start');
var lotteryCards = document.querySelectorAll('.card');
btnStart.addEventListener('click', function() {
// 随机选择一个卡片
var index = Math.floor(Math.random() * lotteryCards.length);
// 添加选中样式
lotteryCards[index].classList.add('selected');
});
```
以上代码实现了一个简单的抽奖页面,其中包含了五张卡片,点击“开始抽奖”按钮后,页面随机选中一张卡片,并添加选中样式。你可以根据自己的需求修改代码,实现更为复杂的抽奖页面。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)