基于华为云的抽奖网页设计
本案例由开发者：华为2024年第三批次协同育人项目-山东科技大学-崔宾阁老师提供
1 概述
1.1 案例介绍
随着动态交互需求的日益增长，活动抽奖作为一个典型的网页互动功能，已被广泛应用于各类线上活动、促销页面及社交平台中。华为开发者空间云主机平台为前端开发提供了稳定高效的开发环境，使开发者能够在云端快速搭建应用。
本案例依托华为开发者空间提供的云主机与CodeArts IDE，结合JavaScript技术，开发了一个活动抽奖系统。其主要功能包括奖品展示、抽奖、中奖结果展示以及抽奖历史记录查看等。在实现上，首先设计一个九宫格布局来展示奖品。通过JavaScript实现随机抽奖，并在用户点击“开始抽奖”按钮后，呈现动态的抽奖动画效果，然后在抽奖结果区展示用户抽中的奖品。此外，用户可以通过抽奖速度滑块调整抽奖速度，增加互动性。抽奖结果也会记录在历史记录中，方便用户查看之前的抽奖情况。
通过本案例，开发者将深入学习HTML表单元素的构建、CSS布局与定位、视觉效果增强及 JavaScript动态元素运用、事件监听等技术。同时，开发者将熟悉华为云主机平台及CodeArts IDE开发环境，提升项目实战能力，为后续更复杂的Web应用开发打下坚实基础。
1.2 案例时间
本案例总时长预计30分钟。
1.3 案例流程
说明：
① 申请并登录华为开发者空间—云主机，打开CodeArts IDE创建工程；
② 在云主机CodeArts IDE for Java中编写案例项目代码；
③ 通过Firefox启动案例项目的入口文件；
1.4 资源总览
本案例预计花费总计0元。
| 资源名称 | 规格 | 单价（元） | 时长（分钟） |
| 开发者空间—云主机 | 鲲鹏通用计算增强型 kC2 | 4vCPUs | 8G | Ubuntu | 免费 | 30 |
| CodeArts IDE | CodeArts IDE for Java | 免费 | 30 |
2 操作步骤
2.1 配置开发者空间—云主机
本案例中，使用华为开发者空间所提供的云主机平台以及CodeArts IDE + JavaScript开发工具，完成活动抽奖案例的开发工作。点击链接可跳转至免费领取云主机指南。
1. 在浏览器中输入华为云开发者空间网址：https://developer.huaweicloud.com/developerspace，进入华为云开发者空间页面。在华为开发者空间页面点击“免费领取”，跳转到开发者空间页面，如未领取根据页面提示进行云主机领取。
2. 在开发者空间页面，点击左侧“工作台”按钮进入工作台页面，再点击“配置云主机”进行云主机的配置。
3. 在配置云主机窗口中自定义云主机名称，配置完毕后点击“安装”。
4. 安装完毕后点击“打开云主机”>“进入桌面”即可进入云主机。
5. 等待环境云主机下载镜像、安装系统、安装工具集，首次进入云主机大约需要3至5分钟。
6. 环境准备完毕后，即可进入云主机，云主机桌面如下所示。
2.2 创建项目
CodeArts IDE是一个集成开发环境（IDE），兼具源代码编辑器的简易性和开发人员工具的强大功能，如代码补全和调试。它将精简的源代码编辑器与强大的开发者工具结合在一起。
1. 双击打开云主机桌面上的CodeArts IDE for Java（虽然IDE名称带有“Java”，但本案例用于编写JavaScript前端代码）。
2. 首次使用CodeArts IDE创建工程，可直接点击左侧栏目中的“新建工程”，项目名称为“LotteryDraw”（用户可自行取名），工程存放位置、构建系统及JDK直接使用默认配置，接着点击右下角蓝色的“创建”按钮。
3. 在新建的“LotteryDraw”工程项目中，点击左上角新建HTML文件，输入：LotteryDraw.html，输入完毕后按下回车键，该HTML文件用于存放实现活动抽奖的代码，代码内容在后续文中进行介绍。
4. 代码编写完成后，鼠标右键单击“LotteryDraw.html”文件，选择“打开所在的文件夹”，找到活动抽奖项目在云主机中的位置。
5. 在打开的项目文件夹中，鼠标右键单击编写好的网页代码文件，依次点击“打开方式”>“Firefox”，在火狐浏览器中查看活动抽奖页面。
2.3 编写代码（LotteryDraw.html）
本案例由一个项目文件组成，文件名为LotteryDraw.html，由HTML + CSS + JS组件构成，其功能是在页面中央显示一个3×3的九宫格，每个格子展示不同的奖品信息。用户点击“开始抽奖”按钮后，奖品格子会有频率的振动，模拟抽奖过程。用户点击“停止抽奖”按钮后，抽奖停止并显示中奖结果，同时在“抽奖结果”区域显示中奖奖品的详细信息，完成一个完整的活动抽奖过程。此外，用户还可以通过滑块调整抽奖速度，增加互动性。系统还会在页面底部的“抽奖记录”区域显示最近四次的抽奖记录，方便用户查看历史抽奖结果。
活动抽奖网页参考代码如下（代码存放在LotteryDraw.html文件中）：
（下面代码中有些图标无法显示，请到附件中查看完整代码）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>活动抽奖</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
/* ========= 基础变量 ========= */
:root {
--bg0: #0f0c1f;
--bg1: #1a1142;
--neonC: #00f9ff;
--neonM: #ff00a0;
--glass: rgba(255,255,255,.08);
--radius: 16px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif
}
body {
min-height: 100vh;
background: linear-gradient(135deg,var(--bg0),var(--bg1));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow-x: hidden;
}
.container {
max-width: 800px;
width: 100%;
text-align: center;
animation: fadeIn .6s
}
/* ========= 标题 ========= */
h1 {
font-size: 2.6rem;
letter-spacing: 2px;
margin-bottom: .5em;
background: linear-gradient(90deg,var(--neonC),var(--neonM));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 6px var(--neonC));
}
/* ========= 九宫格 ========= */
.grid-container {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 18px;
max-width: 480px;
margin: 30px auto;
padding: 20px;
background: var(--glass);
border-radius: var(--radius);
backdrop-filter: blur(12px);
border: 1px solid var(--neonC);
box-shadow: 0 0 25px var(--neonC);
}
.grid-item {
aspect-ratio: 1/1;
background: var(--glass);
border: 1px solid var(--neonC);
border-radius: var(--radius);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: .3s;
position: relative;
overflow: hidden;
}
.grid-item::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg,transparent,rgba(0,249,255,.15),transparent);
opacity: 0;
transition: .3s;
}
.grid-item.active {
background: rgba(0,249,255,.25);
transform: scale(1.08)
}
.grid-item.win {
animation: pulse 1s infinite
}
@keyframes pulse {
0%,100% {
box-shadow: 0 0 10px var(--neonC)
}
50% {
box-shadow: 0 0 30px var(--neonC),0 0 50px var(--neonM)
}
}
.prize-icon {
font-size: 2.8rem;
margin-bottom: 6px
}
.prize-name {
font-size: 1rem;
font-weight: 600
}
.prize-value {
font-size: .8rem;
opacity: .7
}
/* ========= 按钮 ========= */
.button-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin: 25px 0;
}
.btn {
padding: 14px 32px;
font-size: 1rem;
font-weight: 700;
border: none;
border-radius: 50px;
cursor: pointer;
transition: .3s;
color: #fff;
position: relative;
overflow: hidden;
}
.btn:disabled {
opacity: .4;
cursor: not-allowed
}
.btn-start {
background: linear-gradient(45deg,#00c853,#00ffa2)
}
.btn-stop {
background: linear-gradient(45deg,#ff5252,#ff4081)
}
.btn-reset {
background: linear-gradient(45deg,#2196f3,#21cbf3)
}
.btn:hover:not(:disabled) {
transform: translateY(-4px);
filter: brightness(1.2)
}
/* ========= 结果卡片 ========= */
.result-container, .speed-control, .history {
background: var(--glass);
border: 1px solid var(--neonC);
border-radius: var(--radius);
padding: 20px;
margin: 20px auto;
max-width: 480px;
backdrop-filter: blur(12px);
}
.result-title {
color: var(--neonC);
font-size: 1.4rem;
margin-bottom: 10px
}
.result-icon {
font-size: 3.2rem;
margin-bottom: 10px;
animation: float 2s infinite alternate
}
@keyframes float {
from {
transform: translateY(0)
}
to {
transform: translateY(-8px)
}
}
/* ========= 速度滑条 ========= */
.slider-container {
display: flex;
align-items: center;
gap: 10px
}
input[type=range] {
flex: 1;
-webkit-appearance: none;
height: 6px;
border-radius: 3px;
background: var(--glass);
outline: none
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--neonM);
cursor: pointer
}
/* ========= 抽奖记录（水平居中） ========= */
.history h2 {
color: var(--neonM);
margin-bottom: 12px;
font-size: 1.4rem
}
.history-list {
display: flex;
justify-content: center;
gap: 12px;
overflow-x: auto;
padding-bottom: 6px;
}
.history-item {
flex: 0 0 140px;
background: var(--glass);
border: 1px solid var(--neonM);
border-radius: var(--radius);
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
font-size: .85rem;
min-width: 120px;
}
.history-icon {
font-size: 1.8rem;
margin-bottom: 6px
}
.history-name {
font-weight: 600;
margin-bottom: 4px
}
.history-time {
opacity: .6;
font-size: .75rem
}
/* ========= 彩色纸屑（简化） ========= */
.confetti {
position: fixed;
width: 8px;
height: 8px;
top: -10px;
border-radius: 50%;
animation: fall 3s linear forwards;
}
@keyframes fall {
to {
transform: translateY(110vh) rotate(720deg);
opacity: 0
}
}
</style>
</head>
<body>
<div class="container">
<h1> 活动抽奖 </h1>
<!-- 速度滑条 -->
<div class="speed-control">
<h3>抽奖速度控制</h3>
<div class="slider-container">
<input type="range" id="speedSlider" min="1" max="10" value="5">
<span id="speedValue">5</span>
</div>
</div>
<!-- 九宫格 -->
<div class="grid-container">
<div class="grid-item"><div class="prize-icon"></div><div class="prize-name">游戏主机</div><div class="prize-value">¥2999</div></div>
<div class="grid-item"><div class="prize-icon"></div><div class="prize-name">智能手机</div><div class="prize-value">¥3999</div></div>
<div class="grid-item"><div class="prize-icon"></div><div class="prize-name">笔记本电脑</div><div class="prize-value">¥5999</div></div>
<div class="grid-item"><div class="prize-icon"></div><div class="prize-name">无线耳机</div><div class="prize-value">¥899</div></div>
<div class="grid-item"><div class="prize-icon"></div><div class="prize-name">智能手表</div><div class="prize-value">¥1299</div></div>
<div class="grid-item"><div class="prize-icon"></div><div class="prize-name">神秘礼盒</div><div class="prize-value">¥1999</div></div>
<div class="grid-item"><div class="prize-icon"></div><div class="prize-name">优惠券</div><div class="prize-value">满1000减200</div></div>
<div class="grid-item"><div class="prize-icon"></div><div class="prize-name">现金红包</div><div class="prize-value">¥888</div></div>
<div class="grid-item"><div class="prize-icon"></div><div class="prize-name">画板套装</div><div class="prize-value">¥599</div></div>
</div>
<!-- 按钮 -->
<div class="button-container">
<button class="btn btn-start" id="startButton">开始抽奖</button>
<button class="btn btn-stop" id="stopButton" disabled>停止抽奖</button>
<button class="btn btn-reset" id="resetButton">重新开始</button>
</div>
<!-- 结果 -->
<div class="result-container">
<div class="result-title">抽奖结果</div>
<div class="result-content" id="resultContent">
<div class="result-icon"></div>
<div class="result-text">等待抽奖开始...</div>
</div>
</div>
<!-- 抽奖记录（水平滚动） -->
<div class="history">
<h2>抽奖记录</h2>
<div class="history-list" id="historyList">
<div class="history-item">
<div class="history-icon"></div>
<div class="history-name">暂无记录</div>
<div class="history-time">--:--:--</div>
</div>
</div>
</div>
</div>
<script>
/* === 基本数据 === */
const prizes = [...document.querySelectorAll('.grid-item')].map(el => ({
name: el.querySelector('.prize-name').textContent,
value: el.querySelector('.prize-value').textContent,
icon: el.querySelector('.prize-icon').textContent
}));
const gridItems = document.querySelectorAll('.grid-item');
const startBtn = document.getElementById('startButton');
const stopBtn = document.getElementById('stopButton');
const resetBtn = document.getElementById('resetButton');
const resultBox = document.getElementById('resultContent');
const historyBox = document.getElementById('historyList');
const speedSlider = document.getElementById('speedSlider');
const speedValue = document.getElementById('speedValue');
let isSpin = false, current = 0, win = -1, timer = null;
let base = 50, factor = 5;
speedSlider.addEventListener('input', e => { factor = +e.target.value; speedValue.textContent = factor });
const speed = () => Math.max(10, base / factor);
/* === 功能函数 === */
function reset() {
clearTimeout(timer); isSpin = false; current = 0; win = -1;
gridItems.forEach(el => el.classList.remove('active', 'win'));
resultBox.innerHTML = '<div class="result-icon"></div><div class="result-text">等待抽奖开始...</div>';
startBtn.disabled = false; stopBtn.disabled = true;
}
function start() {
if (isSpin) return;
reset(); isSpin = true; startBtn.disabled = true; stopBtn.disabled = false;
win = Math.floor(Math.random() * 9);
resultBox.innerHTML = '<div class="result-icon"></div><div class="result-text">抽奖进行中...</div>';
run();
}
function run() {
gridItems.forEach(el => el.classList.remove('active'));
gridItems[current].classList.add('active');
current = (current + 1) % 9;
if (current === win && Math.random() > .7) { setTimeout(end, 100); return }
timer = setTimeout(run, speed());
}
function stopLottery() {
if (!isSpin) return;
clearTimeout(timer); isSpin = false;
if (win < 0) win = Math.floor(Math.random() * 9);
gridItems.forEach(el => el.classList.remove('active'));
gridItems[win].classList.add('active', 'win');
showResult();
startBtn.disabled = false; stopBtn.disabled = true;
}
function end() { stopLottery() }
function showResult() {
const p = prizes[win];
resultBox.innerHTML = `
<div class="result-icon">${p.icon}</div>
<div class="result-text">
<div class="result-name">${p.name}</div>
<div class="result-value">${p.value}</div>
</div>`;
confetti(); addHistory(p);
}
function confetti() {
const colors = ['#00f9ff', '#ff00a0', '#ffffff', '#00ffa2', '#ffea00'];
for (let i = 0; i < 150; i++) {
const c = document.createElement('div');
c.className = 'confetti';
c.style.left = Math.random() * 100 + 'vw';
c.style.background = colors[Math.floor(Math.random() * colors.length)];
c.style.width = c.style.height = Math.random() * 8 + 4 + 'px';
document.body.appendChild(c);
setTimeout(() => c.remove(), 3000);
}
}
let history = [];
function addHistory(p) {
const t = new Date();
history.unshift({ ...p, time: t.toLocaleTimeString() });
if (history.length > 5) history.pop();
updateHistory();
}
function updateHistory() {
if (!history.length) {
historyBox.innerHTML = '
<div class="history-item">
<div class="history-icon"></div>
<div class="history-name">暂无记录</div>
<div class="history-time">--:--:--</div>
</div>';
return;
}
historyBox.innerHTML = '';
history.forEach(h => {
const d = document.createElement('div');
d.className = 'history-item';
d.innerHTML = `
<div class="history-icon">${h.icon}</div>
<div class="history-name">${h.name}</div>
<div class="history-time">${h.time}</div>`;
historyBox.appendChild(d);
});
}
/* === 事件 === */
startBtn.addEventListener('click', start);
stopBtn.addEventListener('click', stopLottery);
resetBtn.addEventListener('click', reset);
reset(); updateHistory();
</script>
</body>
</html>代码实现了一个活动抽奖网页，主要功能如下：
1. 页面总体布局
(1) 头部信息：显示活动抽奖的标题。
(2) 抽奖速度控制：提供抽奖速度控制滑块组件和速度值显示，用户可以通过滑动滑块来调整抽奖速度。
(3) 九宫格容器：以九宫格形式展示所有奖品，每个奖品都有独立的展示区域，包括奖品图标、名称和价值。
(4) 抽奖按钮区域：包括“开始抽奖”、“停止抽奖”和“重新开始”按钮，用于控制抽奖过程。
(5) 抽奖结果区域：展示抽奖结果，包括中奖奖品的图标、名称和价值。
(6) 抽奖历史记录：显示用户中奖的历史记录，包括奖品图标、名称、价值和抽奖时间。
2. 功能实现
(1) 抽奖控制
① 用户可以通过点击“开始抽奖”按钮来启动抽奖，在此过程中，九宫格中的所有奖品将有频率的振动。
② 用户可以通过点击“停止抽奖”按钮来停止抽奖，系统将会高亮显示一个奖品作为中奖结果。
③ 用户可以通过点击“重新开始”按钮来重置抽奖状态，重新开始抽奖。
(2) 抽奖速度控制
① 用户可以通过滑动“抽奖速度控制”滑块控制抽奖的速度，速度值范围为1—10，速度值越小抽奖的过程越慢。
(3) 抽奖结果显示
① 根据抽奖结果动态渲染中奖奖品内容，中奖奖品在九宫格中会高亮显示，并在抽奖结果展示区显示奖品图标、名称和价值。
② 抽奖结果展示区支持彩色纸屑飘落动画效果，增加抽奖的趣味性和视觉效果。
(4) 抽奖记录展示
① 抽奖记录区会展示最近四次的抽奖记录，包括奖品图标、名称、价值和抽奖时间，方便用户查看历史中奖记录。
3. 技术要点
(1) HTML结构：页面整体结构简洁明了，核心是“九宫格”布局。每个格子由<div class="grid-item">表示，内部包含奖品图标（<div class="prize-icon">）奖品名称（<div class="prize-name">）和奖品价值（<div class="prize-value">），清晰地展示了九宫格中每个奖品的信息。
(2) CSS布局：通过grid-template-columns: repeat(3,1fr)将容器分为三列，每列宽度相等。每个grid-item设置为正方形（aspect-ratio: 1/1），并使用flexbox布局确保内容居中显示。同时，使用border-radius和box-shadow等属性让每个格子看起来更加地立体和美观。
(3) DOM 操作：使用innerHTML动态设置抽奖结果区域的内容，展示奖品图标、名称和价值；通过innerHTML初始化抽奖记录列表，并使用document.createElement和appendChild更新抽奖记录；在中奖时，使用document.createElement动态创建彩色纸屑元素，并通过style属性设置其样式，然后使用appendChild将纸屑元素添加到页面中，并在一定时间后通过remove方法移除。
(4) 事件监听：为“开始抽奖”按钮添加点击事件，调用start函数开始抽奖；为“停止抽奖”按钮添加点击事件，调用stopLottery函数停止抽奖；为“重新开始”按钮添加点击事件，调用reset函数重置抽奖状态。
2.4 展示活动抽奖网页
1. 活动抽奖网页展示
至此本次实验全部内容完成。
2.5 拓展实验
1. 增强交互性：比如增加轮次选择功能，支持多轮抽奖（用户可以选择抽奖的轮次，每轮抽奖可以有不同的奖品，每轮抽奖结束后自动进入下一轮）、增加抽奖音效（当点击“开始抽奖”、“停止抽奖”、“重置抽奖”按钮时播放不同的音效）。
2. 活动抽奖功能扩展：比如增加抽奖统计功能（显示每个奖品的中奖次数，中奖率等）、增加分享功能（允许用户将中奖信息进行分享）。
3. 欢迎自由发挥。
3 释放资源
3.1 关闭云主机
1. 首先点击云主机桌面上面的“关机”按钮，然后在弹出来的提示框点击“确定”按钮，关闭云主机。
2. 点击“确定”按钮后页面自动跳转到开发者空间页面，可以看到我的云主机显示“关机中”，说明云主机正在关机。
3.2 检查资源
云主机关机后，等待3至5分钟，当我的云主机显示“已就绪”时，说明云主机成功关机，下次使用云主机只需点击“打开云主机”>“进入桌面”即可，可参考2.1小节。
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
