八年开发萌新-可接单

在现代电商网站中，商品图片的细节展示对于提升用户体验和促进购买决策至关重要。放大镜效果作为一种经典的商品图片展示方式，能够让用户清晰地查看商品的每一个细节。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 实现一个功能完整的商品图片放大镜效果。

效果演示

该放大镜功能主要包括以下几个交互体验：

左侧缩略图列表，支持点击切换主图

主图区域鼠标悬停时显示放大镜效果

右侧同步显示放大的局部图像

支持左右导航按钮切换图片

缩略图悬停时自动预览对应图片

用户可以通过点击缩略图或者使用导航按钮来浏览不同角度的商品图片，当鼠标移动到主图上时，会显示出一个放大镜区域，并在右侧展示对应的高清放大图像。

页面结构

整个页面采用了经典的两栏布局设计，左侧为缩略图区域，右侧为主图及放大预览区域。

缩略图区域

缩略图区域位于页面左侧，垂直排列多个小尺寸的商品图片缩略图。每个缩略图都带有边框高亮效果，当前选中的缩略图会有橙色边框标识。

<div class="thumbnails" id="thumbnailsContainer"></div>

主图与放大镜区域

主图区域占据页面右侧大部分空间，包含实际展示的商品大图、放大镜遮罩层以及放大预览窗口。

<div class="product-viewer">

  <div class="main-image-container" id="mainContainer">

    <img class="main-image" id="mainImage" src="" alt="Product Image">

    <div class="magnifier-lens" id="magnifierLens"></div>

    <button class="nav-btn prev-btn" id="prevBtn">‹</button>

    <button class="nav-btn next-btn" id="nextBtn">›</button>

  </div>

  <div class="zoom-preview" id="zoomPreview"></div>

</div>

核心功能实现

渲染缩略图

renderThumbnails() 函数负责动态生成并显示商品图片的缩略图列表。

function renderThumbnails() {

  thumbnailsContainer.innerHTML = '';

  imageData.forEach(function(image, index) {

    var thumbnail = document.createElement('div');

    thumbnail.className = 'thumbnail ' + (index === currentState.currentIndex ? 'active' : '');

    thumbnail.dataset.index = index;

    thumbnail.innerHTML = '<img src="' + image.small + '" alt="Thumbnail ' + index + '">';

    thumbnailsContainer.appendChild(thumbnail);

  });

}

更新主图

updateMainImage() 函数负责更新主图显示区域和放大预览区域的图片内容。

function updateMainImage() {

  var currentImage = imageData[currentState.currentIndex];

  mainImage.src = currentImage.small;

  zoomPreview.style.backgroundImage = 'url(' + currentImage.large + ')';

  // 等待图片加载完成后设置背景尺寸

  mainImage.onload = function() {

    setBackgroundSize();

  };

  // 如果图片已缓存，直接设置背景尺寸

  if (mainImage.complete) {

    setBackgroundSize();

  }

}

放大镜交互逻辑

放大镜的核心在于精确计算放大镜的位置和大小，并同步控制预览区域的背景位置。当鼠标进入主图容器时触发 showMagnifier() 显示放大镜和预览窗口；离开时通过 hideMagnifier() 隐藏它们。在鼠标移动过程中，moveMagnifier() 函数实时计算并更新放大镜位置及其在预览区的对应显示区域。

function moveMagnifier(e) {

  var containerRect = mainContainer.getBoundingClientRect();

  var x = e.clientX - containerRect.left;

  var y = e.clientY - containerRect.top;

  // 计算放大镜尺寸（使用整数避免小数问题）

  var lensWidth = Math.floor(mainContainer.offsetWidth / currentState.zoomFactor);

  var lensHeight = Math.floor(mainContainer.offsetHeight / currentState.zoomFactor);

  // 计算放大镜位置（先计算中心点，再确定左上角位置）

  var lensX = Math.round(x - lensWidth / 2);

  var lensY = Math.round(y - lensHeight / 2);

  // 严格的边界限制（确保右边界和下边界也不会超出）

  lensX = Math.max(0, Math.min(lensX, containerRect.width - lensWidth));

  lensY = Math.max(0, Math.min(lensY, containerRect.height - lensHeight));

  // 设置放大镜位置和尺寸

  magnifierLens.style.left = lensX + 'px';

  magnifierLens.style.top = lensY + 'px';

  magnifierLens.style.width = lensWidth + 'px';

  magnifierLens.style.height = lensHeight + 'px';

  // 计算预览区域背景位置

  var percentX = x / containerRect.width;

  var percentY = y / containerRect.height;

  // 获取背景总尺寸

  var bgWidth = mainContainer.offsetWidth * currentState.zoomFactor;

  var bgHeight = mainContainer.offsetHeight * currentState.zoomFactor;

  // 计算预览区域可视窗口尺寸

  var previewWidth = zoomPreview.offsetWidth;

  var previewHeight = zoomPreview.offsetHeight;

  // 计算背景位置，使鼠标位置居中显示

  var previewBgX = -(percentX * bgWidth - previewWidth / 2);

  var previewBgY = -(percentY * bgHeight - previewHeight / 2);

  // 限制背景位置，避免显示空白区域

  if (bgWidth <= previewWidth) {

    previewBgX = (previewWidth - bgWidth) / 2;

  } else {

    previewBgX = Math.max(previewWidth - bgWidth, Math.min(0, previewBgX));

  }

  if (bgHeight <= previewHeight) {

    previewBgY = (previewHeight - bgHeight) / 2;

  } else {

    previewBgY = Math.max(previewHeight - bgHeight, Math.min(0, previewBgY));

  }

  zoomPreview.style.backgroundPosition = previewBgX + 'px ' + previewBgY + 'px';

}

在现代在线票务系统中，可视化选座功能是提升用户体验的重要组成部分。用户可以在购票过程中直观地查看座位布局，选择心仪的座位，这种交互方式大大提高了用户的参与感和满意度。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 构建一个影院选座系统。

效果演示

本系统实现了典型的影院选座界面。用户可以通过点击座位来选择或取消选择，系统会实时更新选座信息和总价。

页面结构

页面从上到下主要包括以下几个功能区域：座位展示区（seat-map）、状态说明区（status）、选座信息区（selected-info）。

座位展示区

座位展示区位于页面中央，采用网格布局展示所有座位。每个座位用一个小方块表示，不同颜色代表不同状态（可选、已选、已售）。

<div class="seat-map" id="seat-map"></div>

状态说明区

状态说明区展示了座位的不同状态及其对应的颜色标识，帮助用户快速识别座位状态。

<div class="status">

  <div class="status-item">

    <div class="status-color available"></div>

    <span>可选</span>

  </div>

  <div class="status-item">

    <div class="status-color selected"></div>

    <span>已选</span>

  </div>

  <div class="status-item">

    <div class="status-color sold"></div>

    <span>已售</span>

  </div>

</div>

选座信息区

选座信息区展示用户已经选择的座位信息及总价格，实时更新选座状态。

<div class="selected-info">

  <div id="selected-seats">暂未选座</div>

</div>

核心功能实现

数据结构设计

系统使用二维数组 seatData 来表示座位布局，其中1表示可选座位，0表示已售座位。

const seatData = [

  [1, 1, 1, 0, 1, 1, 1, 1],

  [1, 1, 1, 1, 1, 1, 1, 1],

  [1, 1, 1, 1, 0, 1, 1, 1],

  [1, 1, 1, 1, 1, 1, 1, 1],

  [1, 1, 1, 1, 1, 1, 1, 1],

  [1, 1, 1, 1, 1, 1, 1, 1],

];

座位初始化

initSeatMap 函数负责根据座位数据生成可视化的座位布局。该函数遍历座位数据，为每个座位创建DOM元素，并根据座位状态设置相应的CSS类和数据属性。

function initSeatMap() {

  seatData.forEach((row, rowIndex) => {

    const rowDiv = document.createElement('div');

    rowDiv.className = 'seat-row';

    // 添加座位

    for (let i = 0; i < row.length; i++) {

      const seat = document.createElement('div');

      seat.className = row[i] === 0 ? 'seat sold' : 'seat available';

      seat.textContent = i+1;

      seat.dataset.row = rowIndex + 1;

      seat.dataset.number = i+1;

      seat.dataset.status = row[i];

      rowDiv.appendChild(seat);

    }

    seatMapElem.appendChild(rowDiv);

  });

}

