使用 HTML、CSS 和 JavaScript 构建现代交互式抽奖轮

简介

在当今的数字时代，使用交互式工具吸引您的社区对于促进参与和兴奋至关重要。无论您是举办有奖活动、进行民意调查还是组织比赛，拥有具有视觉吸引力和互动性的抽奖轮都可以显着增强用户体验。在本文中，我将引导您完成创建 Modern Raffle 2024 的过程，这是一个使用 HTML、CSS 和 构建的交互式抽奖轮JavaScript。我们将涵盖从设置结构到添加动画和集成社交共享功能的所有内容。

？使用的技术

为了实现这个项目，我利用了以下技术：

• HTML5：用于构建网页和创建交互元素。
• CSS3：使用现代设计原则设计应用程序的样式，包括玻璃态、动画和响应式布局。
• JavaScript：添加交互性、处理用户输入以及管理抽奖轮的逻辑和动画。
• Canvas API：用于绘制抽奖轮并为其设置动画。
• Font Awesome：合并矢量图标以获得精美的外观。
• Google 字体：利用 Inter 字体实现干净、现代的排版。
• 请我喝杯咖啡：集成捐赠按钮来支持该项目。

?️ 项目结构

该项目分为三个主要文件：

1. index.html：包含应用程序的 HTML 结构。
2. styles.css：保存布局和设计的所有 CSS 样式。
3. script.js：包括支持交互性和动画的 JavaScript 代码。

此外，还添加了页脚部分来宣传我的网站、LinkedIn、Twitter，并包含给我买杯咖啡按钮以获取支持。

？ HTML（索引.html）

HTML 结构设置了抽奖应用程序的主要组件，包括参与者和奖品的输入部分、抽奖轮、宣布获奖者的模式以及促销页脚。

html

现代抽奖 2024

？现代抽奖 2024 ？

    <div class="input-section">
        <h2 id="Add-Participants">Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

/* 重置和基本样式 */

• { 框大小：边框框； 保证金：0； 填充：0； 字体系列：'Inter'，无衬线字体； }

身体{
背景：线性渐变（135deg，#1e3c72，#2a5298）；
颜色：#ffffff;
显示：flex；
弯曲方向：列； /* 垂直堆叠子元素 /
justify-content：flex-start； / 从顶部开始 /
对齐项目：中心；
最小高度：100vh；
/ 删除隐藏的溢出以允许页脚可见 */
溢出-x：隐藏；
}

/* 容器样式 /
.container {
背景：rgba(255, 255, 255, 0.05);
背景过滤器：模糊（10px）；
内边距：40px；
边框半径：20px;
文本对齐：居中；
宽度：90%；
最大宽度：900px；
盒子阴影: 0 8px 32px rgba(0, 0, 0, 0.37);
边框: 1px 实心 rgba(255, 255, 255, 0.18);
动画：淡入 1 秒缓入；
弹性：1； / 允许容器增长并将页脚向下推 */
显示：flex；
弹性方向：列；
对齐项目：中心；
}

/* 淡入动画 */
@keyframes fadeIn {
来自{ 不透明度：0;变换：translateY(-20px); }
至 { 不透明度：1;变换：翻译Y(0)； }
}

/* 标题样式 */
h1 {
下边距：30px;
字体大小：3rem;
字体粗细：700；
文本阴影：3px 3px 6px rgba(0,0,0,0.3);
}

/* 输入部分 */
.input-section {
下边距：40px；
宽度：100%；
}

.input-section h2 {
下边距：15px;
字体大小：1.75rem；
字体粗细：600；
}

/* 输入组 */
.input-group {
显示：flex；
调整内容：居中；
对齐项目：中心；
间隙：10px；
下边距：15px;
}

.输入组输入{
内边距：12px 20px；
宽度：60%；
边框：无；
边框半径：30px；
背景：rgba(255, 255, 255, 0.1);
颜色：#ffffff;
字体大小：1rem；
大纲：无；
过渡：背景 0.3 秒缓动，框阴影 0.3 秒缓动；
}

.input-group input::placeholder {
颜色：#dddddd;
}

.input-group 输入：焦点 {
背景：rgba(255, 255, 255, 0.2);
盒子阴影: 0 0 10px rgba(255, 127, 80, 0.5);
}

.输入组按钮 {
内边距：12px 25px；
边框：无；
边框半径：30px；
背景颜色：#ff7f50;
颜色：#fff；
字体大小：1rem；
字体粗细：600；
光标：指针；
显示：flex；
对齐项目：中心；
间隙：8px；
过渡：背景颜色 0.3 秒缓动，变换 0.2 秒缓动，框阴影 0.3 秒缓动；
}

.输入组按钮：悬停{
背景颜色：#ff5722;
变换：translateY(-2px);
盒子阴影：0 4px 10px rgba(0,0,0,0.3);
}

/* 用户列表 */

用户列表{

}

用户列表 li {

    <div class="input-section">
        <h2 id="Add-Participants">Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

}

/* 选定奖品 */

选定的奖品{

list-style: none;
max-height: 120px;
overflow-y: auto;
text-align: left;
padding: 0 20%;
width: 100%;

}

