超丝滑手机页面：多周期倒计时小组布局代码全解析

以下是一个使用 HTML、CSS 和 JavaScript 实现的简单手机页面示例，满足您的需求。但这只是一个基础示例，您可能需要根据实际情况进行进一步的优化和调整。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时页面</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } /* 每行的样式 */ .row { display: flex; justify-content: center; padding: 20px; border-bottom: 1px solid #ddd; } /* 每个小组的样式 */ .group { width: 30%; text-align: center; background-color: #f5f5f5; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 10px; margin: 0 10px; } /* 图片的样式 */ .group img { width: 100%; border-radius: 10px 10px 0 0; } /* 的样式 */ .group h3 { margin: 10px 0; } /* 倒计时的样式 */ .group.time-count { font-size: 18px; font-weight: bold; } </style> </head> <body> <div id="container">  <div class="row">  <div class="group"> <img src="image1.jpg" alt="Image 1"> <h3> 1</h3> <div class="time-count" id="countdown1"></div> <a href="link1.html">详情</a> </div>  <div class="group"> <img src="image2.jpg" alt="Image 2"> <h3> 2</h3> <div class="time-count" id="countdown2"></div> <a href="link2.html">详情</a> </div>  <div class="group"> <img src="image3.jpg" alt="Image 3"> <h3> 3</h3> <div class="time-count" id="countdown3"></div> <a href="link3.html">详情</a> </div> </div>  <div class="row">  <div class="group"> <img src="image4.jpg" alt="Image 4"> <h3> 4</h3> <div class="time-count" id="countdown4"></div> <a href="link4.html">详情</a> </div>  <div class="group"> <img src="image5.jpg" alt="Image 5"> <h3> 5</h3> <div class="time-count" id="countdown5"></div> <a href="link5.html">详情</a> </div>  <div class="group"> <img src="image6.jpg" alt="Image 6"> <h3> 6</h3> <div class="time-count" id="countdown6"></div> <a href="link6.html">详情</a> </div> </div> </div> <script> // 获取当前时间 function getCurrentTime() { var now = new Date(); return { hours: now.getHours(), minutes: now.getMinutes() }; } // 计算倒计时 function calculateCountdown(startHour, startMinute, endHour, endMinute, period, elementId) { var currentTime = getCurrentTime(); var start = new Date(); start.setHours(startHour); start.setMinutes(startMinute); var end = new Date(); end.setHours(endHour); end.setMinutes(endMinute); if (currentTime.hours < start.hours || (currentTime.hours === start.hours && currentTime.minutes < start.minutes)) { document.getElementById(elementId).innerHTML = '未开始'; return; } var totalMinutes = (end - start) / (1000 * 60); var remainingMinutes = Math.floor(totalMinutes % period); var remainingSeconds = Math.floor((remainingMinutes * 60) % 60); document.getElementById(elementId).innerHTML = `${remainingMinutes}:${remainingSeconds < 10? '0' + remainingSeconds : remainingSeconds}`; } // 每秒更新倒计时 setInterval(function() { calculateCountdown(8, 10, 22, 15, 20, 'countdown1'); calculateCountdown(7, 20, 23, 30, 1, 'countdown2'); calculateCountdown(8, 0, 20, 0, 5, 'countdown3'); calculateCountdown(9, 0, 18, 0, 10, 'countdown4'); calculateCountdown(10, 0, 21, 0, 15, 'countdown5'); calculateCountdown(11, 0, 23, 0, 30, 'countdown6'); }, 1000); </script> </body> </html> ``` 以下是对代码的详细解释： HTML 部分： - `<head>` 部分： - `<meta charset="UTF-8">`：设置字符编码为 UTF-8，以支持多种字符。 - `<meta http-equiv="X-UA-Compatible" content="IE=edge">`：确保在 Internet Explorer 中以最新的标准模式渲染页面。 - `<meta name="viewport" content="width=device-width, initial-scale=1.0">`：使页面在移动设备上具有良好的响应式布局。 - `<title>`：设置页面的。 - `<style>` 标签中的 CSS 用于定义页面的样式。 - `<body>` 部分： - `<div id="container">`：这是一个容器，用于包含所有的行和小组。 - 每个 `.row` 表示一行，其中包含三个 `.group` 小组。 - 每个小组包含一张图片、一个、一个倒计时显示区域和一个链接。 - `img` 标签用于显示图片。 - `h3` 标签用于显示。 - `div` 标签（具有 `time-count` 类）用于显示倒计时。 - `a` 标签用于创建链接。 CSS 部分： - `body`：清除页面的默认边距和内边距，并设置默认字体。 - `.row`：使用 `flex` 布局使行内的小组居中，并添加底部边框。 - `.group`：设置每个小组的宽度、、阴影、内边距、外边距和文本居中。 - `.group img`：使图片宽度自适应，并设置圆角。 - `.group h3`：设置的上下边距。 - `.group.time-count`：设置倒计时的字体大小和粗细。 JavaScript 部分： - `getCurrentTime` 函数：获取当前的小时和分钟。 - `calculateCountdown` 函数： - 接收开始时间、结束时间、计时周期和要显示倒计时的元素 ID 作为参数。 - 通过比较当前时间与开始时间和结束时间，来确定是显示"未开始"还是计算倒计时。 - 计算剩余的分钟和秒，并将其格式化为 `分钟:秒` 的形式显示在指定的元素中。 - `setInterval` 函数：每秒调用一次计算倒计时的函数，以实现倒计时的实时更新。 ######[AI写代码神器 | 1994点数解答 | 2024-11-03 02:47:12]

服务商

更多选项

快捷项

自定义