选座交互处理

通过事件委托机制处理座位点击事件，实现座位状态切换。当用户点击座位时，系统会检查座位是否可选，如果是则切换其状态，并更新选座信息。

seatMapElem.addEventListener('click', (e) => {

  const seat = e.target.closest('.seat');

  if (!seat || seat.classList.contains('sold')) return;

  const currentStatus = seat.dataset.status;

  if (currentStatus === '1') { // 可选

    seat.classList.remove('available');

    seat.classList.add('selected');

    seat.dataset.status = '2';

  } else { // 已选

    seat.classList.remove('selected');

    seat.classList.add('available');

    seat.dataset.status = '1';

  }

  updateSelectedInfo();

});

选座信息更新

updateSelectedInfo 函数负责更新已选座位信息和总价显示。每当座位状态发生变化时，此函数会重新收集所有已选座位信息，更新显示内容和总价。

function updateSelectedInfo() {

  const selected = document.querySelectorAll('#seat-map .selected');

  const seatsList = Array.from(selected).map(seat => ({

    row: seat.dataset.row,

    number: seat.dataset.number

  }));

  // 动态更新座位信息容器

  const selectedSeatsElem = document.getElementById('selected-seats');

  selectedSeatsElem.innerHTML = ''; // 清空当前内容

  if (seatsList.length === 0) {

    selectedSeatsElem.textContent = '暂未选座';

  } else {

    seatsList.forEach(seat => {

      const seatDiv = document.createElement('div');

      seatDiv.className = 'selected-seat-item';

      seatDiv.innerHTML = `<span>${seat.row}排${seat.number}座</span>

                <span>￥${pricePerSeat}</span>

            `;

      selectedSeatsElem.appendChild(seatDiv);

    });

  }

  // 更新总价和按钮文字

  const totalPrice = selected.length * pricePerSeat;

  const btnElem = document.getElementById('btn');

  btnElem.textContent = selected.length > 0 ? `确认选座 (￥${totalPrice})` : '请先选座';

}

扩展建议

座位锁定机制：增加座位锁定功能，防止多个用户同时选择同一座位

最佳座位推荐：根据观影体验推荐最佳座位区域

情侣座/家庭座：支持连续座位的选择限制

座位类型区分：区分普通座、VIP座等不同类型座位并设置不同价格

场次选择：支持不同时段场次的座位状态管理

座位图自定义：允许管理员自定义座位布局和区域划分

座位预订倒计时：为已选座位添加保留时间限制

在现代网络安全体系中，人机验证机制扮演着至关重要的角色。传统的文本验证码由于识别困难、用户体验差等问题逐渐被更先进的验证方式取代。滑动验证码作为一种新型的人机验证手段，凭借其直观的操作体验和良好的安全性，广泛应用于各类网站和应用程序中。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 构建一个完整的滑动验证码系统。

效果演示

滑动验证码的核心交互流程包括图像加载、拼图生成、用户拖拽和验证判断四个阶段，用户通过拖拽右侧滑块向右移动，使拼图块与背景图像中的缺口对齐，验证成功时显示绿色成功提示，失败则显示红色错误信息并自动重置。

完整代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>滑动验证码</title>

  <style>

      * {

          margin: 0;

          padding: 0;

          box-sizing: border-box;

      }

      body {

          background: #f5f5f5;

      }

      .container {

          display: flex;

          padding: 20px;

          justify-content: center;

      }

      .verify-container {

          background: #fff;

          width:400px;

          padding: 10px;

          border: 1px solid #ddd;

          user-select: none;

      }

      .verify-img {

          width: 380px;

          height: 190px;

          margin-bottom: 10px;

          position: relative;

      }

      .verify-bar-box {

          width: 380px;

          height: 50px;

          line-height: 50px;

          position: relative;

          background: #FFFFFF;

          text-align: center;

          box-sizing: content-box;

          border: 1px solid #ddd;

          border-radius: 4px;

          color: #999;

      }

      .verify-left-bar {

          background: #f0fff0;

          position: absolute;

          top: 0;

          left: 0;

          height: 50px;

      }

      .verify-move-block {

          position: absolute;

          top: 0;

          left: 0;

          background: #fff;

          cursor: pointer;

          box-sizing: content-box;

          box-shadow: 0 0 2px #888888;

          border-radius: 1px;

          width: 50px;

          height: 50px;

      }

      .verify-sub-block {

          position: absolute;

          border: 1px solid #ddd;

          height: 50px;

          left: -2px;

          top: -201px;

      }

      .verify-result {

          margin-top: 10px;

          padding: 8px 12px;

          text-align: center;

          border-radius: 4px;

          font-weight: bold;

          display: none;

      }

      .verify-result.success {

          background-color: #dff0d8;

          color: #3c763d;

          border: 1px solid #d6e9c6;

          display: block;

      }

      .verify-result.fail {

          background-color: #f2dede;

          color: #a94442;

          border: 1px solid #ebccd1;

          display: block;

      }

      .loading-indicator {

          padding: 5px 10px;

          border-radius: 4px;

      }

  </style>

</head>

<body>

<div class="container">

  <div class="verify-container">

    <div class="verify-box">

      <div class="verify-img">

        <img class="back-img" src="" style="width:100%;height:100%;"/>

        <div class="loading-indicator" id="backImgLoading" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#666;font-size:14px;display:none;">加载中...</div>

      </div>

      <div class="verify-bar-box">

        <span class="verify-msg">向右滑动完成验证</span>

        <div class="verify-left-bar"></div>

        <div class="verify-move-block">

          <span>&gt;</span>

          <div class="verify-sub-block">

            <img class="block-img" src="" style="width:100%;height:100%;"/>

          </div>

        </div>

      </div>

    </div>

    <div class="verify-result" id="verifyResult"></div>

  </div>

</div>