/* 轮式容器 */
.wheel-container {
位置：相对；
下边距：40px；
宽度：100%；
显示：flex；
弹性方向：列；
对齐项目：中心；
}

.wheel-wrapper {
位置：相对；
宽度：100%；
最大宽度：500px；
边距：0 自动 20px;
}

/* 画布样式 */
画布{
宽度：100%；
高度：自动；
边框半径：50%；
盒子阴影：0 0 20px rgba(0,0,0,0.5);
背景：#000;
过渡：变换 4s 三次贝塞尔曲线(0.33, 1, 0.68, 1);
}

/* 指针样式 */
.指针{
位置：绝对；
顶部：-20px；
左：50%；
变换：translateX(-50%);
字体大小：2rem;
颜色：#ffeb3b；
动画：弹跳2秒无限；
}

@keyframes 弹跳 {
0%, 100% { 变换: 翻译X(-50%) 翻译Y(0); }
50％{ 变换：translateX（-50％）translateY（-10px）; }
}

/* 旋转按钮 */

自旋Btn {

padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 1rem;

}

spinBtn：悬停{

font-size: 1.2rem;
font-weight: 500;
margin-top: 10px;

}

spinBtn：活动{

padding: 15px 35px;
border: none;
border-radius: 50px;
background-color: #32cd32;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
margin: 0 auto;

}

/* 模态样式 */
.modal {
显示：无；
位置：固定；
z 索引：100；
左：0；
顶部：0；
宽度：100%；
高度：100%；
溢出：自动；
背景颜色：rgba(0,0,0,0.8);
动画：fadeInModal 0.5s 缓动；
}

@keyframes fadeInModal {
来自{ 不透明度：0; }
至 { 不透明度：1; }
}

.modal-内容 {
背景颜色: rgba(30, 30, 30, 0.95);
保证金：10% 自动；
内边距：30px；
边框半径：15px；
宽度：90%；
最大宽度：600px；
文本对齐：居中；
盒子阴影：0 8px 25px rgba(0,0,0,0.5);
位置：相对；
动画：向下滑动 0.5s 缓动；
}

@关键帧slideDown {
来自 { 变换：translateY(-50px);不透明度：0； }
到 { 变换：translateY(0);不透明度：1； }
}

.关闭按钮 {
颜色：#bbb;
位置：绝对；
顶部：15px；
右：20px；
字体大小：28px;
字体粗细：粗体；
光标：指针；
过渡：颜色 0.3 秒缓和；
}

.关闭按钮：悬停，
.close-button:焦点 {
颜色：#fff；
}

.modal-content h2 {
下边距：20px;
字体大小：2rem;
字体粗细：700；
}

.modal-content p {
字体大小：1.25rem；
下边距：25px；
}

分享Btn {

background-color: #28a428;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);

}

shareBtn：悬停{

transform: translateY(0);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);

}

/* 页脚样式 /
.footer {
背景：rgba(255, 255, 255, 0.05);
背景过滤器：模糊（10px）；
内边距：20px 0;
顶部边框: 1px 实心 rgba(255, 255, 255, 0.2);
宽度：100%；
/ 确保页脚位于内容下方 */
弹性收缩：0；
}

.footer-container {
显示：flex；
弹性方向：列；
对齐项目：中心；
调整内容：居中；
最大宽度：900px；
边距：0 自动；
内边距：0 20px；
}

.footer-links {
显示：flex；
间隙：20px；
下边距：15px;
}

.footer-链接 {
颜色：#ffffff;
字体大小：1rem；
文本装饰：无；
显示：flex；
对齐项目：中心；
间隙：8px；
过渡：颜色 0.3s 缓动，变换 0.2s 缓动；
}

.footer-links a:hover {
颜色：#ff7f50；
变换：translateY(-2px);
}

.footer-链接 a i {
字体大小：1.2rem；
}

.footer-捐赠 {
顶部边距：10px；
}

/* 页脚响应式设计 */
@media（最小宽度：600px）{
.footer-container {
弹性方向：行；
对齐内容：空间之间；
}

}

/* 用户列表的滚动条样式 */

userList::-webkit-scrollbar {

    <div class="input-section">
        <h2 id="Add-Participants">Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

}

userList::-webkit-scrollbar-track {

list-style: none;
max-height: 120px;
overflow-y: auto;
text-align: left;
padding: 0 20%;
width: 100%;

}

userList::-webkit-scrollbar-thumb {

padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 1rem;

}

userList::-webkit-scrollbar-thumb:hover {

font-size: 1.2rem;
font-weight: 500;
margin-top: 10px;

}

/* 用于辅助功能的按钮焦点状态 */
.输入组按钮：焦点，

spinBtn：焦点，

shareBtn：焦点{

padding: 15px 35px;
border: none;
border-radius: 50px;
background-color: #32cd32;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
margin: 0 auto;

}

background-color: #28a428;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);

