超丝滑手机页面代码：多组含图倒计时，点击跳转超详尽实现！

好的，下面是一个详细的HTML和JavaScript代码示例，实现你所描述的手机页面。这个页面使用了CSS来确保滑动丝滑，并且使用JavaScript来处理倒计时逻辑。 HTML (index.html) ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手机页面</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container">  <div class="row"> <div class="group" onclick="location.href='https://example.com/1'"> <img src="image1.jpg" alt="Image 1" class="group-image"> <div class="group-title">1</div> <div class="group-timer" id="timer1"></div> </div> <div class="group" onclick="location.href='https://example.com/2'"> <img src="image2.jpg" alt="Image 2" class="group-image"> <div class="group-title">2</div> <div class="group-timer" id="timer2"></div> </div> <div class="group" onclick="location.href='https://example.com/3'"> <img src="image3.jpg" alt="Image 3" class="group-image"> <div class="group-title">3</div> <div class="group-timer" id="timer3"></div> </div> </div>  </div> <script src="scripts.js"></script> </body> </html> ``` CSS (styles.css) ```css /* 基本样式 */ body { margin: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .container { display: flex; flex-direction: column; align-items: center; padding: 16px; overflow-y: scroll; -webkit-overflow-scrolling: touch; /* 确保iOS设备上的滚动更加流畅 */ } .row { display: flex; justify-content: space-between; width: 100%; margin-bottom: 16px; } .group { flex: 1; max-width: 30%; /* 每个小组占总宽度的30% */ background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin: 0 8px; /* 左右边距 */ text-align: center; cursor: pointer; transition: transform 0.2s; } .group:hover { transform: scale(1.05); } .group-image { width: 100%; height: 100px; object-fit: cover; border-top-left-radius: 8px; border-top-right-radius: 8px; } .group-title { font-size: 16px; font-weight: bold; margin: 8px 0; } .group-timer { font-size: 14px; color: #777; } ``` JavaScript (scripts.js) ```javascript // 倒计时函数 function startCountdown(timerId, startTime, endTime) { const timerElement = document.getElementById(timerId); function updateTimer() { const now = new Date().getTime(); const distance = startTime - now; if (distance > 0) { // 未开始 timerElement.textContent = '未开始'; } else if (now >= startTime && now < endTime) { // 正在进行中 const minutes = Math.floor((endTime - now) / 1000 / 60); const seconds = Math.floor((endTime - now) / 1000) % 60; timerElement.textContent = `${minutes}分${seconds}秒`; } else { // 已结束 timerElement.textContent = '已结束'; } } // 初始更新 updateTimer(); // 每秒更新一次 setInterval(updateTimer, 1000); } // 设置每个小组的倒计时 const startTime = new Date().setHours(8, 10, 0, 0); const endTime = new Date().setHours(22, 15, 0, 0); // 每20分钟为一个周期 const interval = 20 * 60 * 1000; // 计算每个小组的开始时间和结束时间 function calculateTimes(index) { const groupStartTime = startTime + (index * interval); const groupEndTime = groupStartTime + interval; return { groupStartTime, groupEndTime }; } // 启动倒计时 startCountdown('timer1', ...calculateTimes(0)); startCountdown('timer2', ...calculateTimes(1)); startCountdown('timer3', ...calculateTimes(2)); ``` 代码解释 1. HTML部分: - `container` 是整个页面的容器，使用 `flex` 布局确保内容垂直居中。 - `row` 是每一行的容器，使用 `flex` 布局确保每行内的三个小组平均分布。 - `group` 是每个小组的容器，包含图片、和倒计时。 - `group-image` 是图片，使用 `border-radius` 确保图片有圆角。 - `group-title` 和 `group-timer` 分别是和倒计时的文本。 2. CSS部分: - `body` 设置了基本的字体和颜色。 - `container` 使用 `flex` 布局确保内容垂直居中，并设置了滚动条。 - `row` 使用 `flex` 布局确保每行内的三个小组平均分布。 - `group` 设置了每个小组的样式，包括色、圆角、阴影等。 - `group-image` 设置了图片的样式，包括宽度、高度和圆角。 - `group-title` 和 `group-timer` 设置了和倒计时的样式。 3. JavaScript部分: - `startCountdown` 函数用于启动倒计时，参数包括倒计时元素的ID、开始时间和结束时间。 - `updateTimer` 函数用于更新倒计时，根据当前时间计算剩余时间并更新文本。 - `calculateTimes` 函数用于计算每个小组的开始时间和结束时间。 - 调用 `startCountdown` 函数启动每个小组的倒计时。你可以根据需要添加更多的行和小组，并调整图片、和链接。希望这个示例对你有帮助！ ######[AI写代码神器 | 1537点数解答 | 2024-11-03 01:47:19]

服务商

更多选项

快捷项

自定义