<script>

  var verifyBarBox = document.querySelector('.verify-bar-box');

  var moveBlock = document.querySelector('.verify-move-block');

  var verifyLeftBar = document.querySelector('.verify-left-bar');

  var backImg = document.querySelector('.back-img');

  var subBlock = document.querySelector('.verify-sub-block');

  var blockImg = document.querySelector('.block-img');

  var verifyResult = document.getElementById('verifyResult');

  var backImgLoading = document.getElementById('backImgLoading');

  var startX = 0;

  var isDragging = false;

  var maxWidth = verifyBarBox.offsetWidth - moveBlock.offsetWidth;

  var imgUrl = 'https://picsum.photos/380/190';

  var imgWidth = 380;

  var imgHeight = 190;

  var bolckSize = 50;

  var targetX = 0;

  var targetY = 0;

  var tolerance = 5;

  init();

  async function init() {

    // 显示加载指示器

    showLoading()

    targetX = Math.floor(Math.random() * (imgWidth - bolckSize - 60)) + 30;

    targetY = Math.floor(Math.random() * (imgHeight - bolckSize - 20)) + 10;

    var img = await loadImg(imgUrl+'?'+Math.random());

    // 创建背景画布并绘制带缺口的图像

    var backCanvas = document.createElement('canvas')

    backCanvas.width = imgWidth;

    backCanvas.height = imgHeight;

    var backCtx = backCanvas.getContext('2d');

    backCtx.drawImage(img, 0, 0, 380, 190, 0, 0, imgWidth, imgHeight);

    backCtx.fillStyle = '#FFFFFF';

    backCtx.fillRect(targetX, targetY, 50, 50);

    backImg.src = backCanvas.toDataURL('image/png');

    // 创建拼图块

    var canvas = document.createElement('canvas')

    canvas.width = 50;

    canvas.height = 50;

    var ctx = canvas.getContext('2d');

    ctx.drawImage(img, targetX, targetY, bolckSize, bolckSize, 0, 0, bolckSize, bolckSize)

    blockImg.src = canvas.toDataURL('image/png');

    subBlock.style.top = (-201 + targetY) + 'px';

    // 隐藏加载指示器

    hideLoading()

  }

  function showLoading() {

    backImgLoading.style.display = 'block';

    subBlock.style.display = 'none'

    backImg.style.display = 'none'

  }

  function hideLoading() {

    backImgLoading.style.display = 'none';

    subBlock.style.display = 'block'

    backImg.style.display = 'block'

  }

  // 绘制拼图块

  function loadImg(url){

    return new Promise((res,rej)=>{

      const im = new Image();

      im.crossOrigin='anonymous';

      im.onload = ()=>res(im);

      im.onerror= rej;

      im.src = url;

    });

  }

  // 鼠标按下事件 - 开始拖拽

  moveBlock.addEventListener('mousedown', function(e) {

    isDragging = true;

    startX = e.clientX;

    moveBlock.style.backgroundColor = '#337AB7';

    moveBlock.style.color = '#FFFFFF';

    verifyLeftBar.style.border = '1px solid #337AB7';

  });

  // 鼠标移动事件 - 拖拽过程

  document.addEventListener('mousemove', function(e) {

    if (!isDragging) return;

    var newLeft = e.clientX - startX - 2;

    // 限制滑块移动范围

    if (newLeft < 0) newLeft = 0;

    if (newLeft > maxWidth) newLeft = maxWidth;

    moveBlock.style.left = newLeft + 'px';

    verifyLeftBar.style.width = newLeft + 'px';

    verifyLeftBar.style.border = '1px solid #337AB7';

  });

  // 鼠标释放事件 - 结束拖拽

  document.addEventListener('mouseup', function() {

    if (!isDragging) return;

    isDragging = false;

    var currentPosition = moveBlock.offsetLeft;

    if (Math.abs(currentPosition - targetX) <= tolerance) {

      moveBlock.style.backgroundColor = '#5CB85C';

      moveBlock.style.color = '#FFFFFF';

      verifyLeftBar.style.border = '1px solid #5CB85C';

      // 显示成功提示

      verifyResult.textContent = '验证成功！';

      verifyResult.className = 'verify-result success';

      return;

    }

    moveBlock.style.backgroundColor = '#D9534F';

    moveBlock.style.color = '#FFFFFF';

    verifyLeftBar.style.border = '1px solid #D9534F';

    verifyLeftBar.style.backgroundColor = '#fff0f0';

    // 显示失败提示

    verifyResult.textContent = '验证失败，请重试';

    verifyResult.className = 'verify-result fail';

    // 滑块回弹动画

    moveBlock.style.transition = 'left 0.8s';

    moveBlock.style.left = '0px';

    verifyLeftBar.style.transition = 'width 0.8s';

    verifyLeftBar.style.width = '0px';

    // 动画结束后清除过渡效果

    setTimeout(() => {

      init()

      moveBlock.style.transition = '';

      verifyLeftBar.style.transition = '';

      moveBlock.style.backgroundColor = '#FFFFFF';

      moveBlock.style.color = '#999';

      verifyLeftBar.style.backgroundColor = '#F0FFF0';

      // 清除验证结果提示

      verifyResult.className = 'verify-result';

    }, 800);

  });

</script>

</body>

</html>

在现代企业办公环境中，会议室资源的有效管理是提升工作效率的重要环节。本文将详细介绍一个基于 HTML、CSS 和 JavaScript 实现的多会议室甘特视图管理系统，帮助用户直观地查看和管理会议室预订情况。

效果演示

该系统通过甘特图形式展示多个会议室在一天内的使用情况，用户可以选择不同日期查看会议室预订状态，并能申请新的会议。系统提供了清晰的时间轴和颜色编码来区分不同状态的会议。用户可以方便地查看会议室占用情况，并通过简单的界面提交新的会议室预订申请。

页面结构

系统主要包含以下几个功能区域：

控制面板区域

控制面板位于页面顶部，提供日期选择和基本操作按钮。这个区域允许用户选择查看的日期，并提供了申请会议的按钮。

<div class="controls">
 <input type="date" id="dateInp">
 <button onclick="search()">查询</button>
 <button onclick="openApplyModal()">申请会议</button>
</div>

图例说明区域

为了让用户更好理解不同颜色代表的含义，系统提供了图例说明。

<div class="legend">
 <div class="legend-item">
   <div class="legend-color yellow"></div>
   <span>待审批</span>
 </div>
 <!-- 其他状态图例 -->
</div>

甘特图展示区域

这是系统的核心展示区域，以表格形式呈现各会议室在不同时段的使用情况。

<div class="gantt-container">
 <div id="gantt" class="gantt"></div>
</div>

弹窗区域

系统包含两个主要弹窗：会议申请弹窗和会议详情弹窗，分别用于创建新会议和查看详情。