// 选择 DOM 元素
const addUserBtn = document.getElementById('addUserBtn');
const usernameInput = document.getElementById('用户名');
const userList = document.getElementById('userList');
const setPrizeBtn = document.getElementById('setPrizeBtn');
constprizeInput = document.getElementById('prize');
const selectedPrize = document.getElementById('selectedPrize');
const spinBtn = document.getElementById('spinBtn');
const WinnerModal = document.getElementById('winnerModal');
const closeBtn = document.querySelector('.close-button');
const WinnerText = document.getElementById('winnerText');
const shareBtn = document.getElementById('shareBtn');

// 状态变量
让用户 = [];
让奖品=“无”;
让 isSpinning = false;

// 轮子配置
const canvas = document.getElementById('raffleWheel');
const ctx = canvas.getContext('2d');
const wheelRadius = canvas.width / 2;
const 颜色 = ['#FF5733', '#33FF57', '#3357FF', '#F333FF', '#FF33A8', '#33FFF6', '#FFC300', '#DAF7A6'];
让startAngle = 0;
让弧 = 0;

// 初始化轮子
函数initializeWheel() {
if (users.length === 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
返回；
}
arc = (2 * Math.PI) / users.length;
画轮（）；
}

// 抽奖轮
函数drawWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (让 i = 0; i const angle = startAngle i * arc;
ctx.fillStyle = 颜色[i % 颜色.长度];
ctx.beginPath();
ctx.moveTo(wheelRadius,wheelRadius);
ctx.arc(wheelRadius,wheelRadius,wheelRadius,角度,角度弧线,false);
ctx.closePath();
ctx.fill();

}

// 绘制指针箭头
函数drawPointer() {
const 指针大小 = 20;
ctx.fillStyle = '#FFEB3B';
ctx.beginPath();
ctx.moveTo(wheelRadius - 指针大小, 0);
ctx.lineTo(wheelRadius pointSize, 0);
ctx.lineTo(wheelRadius, -pointerSize * 1.5);
ctx.closePath();
ctx.fill();
}

// 添加用户事件
addUserBtn.addEventListener('click', addUser);
usernameInput.addEventListener('按键', (e) => {
if (e.key === 'Enter') addUser();
});

// 添加用户的函数
函数 addUser() {
const username = usernameInput.value.trim();
if (用户名 === "") {
showAlert("请输入有效的用户名。");
返回；
}
if (users.includes(用户名)) {
showAlert("该用户名已添加。");
返回；
}
users.push(用户名);
updateUserList();
usernameInput.value = '';
初始化轮子();
}

// 更新用户列表 UI
函数 updateUserList() {
userList.innerHTML = '';
users.forEach(用户 => {
const li = document.createElement('li');
li.textContent = 用户;
userList.appendChild(li);
});
}

// 设置有奖活动
setPrizeBtn.addEventListener('click', setPrize);
prizeInput.addEventListener('按键', (e) => {
if (e.key === 'Enter') setPrize();
});

// 设置奖品的函数
函数 setPrize() {
constprizeInputValue =prizeInput.value.trim();
if (prizeInputValue === "") {
showAlert("请输入有效的奖品。");
返回；
}
奖品=奖品输入值；
selectedPrize.textContent = 所选奖品：${prize};
prizeInput.value = '';
}

// 旋转按钮事件
spinBtn.addEventListener('点击', spinWheel);

// 旋转轮子的函数
函数 spinWheel() {
if (isSpinning) 返回;
if (users.length === 0) {
showAlert("请添加至少一名用户。");
返回；
}
if (奖品===“无”) {
showAlert("请设置奖品。");
返回；
}

}

// 停止轮盘并宣布获胜者的函数
函数 stopRotateWheel() {
常量度 = 起始角度 * 180 / Math.PI 90;
const arcd = arc * 180 / Math.PI;
const index = Math.floor((360 - (度 % 360)) / arcd) % users.length;
const Winner = 用户[索引];
showWinner(获胜者);
isSpinning = false;
spinBtn.disabled = false;
}

// 平滑动画的缓动函数
函数 easeOut(t, b, c, d) {
t /= d;
t--；
返回 c * (t * t * t 1) b;
}

// 显示警报的函数
函数 showAlert(消息) {
警报（消息）；
}

// 在模态中显示获胜者的函数
函数 showWinner(获胜者) {
WinnerText.textContent = ${winner} 赢得了 ${prize}！ ?;
WinnerModal.style.display = "block";
}

// 关闭模态事件
closeBtn.addEventListener('点击', () => {
WinnerModal.style.display = "none";
});
window.addEventListener('点击', (事件) => {
if (event.target === WinnerModal) {
WinnerModal.style.display = "none";
}
});

// 在 Twitter 上分享
shareBtn.addEventListener('点击', shareOnTwitter);

// 在 Twitter 上分享获奖者的功能
函数 shareOnTwitter() {
const text =encodeURIComponent(?恭喜${winnerText.textContent}！他们赢得了${prize}！？#Giveaway #Community);
const url =encodeURIComponent('https://gladiatorsbattle.com');
const twitterUrl = https://twitter.com/intent/tweet?text=${text}&url=${url};
window.open(twitterUrl, '_blank');
}

// 初始车轮设置
初始化轮子();

    <div class="input-section">
        <h2 id="Add-Participants">Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.