超丝滑手机页面搭建：含圆角图片、倒计时及跳转链接的详细代码指南

好的，下面是一个详细的HTML和CSS代码示例，以及一些JavaScript来实现你所描述的功能。这个示例使用了Flexbox来布局每一行的内容，并且使用了JavaScript来处理倒计时逻辑。 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 /* 基本重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 容器样式 */ .container { width: 100%; padding: 16px; overflow-y: scroll; } /* 行样式 */ .row { display: flex; justify-content: space-between; margin-bottom: 16px; } /* 小组样式 */ .group { flex: 1; margin: 0 8px; text-align: center; background-color: #f9f9f9; border-radius: 8px; overflow: hidden; cursor: pointer; } /* 图片样式 */ .group-image { width: 100%; height: auto; 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: #555; } ``` JavaScript (scripts.js) ```javascript // 获取当前时间 function getCurrentTime() { return new Date(); } // 计算倒计时 function calculateCountdown(startHour, startMinute, endHour, endMinute) { const now = getCurrentTime(); const currentHour = now.getHours(); const currentMinute = now.getMinutes(); if (currentHour < startHour || (currentHour === startHour && currentMinute < startMinute) || currentHour > endHour || (currentHour === endHour && currentMinute >= endMinute)) { return "未开始"; } const nextStart = new Date(now); nextStart.setHours(startHour, startMinute, 0, 0); while (nextStart <= now) { nextStart.setMinutes(nextStart.getMinutes() + 20); } const countdown = Math.max(0, (nextStart - now) / 1000); const minutes = Math.floor(countdown / 60); const seconds = Math.floor(countdown % 60); return `${minutes}分${seconds}秒`; } // 更新倒计时 function updateTimers() { const timers = document.querySelectorAll('.group-timer'); timers.forEach((timer, index) => { const startHour = 8; const startMinute = 0; const endHour = 22; const endMinute = 0; timer.textContent = calculateCountdown(startHour, startMinute, endHour, endMinute); }); } // 每秒更新一次倒计时 setInterval(updateTimers, 1000); // 初始化倒计时 updateTimers(); ``` 说明 1. HTML部分: - `container` 是整个页面的容器，设置了左右边距和滚动。 - `row` 是每一行的容器，使用Flexbox布局，确保每个小组平均分布。 - `group` 是每个小组的容器，设置了点击事件跳转到指定链接。 - `group-image` 是图片，设置了圆角。 - `group-title` 是。 - `group-timer` 是倒计时。 2. CSS部分: - 重置了所有元素的默认样式。 - 设置了容器、行、小组、图片、和倒计时的样式。 3. JavaScript部分: - `getCurrentTime` 获取当前时间。 - `calculateCountdown` 计算倒计时，根据当前时间判断是否在倒计时范围内。 - `updateTimers` 更新所有倒计时文本。 - 使用 `setInterval` 每秒更新一次倒计时。你可以将这些代码复制到你的项目中，根据需要填充图片和链接。希望这对你有帮助！ ######[AI写代码神器 | 1267点数解答 | 2024-11-03 01:36:25]

服务商

更多选项

快捷项

自定义