<div id="applyModal" class="modal">...</div>
<div id="meetingModal" class="modal">...</div>

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>多会议室甘特视图</title>
 <style>
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }
     body {
         background-color: #f5f5f5;
         min-height: 100vh;
         padding: 20px;
     }
     .container {
         max-width: 1500px;
         margin: 0 auto;
         background: white;
         border-radius: 15px;
         box-shadow: 0 20px 40px rgba(0,0,0,0.1);
         overflow: hidden;
     }
     .header {
         background: #4a5568;
         color: white;
         padding: 20px;
         text-align: center;
     }

     .header h1 {
         font-size: 24px;
         font-weight: 500;
     }
     .main {
         padding: 20px;
     }
     .controls {
         display: flex;
         gap: 10px;
         margin-bottom: 10px;
         flex-wrap: wrap;
     }

     select, button, input, textarea {
         padding: 8px 12px;
         border: 1px solid #e0e0e0;
         border-radius: 4px;
     }

     button {
         background: #409EFF;
         color: white;
         border: none;
         cursor: pointer;
         transition: background 0.3s;
     }

     button:hover {
         opacity: 0.9;
     }

     .gantt-container {
         background: white;
         border: 1px solid #e0e0e0;
         border-radius: 4px;
         overflow: hidden;
         box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     }

     .gantt {
         width: 100%;
         display: table;
         table-layout: fixed;
     }

     .row {
         display: table-row;
     }

     .cell {
         display: table-cell;
         border: 1px solid #e0e0e0;
         text-align: center;
         vertical-align: middle;
         height: 36px;
         width: 4.2%;
         position: relative;
     }

     .cell.room {
         width: 11.8%;
         font-weight: bold;
         background: #fafafa;
     }

     .cell-time {
         width: 4.2%;
         height: 38px;
         font-size: 12px;
         color: #666;
         display: table-cell;
         text-align: center;
         vertical-align: middle;
         position: relative;
         left: -2.1%;
     }

     .cell-time:first-child {
         left: 0;
     }

     .meeting {
         height: 10px;
         border-radius: 3px;
         position: absolute;
         left: 0;
         top: 13px;
         z-index: 999;
         cursor: pointer;
     }

     .yellow { background: #FFCE1A; }
     .blue { background: #409EFF; }
     .pink { background: #DE1794; }
     .gray { background: #777; }

     .pagination {
         text-align: right;
         margin-top: 10px;
     }

     .legend {
         margin: 15px 0;
         display: flex;
         align-items: center;
         gap: 20px;
         flex-wrap: wrap;
     }

     .legend-item {
         display: flex;
         align-items: center;
         gap: 5px;
     }

     .legend-color {
         width: 20px;
         height: 10px;
         border-radius: 3px;
     }

     .apply-form {
         margin: 20px 0;
         padding: 15px;
         border: 1px solid #e0e0e0;
         background: #fff;
         border-radius: 4px;
     }

     .apply-form input,
     .apply-form textarea,
     .apply-form select {
         margin-right: 10px;
         margin-bottom: 10px;
     }

     .modal {
         display: none;
         position: fixed;
         z-index: 1000;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0,0,0,0.5);
     }

     .modal-content {
         background-color: #fff;
         margin: 10% auto;
         padding: 20px;
         border: none;
         width: 90%;
         max-width: 500px;
         border-radius: 8px;
         box-shadow: 0 4px 15px rgba(0,0,0,0.2);
     }

     .close {
         color: #aaa;
         float: right;
         font-size: 28px;
         font-weight: bold;
         cursor: pointer;
         line-height: 1;
     }

     .close:hover {
         color: #000;
     }

     .meeting-detail div {
         margin-bottom: 12px;
     }

     .meeting-detail label {
         font-weight: bold;
         margin-right: 10px;
         display: inline-block;
         width: 80px;
     }

     .time-selection {
         display: flex;
         align-items: center;
         gap: 10px;
         margin: 15px 0;
     }

     .time-selection select {
         padding: 5px;
     }
 </style>
</head>
<body>
<div class="container">
 <div class="header">
   <h1>多会议室甘特视图</h1>
 </div>

 <div class="main">
   <div class="controls">
     <input type="date" id="dateInp">
     <button onclick="search()">查询</button>
     <button onclick="openApplyModal()">申请会议</button>
   </div>

   <div class="legend">
     <div class="legend-item">
       <div class="legend-color yellow"></div>
       <span>待审批</span>
     </div>
     <div class="legend-item">
       <div class="legend-color blue"></div>
       <span>已批准</span>
     </div>
     <div class="legend-item">
       <div class="legend-color pink"></div>
       <span>进行中</span>
     </div>
     <div class="legend-item">
       <div class="legend-color gray"></div>
       <span>已完成</span>
     </div>
   </div>

   <div class="gantt-container">
     <div id="gantt" class="gantt"></div>
   </div>
 </div>
</div>

<!-- 会议申请弹窗 -->
<div id="applyModal" class="modal">
 <div class="modal-content">
   <span class="close" onclick="closeApplyModal()">×</span>
   <h3>会议申请</h3>
   <div class="meeting-detail">
     <div>
       <label>会议主题:</label>
       <input type="text" id="modalMeetingTitle" placeholder="请输入会议主题">
     </div>
     <div>
       <label>会议日期:</label>
       <input type="date" id="modalApplyDate">
     </div>
     <div>
       <label>会议室:</label>
       <select id="modalApplyRoom">
         <option value="">选择会议室</option>
       </select>
     </div>
     <div class="time-selection">
       <label>会议时间:</label>
       <select id="startTimeSelect"></select>
       <span>到</span>
       <select id="endTimeSelect"></select>
     </div>
     <div>
       <label>参会人数:</label>
       <input type="number" id="modalAttendeeCount" min="1" placeholder="请输入人数">
     </div>
     <div>
       <label>会议内容:</label>
       <textarea id="modalMeetingContent" placeholder="请输入会议内容"></textarea>
     </div>
     <div style="text-align: right; margin-top: 15px;">
       <button onclick="closeApplyModal()" style="background:#999">取消</button>
       <button onclick="submitMeeting()">提交申请</button>
     </div>
   </div>
 </div>
</div>

<!-- 会议详情弹窗 -->
<div id="meetingModal" class="modal">
 <div class="modal-content">
   <span class="close" onclick="closeMeetingModal()">×</span>
   <h3>会议详情</h3>
   <div class="meeting-detail" id="meetingDetailContent"></div>
 </div>
</div>

<script>
 // 数据和配置
 var rooms = ['梅花厅','兰亭厅','竹苑厅','菊堂厅'];
 var timeArr = ['08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30'];
 var statusMap = {
   1: '待审批',
   3: '已批准',
   4: '进行中',
   5: '已完成'
 };

 // 固定的模拟数据
 var mockDataByDate = {
   '2025-11-25': {
     '梅花厅': [
       {start: '09:00', time: 2, status: 1, title: '项目启动会', content: '讨论新项目启动相关事宜', attendeeCount: 15},
       {start: '14:00', time: 3, status: 3, title: '技术评审会', content: '代码和技术方案评审', attendeeCount: 8}
     ],
     '兰亭厅': [
       {start: '10:00', time: 1, status: 4, title: '客户洽谈会', content: '重要客户合作洽谈', attendeeCount: 5},
       {start: '15:00', time: 2, status: 5, title: '培训会', content: '新员工技能培训', attendeeCount: 20}
     ],
     '竹苑厅': [
       {start: '09:30', time: 2, status: 1, title: '部门例会', content: '部门日常工作安排', attendeeCount: 5},
       {start: '14:30', time: 1, status: 3, title: '预算审批会', content: '部门预算审批讨论', attendeeCount: 6}
     ],
     '菊堂厅': [
       {start: '11:00', time: 2, status: 4, title: '合作伙伴会', content: '合作伙伴关系维护', attendeeCount: 10},
       {start: '16:00', time: 1, status: 5, title: '安全培训会', content: '安全知识培训', attendeeCount: 25}
     ]
   },
   // 其他日期数据
 };

 var userMeetings = [];

 var dayjs = (d) => {
   var date = new Date(d);
   return {
     format(fmt) {
       return fmt.replace('YYYY', date.getFullYear())
         .replace('MM', String(date.getMonth() + 1).padStart(2, '0'))
         .replace('DD', String(date.getDate()).padStart(2, '0'));
     }
   };
 };

 // 检查时间重叠
 var isTimeOverlap = (start1, duration1, start2, duration2) => {
   var startIndex1 = timeArr.indexOf(start1);
   var endIndex1 = startIndex1 + duration1;
   var startIndex2 = timeArr.indexOf(start2);
   var endIndex2 = startIndex2 + duration2;
   return (startIndex1 < endIndex2) && (startIndex2 < endIndex1);
 };

 // 获取指定日期的会议数据
 var getMeetingsByDate = (date) => {
   var meetings = [];

   rooms.forEach(room => {
     var dateData = mockDataByDate[date] || {};
     var roomMeetings = dateData[room] || [];

     roomMeetings.forEach(meeting => {
       meetings.push({
         room,
         date,
         start: meeting.start,
         time: meeting.time,
         status: meeting.status,
         isCreator: Math.random() > 0.5 ? 'true' : 'false',
         title: meeting.title,
         content: meeting.content,
         attendeeCount: meeting.attendeeCount
       });
     });
   });

   meetings.push(...userMeetings.filter(m => m.date === date));
   return meetings;
 };

 // 渲染甘特图
 function renderGantt(meetingsData) {
   var box = document.getElementById('gantt');
   box.innerHTML = '';

   // 创建时间标题行
   var hRow = document.createElement('div');
   hRow.className = 'row';
   hRow.innerHTML = '<div class="cell-time"></div>' +
     timeArr.map(t => `<div class="cell-time">${t}</div>`).join('');
   box.appendChild(hRow);

   // 渲染每行会议室
   rooms.forEach(room => {
     var row = document.createElement('div');
     row.className = 'row';

     var html = `<div class="cell room">${room}</div>`;
     var roomMeetings = meetingsData.filter(m => m.room === room)[0]?.map || {};

     timeArr.forEach(time => {
       if (roomMeetings[time]) {
         var [len, color, meeting] = roomMeetings[time];
         html += `<div class="cell">
                     <div class="meeting ${color}"
                          style="width:calc(${len*100}% + ${(len-1)*2}px)"
                          data-meeting='${JSON.stringify(meeting)}'>
                     </div>
                    </div>`;
       } else {
         html += '<div class="cell"></div>';
       }
     });

     row.innerHTML = html;
     box.appendChild(row);
   });

   // 绑定点击事件
   document.querySelectorAll('.meeting').forEach(el => {
     el.addEventListener('click', () => {
       var meetingData = JSON.parse(el.getAttribute('data-meeting'));
       showMeetingDetail(meetingData);
     });
   });
 }

 // 查询功能
 function search() {
   var date = document.getElementById('dateInp').value;
   if (!date) date = dayjs(new Date()).format('YYYY-MM-DD');
   else date = dayjs(date).format('YYYY-MM-DD');

   var list = getMeetingsByDate(date);

   // 按会议室分组
   var groupedData = rooms.map(room => ({
     room,
     name: room,
     map: {}
   }));

   list.forEach(meeting => {
     var color = {1:'yellow', 3:'blue', 4:'pink', 5:'gray'}[meeting.status];
     var roomData = groupedData.find(r => r.room === meeting.room);
     if (roomData) {
       roomData.map[meeting.start] = [meeting.time, color, meeting];
     }
   });

   renderGantt(groupedData);
 }

 // 弹窗相关函数
 function openApplyModal() {
   var modal = document.getElementById('applyModal');
   document.getElementById('modalApplyDate').value = dayjs(new Date()).format('YYYY-MM-DD');

   var roomSelect = document.getElementById('modalApplyRoom');
   roomSelect.innerHTML = '<option value="">选择会议室</option>';
   rooms.forEach(room => {
     var option = document.createElement('option');
     option.value = room;
     option.textContent = room;
     roomSelect.appendChild(option);
   });

   initTimeSelectors();
   modal.style.display = 'block';
 }

 function closeApplyModal() {
   document.getElementById('applyModal').style.display = 'none';
 }

 function initTimeSelectors() {
   var startTimeSelect = document.getElementById('startTimeSelect');
   var endTimeSelect = document.getElementById('endTimeSelect');

   startTimeSelect.innerHTML = '';
   endTimeSelect.innerHTML = '';

   timeArr.slice(0, -1).forEach(time => {
     var option = document.createElement('option');
     option.value = time;
     option.textContent = time;
     startTimeSelect.appendChild(option);
   });

   timeArr.slice(1).forEach(time => {
     var option = document.createElement('option');
     option.value = time;
     option.textContent = time;
     endTimeSelect.appendChild(option);
   });

   startTimeSelect.selectedIndex = 0;
   endTimeSelect.selectedIndex = 0;

   startTimeSelect.onchange = updateEndTimeOptions;
 }

 function updateEndTimeOptions() {
   var startTimeSelect = document.getElementById('startTimeSelect');
   var endTimeSelect = document.getElementById('endTimeSelect');
   var selectedStartTime = startTimeSelect.value;
   var currentEndTime = endTimeSelect.value;

   endTimeSelect.innerHTML = '';

   var startIndex = timeArr.indexOf(selectedStartTime);
   for (var i = startIndex + 1; i < timeArr.length; i++) {
     var option = document.createElement('option');
     option.value = timeArr[i];
     option.textContent = timeArr[i];
     endTimeSelect.appendChild(option);
   }

   if (timeArr.indexOf(currentEndTime) > startIndex) {
     endTimeSelect.value = currentEndTime;
   } else {
     endTimeSelect.selectedIndex = 0;
   }
 }

 function submitMeeting() {
   var title = document.getElementById('modalMeetingTitle').value;
   var content = document.getElementById('modalMeetingContent').value;
   var date = document.getElementById('modalApplyDate').value;
   var room = document.getElementById('modalApplyRoom').value;
   var attendeeCount = document.getElementById('modalAttendeeCount').value;
   var startTime = document.getElementById('startTimeSelect').value;
   var endTime = document.getElementById('endTimeSelect').value;

   if (!title || !date || !room || !attendeeCount || !startTime || !endTime) {
     alert('请填写完整信息');
     return;
   }

   var startIndex = timeArr.indexOf(startTime);
   var endIndex = timeArr.indexOf(endTime);

   if (startIndex >= endIndex) {
     alert('结束时间必须晚于开始时间');
     return;
   }

   var duration = endIndex - startIndex;
   var conflictingMeetings = getMeetingsByDate(date).filter(m =>
     m.room === room && m.date === date && isTimeOverlap(startTime, duration, m.start, m.time)
   );

   if (conflictingMeetings.length > 0) {
     alert('该时间段已有会议，请选择其他时间');
     return;
   }

   userMeetings.push({
     room,
     date,
     start: startTime,
     time: duration,
     status: 1,
     isCreator: 'true',
     title,
     content,
     attendeeCount: parseInt(attendeeCount)
   });

   alert('会议申请已提交');
   closeApplyModal();

   // 清空表单
   ['modalMeetingTitle', 'modalMeetingContent', 'modalAttendeeCount'].forEach(id => {
     document.getElementById(id).value = '';
   });

   search();
 }

 function showMeetingDetail(meeting) {
   var modal = document.getElementById('meetingModal');
   var detailContent = document.getElementById('meetingDetailContent');

   var startTimeIndex = timeArr.indexOf(meeting.start);
   var endTimeIndex = startTimeIndex + meeting.time;
   var endTime = endTimeIndex < timeArr.length ? timeArr[endTimeIndex] : '结束';
   var statusText = statusMap[meeting.status] || '未知';

   detailContent.innerHTML = `
       <div><label>主题:</label> ${meeting.title}</div>
       <div><label>日期:</label> ${meeting.date}</div>
       <div><label>地点:</label> ${meeting.room}</div>
       <div><label>时间:</label> ${meeting.start} - ${endTime}</div>
       <div><label>状态:</label> ${statusText}</div>
       <div><label>参会人数:</label> ${meeting.attendeeCount || 'N/A'}</div>
       <div><label>会议内容:</label> ${meeting.content || '无'}</div>
     `;

   modal.style.display = 'block';
 }

 function closeMeetingModal() {
   document.getElementById('meetingModal').style.display = 'none';
 }

 // 页面初始化
 window.onload = function() {
   document.getElementById('dateInp').value = dayjs(new Date()).format('YYYY-MM-DD');
   search();

   window.onclick = function(event) {
     var applyModal = document.getElementById('applyModal');
     var meetingModal = document.getElementById('meetingModal');

     if (event.target === applyModal) closeApplyModal();
     if (event.target === meetingModal) closeMeetingModal();
   };
 };
</script>

</body>
</html>

地理位置服务在当今的互联网应用中扮演着重要角色，无论是电商配送、出行导航还是本地生活服务，都需要准确的位置信息支持。本文将介绍如何使用 HTML、CSS 和 JavaScript 结合腾讯地图 API 实现一个简单易用的地图位置搜索功能，帮助用户快速查找地理位置并获取其经纬度坐标。

效果演示

本系统提供简洁直观的用户界面，主要包括地址搜索输入框、坐标结果显示区域和地图展示区域。用户只需在搜索框中输入地址关键词，点击搜索按钮即可在地图上定位该位置，并同时显示其经纬度坐标。

页面结构

页面包含以下几个主要区域：搜索区域、坐标显示区域、地图展示区域。

搜索区域

搜索区域位于页面顶部，包含地址输入框和搜索按钮，是用户与系统交互的主要入口。

<div class="search-section">
 <div class="search-group">
   <input type="text" placeholder="请输入地址" id="address">
   <button id="search_map">搜索位置</button>
 </div>
</div>

坐标显示区域

坐标显示区域位于搜索区域下方，用于展示当前位置的经纬度信息。

<div class="result-section">
 <div class="coordinates">
   <div class="coordinate-input">
     <label for="lng">经度 (Longitude)</label>
     <input type="text" id="lng" name="lng" readonly>
   </div>
   <div class="coordinate-input">
     <label for="lat">纬度 (Latitude)</label>
     <input type="text" id="lat" name="lat" readonly>
   </div>
 </div>
</div>

地图展示区域

地图展示区域占据页面大部分空间，用于可视化显示地图和位置标记。

<div class="map-container" id="map-container"></div>

核心功能实现

引入腾讯地图

通过 script 标签引入腾讯地图 JavaScript API，用于在网页中加载地图功能库。your_key 是腾讯地图API的开发者密钥占位符，实际使用时需要替换为真实的API密钥。

<script src="https://map.qq.com/api/gljs?v=1.exp&key=your_key&libraries=service"></script>

地图初始化
使用 initMap 函数初始化地图。设置默认中心点和缩放级别，创建一个标记图层并绑定到地图上，绑定地图的点击事件，初始化坐标显示。

function initMap(lat = 39.903630, lng = 116.397712) {
 // 创建地图中心点坐标对象
 var center = new TMap.LatLng(lat, lng)
 // 创建地图实例并设置配置参数
 map = new TMap.Map(document.getElementById('map-container'), {
   center: center,
   zoom: 12,
 });
 // 创建并初始化标记图层
 markerLayer = new TMap.MultiMarker({
   map: map,
   styles: {
     "myStyle": new TMap.MarkerStyle({
       "width": 25,
       "height": 35,
       "anchor": { x: 16, y: 32 }
     })
   },
   geometries: [{
     "id": "1",
     "styleId": 'myStyle',
     "position": new TMap.LatLng(lat, lng),
   }]
 });
 // 绑定点击事件
 map.on("click",clickHandler)
 document.getElementById('lat').value = lat;
 document.getElementById('lng').value = lng;
}
地址搜索功能
通过腾讯地图的地理编码服务，将用户输入的地址转换为具体的经纬度坐标，在地图上标记该位置，并将地图的中心点设置为该位置。
function searchMap(address) {
 var geocoder = new TMap.service.Geocoder();
 geocoder.getLocation({address:address}).then((res)=>{
   if (res.status != 0) {
     console.log('获取经纬度错误：',res);
     return;
   }
   changeCoordinate(res.result.location.lat,res.result.location.lng);
   map.setCenter(new TMap.LatLng(res.result.location.lat,res.result.location.lng));
 }).catch((res)=>{
   console.log('获取经纬度错误：',res)
 })
}

地图交互功能

用户可以直接点击地图上的任意位置，系统会自动更新标记位置并显示新的经纬度坐标。

地图交互功能
用户可以直接点击地图上的任意位置，系统会自动更新标记位置并显示新的经纬度坐标。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>地图位置搜索</title>
 <style>
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         background-color: #f5f5f5;
         min-height: 100vh;
         padding: 20px;
     }

     .container {
         max-width: 800px;
         margin: 0 auto;
         background: white;
         border-radius: 15px;
         box-shadow: 0 20px 40px rgba(0,0,0,0.1);
         overflow: hidden;
     }

     .header {
         background: #4a5568;
         color: white;
         padding: 20px;
         text-align: center;
     }

     .header h1 {
         font-size: 1.8rem;
         font-weight: 500;
     }

     .search-section {
         padding: 25px;
         background: #f7fafc;
         border-bottom: 1px solid #e2e8f0;
     }

     .search-group {
         display: flex;
         gap: 10px;
         margin-bottom: 15px;
     }

     #address {
         flex: 1;
         padding: 12px 15px;
         border: 2px solid #e2e8f0;
         border-radius: 8px;
         font-size: 16px;
         transition: border-color 0.3s;
     }

     #address:focus {
         outline: none;
         border-color: #667eea;
     }

     #search_map {
         padding: 12px 25px;
         background: #667eea;
         color: white;
         border: none;
         border-radius: 8px;
         cursor: pointer;
         font-size: 16px;
         font-weight: 500;
         transition: background 0.3s;
     }

     #search_map:hover {
         background: #5a67d8;
     }

     .result-section {
         padding: 20px 25px;
         background: #edf2f7;
     }

     .coordinates {
         display: flex;
         gap: 15px;
         margin-bottom: 15px;
     }

     .coordinate-input {
         flex: 1;
     }

     .coordinate-input label {
         display: block;
         margin-bottom: 5px;
         font-weight: 500;
         color: #4a5568;
     }

     .coordinate-input input {
         width: 100%;
         padding: 10px 12px;
         border: 1px solid #cbd5e0;
         border-radius: 6px;
         font-size: 14px;
     }

     .map-container {
         width: 100%;
         height: 450px;
         border-top: 1px solid #e2e8f0;
     }

     .location-info {
         padding: 15px 25px;
         background: #fff;
         border-top: 1px solid #e2e8f0;
         font-size: 14px;
         color: #4a5568;
     }

     .location-info span {
         font-weight: 600;
         color: #2d3748;
     }
 </style>
</head>
<body>
<div class="container">
 <div class="header">
   <h1>地图位置搜索</h1>
 </div>

 <div class="search-section">
   <div class="search-group">
     <input type="text" placeholder="请输入地址" id="address">
     <button id="search_map">搜索位置</button>
   </div>
 </div>

 <div class="result-section">
   <div class="coordinates">
     <div class="coordinate-input">
       <label for="lng">经度 (Longitude)</label>
       <input type="text" id="lng" name="lng" readonly>
     </div>
     <div class="coordinate-input">
       <label for="lat">纬度 (Latitude)</label>
       <input type="text" id="lat" name="lat" readonly>
     </div>
   </div>
 </div>
 <div class="map-container" id="map-container"></div>
</div>

<script src="https://map.qq.com/api/gljs?v=1.exp&key=your_key&libraries=service"></script>
<script>
 var map; // 地图对象
 var markerLayer; // 标记图层对象
 var search_map = document.getElementById('search_map');

 // 为搜索按钮添加点击事件监听器
 search_map.addEventListener('click', function () {
   var address = document.getElementById('address').value;
   if (address) {
     searchMap(address)
   }
 })

 // 初始化地图函数
 function initMap(lat = 39.903630, lng = 116.397712) {
   // 创建地图中心点坐标对象
   var center = new TMap.LatLng(lat, lng)
   // 创建地图实例并设置配置参数
   map = new TMap.Map(document.getElementById('map-container'), {
     center: center,
     zoom: 12,
   });
   // 创建并初始化多标记图层
   markerLayer = new TMap.MultiMarker({
     map: map,
     styles: {
       "myStyle": new TMap.MarkerStyle({
         "width": 25,
         "height": 35,
         "anchor": { x: 16, y: 32 }
       })
     },
     geometries: [{
       "id": "1",
       "styleId": 'myStyle',
       "position": new TMap.LatLng(lat, lng),
     }]
   });
   // 绑定点击事件
   map.on("click",clickHandler)
   document.getElementById('lat').value = lat;
   document.getElementById('lng').value = lng;
 }
 // 处理地图点击事件
 function clickHandler (e) {
   var lat = e.latLng.getLat().toFixed(6);
   var lng = e.latLng.getLng().toFixed(6);
   changeCoordinate(lat,lng);
 }
 // 地址搜索
 function searchMap(address) {
   var geocoder = new TMap.service.Geocoder();
   geocoder.getLocation({address:address}).then((res)=>{
     if (res.status != 0) {
       console.log('获取经纬度错误：',res);
       return;
     }
     changeCoordinate(res.result.location.lat,res.result.location.lng);
     map.setCenter(new TMap.LatLng(res.result.location.lat,res.result.location.lng));
   }).catch((res)=>{
     console.log('获取经纬度错误：',res)
   })
 }
 // 更新坐标位置
 function changeCoordinate(lat,lng){
   markerLayer.updateGeometries([
     {
       "id": "1",
       "styleId":"myStyle",
       "position": new TMap.LatLng(lat, lng),
     }
   ])
   // 更新坐标显示
   document.getElementById('lng').value = lng;
   document.getElementById('lat').value = lat;
 }
 initMap()
</script>
</body>
</html>

在现代 Web 应用中，积分抽奖活动已成为提升用户参与度和留存率的重要手段。本文将详细介绍一个基于 HTML、CSS 和 JavaScript 实现的九宫格积分抽奖系统，该系统具有流畅的动画效果和良好的用户体验。

效果演示

该抽奖系统采用经典的九宫格布局设计，中心为抽奖按钮，周围八个格子展示不同的奖品选项。用户点击"开始抽奖"按钮后，系统会消耗 100 积分并启动抽奖动画，最终高亮显示中奖结果并通过弹窗展示奖励详情。

页面结构

页面采用居中布局，主体容器 container 包含标题、积分信息和抽奖区域三个主要部分。

主体容器

<div class="container">
 <h1 class="title">积分抽奖</h1>
 <div class="points-info">
   当前积分：<span class="points" id="currentPoints">1000</span>
 </div>

 <div class="lottery-grid">
   <!-- 九宫格抽奖区域 -->
 </div>
</div>

九宫格布局

抽奖区域采用 CSS Grid 布局实现 3×3 的网格结构，中心位置放置抽奖按钮。

<div class="lottery-grid">
 <!-- 第一行 -->
 <div class="lottery-item" data-index="0">
   <div class="item-icon"></div>
   <div class="item-name">10积分</div>
   <div class="item-points">参与奖</div>
 </div>
 <div class="lottery-item" data-index="1">
   <div class="item-icon"></div>
   <div class="item-name">50积分</div>
   <div class="item-points">幸运奖</div>
 </div>
 <div class="lottery-item" data-index="2">
   <div class="item-icon"></div>
   <div class="item-name">100积分</div>
   <div class="item-points">三等奖</div>
 </div>

 <!-- 第二行 -->
 <div class="lottery-item" data-index="7">
   <div class="item-icon"></div>
   <div class="item-name">500积分</div>
   <div class="item-points">特等奖</div>
 </div>
 <div class="draw-button" id="drawButton" onclick="startDraw()">
   <div style="font-size: 24px; margin-bottom: 8px;"></div>
   <div>开始抽奖</div>
   <div style="font-size: 12px; margin-top: 4px;">消耗: 100积分</div>
 </div>
 <div class="lottery-item" data-index="3">
   <div class="item-icon"></div>
   <div class="item-name">20积分</div>
   <div class="item-points">鼓励奖</div>
 </div>

 <!-- 第三行 -->
 <div class="lottery-item" data-index="6">
   <div class="item-icon"></div>
   <div class="item-name">200积分</div>
   <div class="item-points">二等奖</div>
 </div>
 <div class="lottery-item" data-index="5">
   <div class="item-icon"></div>
   <div class="item-name">谢谢参与</div>
   <div class="item-points">再接再厉</div>
 </div>
 <div class="lottery-item" data-index="4">
   <div class="item-icon"></div>
   <div class="item-name">30积分</div>
   <div class="item-points">安慰奖</div>
 </div>
</div>

结果弹窗

中奖结果显示通过模态框 result-modal 实现。

<div class="result-modal" id="resultModal" onclick="handleModalClick(event)">
 <div class="result-content">
   <div class="result-icon" id="resultIcon"></div>
   <div class="result-title" id="resultTitle"></div>
   <div class="result-desc" id="resultDesc"></div>
   <button class="close-btn" onclick="closeResult()">确定</button>
 </div>
</div>

核心功能实现

全局变量定义

系统通过下面几个关键变量管理抽奖状态：

currentPoints：用户当前积分

drawCost：每次抽奖消耗积分

isDrawing：抽奖进行状态标志

prizes：奖品配置数组

let currentPoints = 1000;
let drawCost = 100;
let isDrawing = false;
let prizes = [
 { name: '10积分', points: 10, probability: 25, desc: '恭喜获得参与奖！' },
 // ...其他奖品配置
];

抽奖流程控制

startDraw 函数负责控制整个抽奖流程。首先通过 isDrawing 标志位防止重复触发，然后检查用户积分是否充足，接着扣除抽奖成本、更新界面显示，清理上一次抽奖的高亮状态，最后启动核心的九宫格动画逻辑 startLotteryAnimation。

function startDraw() {
 if (isDrawing) return;
 if (currentPoints < drawCost) {
   showResult('积分不足', `当前积分：${currentPoints}，需要${drawCost}积分才能抽奖！`);
   return;
 }
 isDrawing = true;
 currentPoints -= drawCost;
 updatePointsDisplay();
 updateDrawButtonState(true);
 // 清除之前选中状态并启动动画
 document.querySelectorAll('.lottery-item').forEach(item => {
   item.classList.remove('active');
 });
 startLotteryAnimation();
}

抽奖动画实现

startLotteryAnimation 函数实现九宫格循环高亮的动画效果。它首先确定总共有8个奖项格子，并设定基础转动圈数为3圈，然后通过 getRandomPrizeIndex 获取中奖位置，计算出总的动画步数。

在动画过程中，使用递归 setTimeout 实现循环播放，每一步都会移除上一格的高亮状态并给当前格添加高亮效果，同时根据当前步数动态调整动画速度（前20步加速，最后20步减速），最终在指定步数停止并调用 showDrawResult 展示抽奖结果。

function startLotteryAnimation() {
 const totalItems = 8;
 const baseRounds = 3; 
 const finalIndex = getRandomPrizeIndex();
 const totalSteps = baseRounds * totalItems + finalIndex;

 let currentStep = 0;
 let currentIndex = 0;
 let previousIndex = -1;
 let speed = 50; // 初始速度

 const animate = () => {
   // 移除前一个元素的 active 类
   if (previousIndex !== -1) {
     const previousItem = document.querySelector(`[data-index="${previousIndex}"]`);
     if (previousItem) {
       previousItem.classList.remove('active');
     }
   }

   // 高亮当前格子
   const currentItem = document.querySelector(`[data-index="${currentIndex}"]`);
   if (currentItem) {
     currentItem.classList.add('active');
   }

   previousIndex = currentIndex;
   currentStep++;

   // 速度逐渐变慢
   if (currentStep > totalSteps - 20) {
     speed += 10;
   } else if (currentStep < 20) {
     speed = Math.max(30, speed - 5);
   }

   // 更新索引
   currentIndex = (currentIndex + 1) % totalItems;

   if (currentStep < totalSteps) {
     setTimeout(animate, speed);
   } else {
     // 动画结束，显示结果
     setTimeout(() => {
       showDrawResult(finalIndex);
     }, 500);
   }
 };

 animate();
}

概率算法实现

getRandomPrizeIndex 函数基于概率权重算法确定中奖结果。它首先生成一个 0-100 之间的随机数，然后遍历 prizes 数组累加每个奖项的概率值，当随机数小于等于累计概率时，就返回当前奖项的索引，从而实现按照预设概率分布进行抽奖。如果遍历完所有奖项都没有匹配，则默认返回索引0。

function getRandomPrizeIndex() {
 const random = Math.random() * 100;
 let cumulative = 0;
 for (let i = 0; i < prizes.length; i++) {
   cumulative += prizes[i].probability;
   if (random <= cumulative) {
     return i;
   }
 }
 return 0;
}

扩展建议

增加抽奖次数限制：可以设置每日抽奖次数上限，提高稀缺性

丰富奖品种类：添加实物奖品、优惠券等非积分奖励类型

历史记录功能：记录用户抽奖历史，增强参与感

社交分享机制：允许用户分享中奖结果，扩大传播效果

主题皮肤切换：提供多种视觉主题随时选择切换

音效支持：添加背景音乐和音效增强沉浸感

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>积分抽奖</title>
 <style>
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         background-color: #f5f5f5;
         display: flex;
         justify-content: center;
         padding: 20px;
     }

     .container {
         background: #FFFFFF;
         border-radius: 8px;
         padding: 30px;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         text-align: center;
         width: 800px;
     }

     .title {
         font-size: 28px;
         color: #333;
         margin-bottom: 20px;
         font-weight: bold;
     }

     .points-info {
         font-size: 18px;
         color: #666;
         margin-bottom: 30px;
     }

     .points {
         color: #e74c3c;
         font-weight: bold;
         font-size: 24px;
     }

     .lottery-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(3, 1fr);
         gap: 10px;
         max-width: 450px;
         margin: 0 auto 30px;
         aspect-ratio: 1/1;
     }

     .lottery-item {
         border: 3px solid #ddd;
         border-radius: 15px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         background: linear-gradient(145deg, #f8f9fa, #e9ecef);
         transition: all 0.3s ease;
         cursor: pointer;
         position: relative;
         overflow: hidden;
         font-size: 14px;
     }
     .lottery-item.active {
         border-color: #e74c3c;
         background: linear-gradient(145deg, #ff6b6b, #ee5a52);
         color: white;
         box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3);
         z-index: 2;
     }

     .item-icon {
         font-size: 30px;
         margin-bottom: 8px;
     }

     .item-name {
         font-size: 14px;
         font-weight: bold;
         color: #333;
     }

     .item-points {
         font-size: 12px;
         color: #666;
         margin-top: 4px;
     }

     .lottery-item.active .item-name,
     .lottery-item.active .item-points {
         color: white;
     }

     .draw-button {
         grid-column: 2;
         grid-row: 2;
         border: none;
         border-radius: 15px;
         background: linear-gradient(145deg, #e74c3c, #c0392b);
         color: white;
         font-size: 16px;
         font-weight: bold;
         cursor: pointer;
         transition: all 0.3s ease;
         box-shadow: 0 8px 16px rgba(231, 76, 60, 0.3);
         position: relative;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
     }
     .draw-button:disabled {
         background: linear-gradient(145deg, #95a5a6, #7f8c8d);
         cursor: not-allowed;
         box-shadow: none;
     }

     .result-modal {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.7);
         display: none;
         justify-content: center;
         align-items: center;
         z-index: 1000;
     }

     .result-content {
         background: white;
         padding: 40px;
         border-radius: 20px;
         text-align: center;
         max-width: 400px;
         width: 90%;
     }

     .result-icon {
         font-size: 60px;
         margin-bottom: 20px;
     }

     .result-title {
         font-size: 24px;
         color: #333;
         margin-bottom: 10px;
         font-weight: bold;
     }

     .result-desc {
         font-size: 16px;
         color: #666;
         margin-bottom: 20px;
     }

     .close-btn {
         background: linear-gradient(145deg, #e74c3c, #c0392b);
         color: white;
         border: none;
         padding: 12px 30px;
         border-radius: 25px;
         font-size: 16px;
         cursor: pointer;
         transition: all 0.3s ease;
     }
 </style>
</head>
<body>
<div class="container">
 <h1 class="title">积分抽奖</h1>
 <div class="points-info">
   当前积分：<span class="points" id="currentPoints">1000</span>
 </div>

 <div class="lottery-grid">
   <!-- 第一行 -->
   <div class="lottery-item" data-index="0">
     <div class="item-icon"></div>
     <div class="item-name">10积分</div>
     <div class="item-points">参与奖</div>
   </div>
   <div class="lottery-item" data-index="1">
     <div class="item-icon"></div>
     <div class="item-name">50积分</div>
     <div class="item-points">幸运奖</div>
   </div>
   <div class="lottery-item" data-index="2">
     <div class="item-icon"></div>
     <div class="item-name">100积分</div>
     <div class="item-points">三等奖</div>
   </div>

   <!-- 第二行 -->
   <div class="lottery-item" data-index="7">
     <div class="item-icon"></div>
     <div class="item-name">500积分</div>
     <div class="item-points">特等奖</div>
   </div>
   <div class="draw-button" id="drawButton" onclick="startDraw()">
     <div style="font-size: 24px; margin-bottom: 8px;"></div>
     <div>开始抽奖</div>
     <div style="font-size: 12px; margin-top: 4px;">消耗: 100积分</div>
   </div>
   <div class="lottery-item" data-index="3">
     <div class="item-icon"></div>
     <div class="item-name">20积分</div>
     <div class="item-points">鼓励奖</div>
   </div>

   <!-- 第三行 -->
   <div class="lottery-item" data-index="6">
     <div class="item-icon"></div>
     <div class="item-name">200积分</div>
     <div class="item-points">二等奖</div>
   </div>
   <div class="lottery-item" data-index="5">
     <div class="item-icon"></div>
     <div class="item-name">谢谢参与</div>
     <div class="item-points">再接再厉</div>
   </div>
   <div class="lottery-item" data-index="4">
     <div class="item-icon"></div>
     <div class="item-name">30积分</div>
     <div class="item-points">安慰奖</div>
   </div>
 </div>
</div>

<!-- 结果弹窗 -->
<div class="result-modal" id="resultModal" onclick="handleModalClick(event)">
 <div class="result-content">
   <div class="result-icon" id="resultIcon"></div>
   <div class="result-title" id="resultTitle"></div>
   <div class="result-desc" id="resultDesc"></div>
   <button class="close-btn" onclick="closeResult()">确定</button>
 </div>
</div>

<script>
 // 抽奖系统变量
 let currentPoints = 1000;
 let drawCost = 100;
 let isDrawing = false;
 let prizes = [
   { name: '10积分', points: 10, probability: 25, desc: '恭喜获得参与奖！' },
   { name: '50积分', points: 50, probability: 20, desc: '恭喜获得幸运奖！' },
   { name: '100积分', points: 100, probability: 15, desc: '恭喜获得三等奖！' },
   { name: '20积分', points: 20, probability: 20, desc: '恭喜获得鼓励奖！' },
   { name: '30积分', points: 30, probability: 10, desc: '恭喜获得安慰奖！' },
   { name: '谢谢参与', points: 0, probability: 5, desc: '很遗憾，再接再厉哦！' },
   { name: '200积分', points: 200, probability: 3, desc: '恭喜获得二等奖！' },
   { name: '500积分', points: 500, probability: 2, desc: '恭喜获得特等奖！' }
 ];

 // 更新积分显示
 function updatePointsDisplay() {
   document.getElementById('currentPoints').textContent = currentPoints;
 }

 // 更新抽奖按钮状态
 function updateDrawButtonState(isDrawingState) {
   const drawButton = document.getElementById('drawButton');
   if (isDrawingState) {
     drawButton.innerHTML = `
       <div style="font-size: 24px; margin-bottom: 8px;"></div>
       <div>抽奖中...</div>
     `;
   } else {
     drawButton.innerHTML = `
       <div style="font-size: 24px; margin-bottom: 8px;"></div>
       <div>开始抽奖</div>
       <div style="font-size: 12px; margin-top: 4px;">消耗: 100积分</div>
     `;
   }
   drawButton.disabled = isDrawingState;
 }

 // 开始抽奖
 function startDraw() {
   if (isDrawing) return;
   if (currentPoints < drawCost) {
     showResult('积分不足', `当前积分：${currentPoints}，需要${drawCost}积分才能抽奖！`);
     return;
   }
   isDrawing = true;
   currentPoints -= drawCost;
   updatePointsDisplay();
   updateDrawButtonState(true);
   // 清除之前的选中状态
   document.querySelectorAll('.lottery-item').forEach(item => {
     item.classList.remove('active');
   });
   // 开始转盘动画
   startLotteryAnimation();
 }

 // 开始抽奖动画
 function startLotteryAnimation() {
   const totalItems = 8;
   const baseRounds = 3; // 基础转3圈
   const finalIndex = getRandomPrizeIndex();
   const totalSteps = baseRounds * totalItems + finalIndex;

   let currentStep = 0;
   let currentIndex = 0;
   let previousIndex = -1;
   let speed = 50; // 初始速度

   const animate = () => {
     // 移除前一个元素的 active 类
     if (previousIndex !== -1) {
       const previousItem = document.querySelector(`[data-index="${previousIndex}"]`);
       if (previousItem) {
         previousItem.classList.remove('active');
       }
     }

     // 高亮当前格子
     const currentItem = document.querySelector(`[data-index="${currentIndex}"]`);
     if (currentItem) {
       currentItem.classList.add('active');
     }

     previousIndex = currentIndex;
     currentStep++;

     // 速度逐渐变慢
     if (currentStep > totalSteps - 20) {
       speed += 10;
     } else if (currentStep < 20) {
       speed = Math.max(30, speed - 5);
     }

     // 更新索引
     currentIndex = (currentIndex + 1) % totalItems;

     if (currentStep < totalSteps) {
       setTimeout(animate, speed);
     } else {
       // 动画结束，显示结果
       setTimeout(() => {
         showDrawResult(finalIndex);
       }, 500);
     }
   };

   animate();
 }

 // 获取随机奖项索引
 function getRandomPrizeIndex() {
   const random = Math.random() * 100;
   let cumulative = 0;
   for (let i = 0; i < prizes.length; i++) {
     cumulative += prizes[i].probability;
     if (random <= cumulative) {
       return i;
     }
   }
   return 0;
 }

 // 显示抽奖结果
 function showDrawResult(prizeIndex) {
   const prize = prizes[prizeIndex];

   // 添加中奖积分
   if (prize.points > 0) {
     currentPoints += prize.points;
     updatePointsDisplay();
   }

   // 恢复按钮状态
   updateDrawButtonState(false);
   isDrawing = false;

   // 显示结果弹窗
   showResult(
     prize.name,
     prize.desc + (prize.points > 0 ? `<br>获得${prize.points}积分！` : '')
   );
 }

 // 显示结果弹窗
 function showResult(title, desc) {
   document.getElementById('resultTitle').textContent = title;
   document.getElementById('resultDesc').innerHTML = desc;
   document.getElementById('resultModal').style.display = 'flex';
 }

 // 关闭结果弹窗
 function closeResult() {
   document.getElementById('resultModal').style.display = 'none';
 }

 // 处理模态框点击事件
 function handleModalClick(event) {
   if (event.target === document.getElementById('resultModal')) {
     closeResult();
   }
 }
</script>
</body>
</html>