超详细！丝滑滑动手机页面代码，含多样倒计时组及跳转链接

好的，下面是一个详细的手机页面代码示例，使用HTML、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/link1'"> <img src="image1.jpg" alt="Image 1" class="group-image"> <h3 class="group-title">1</h3> <div class="group-timer" id="timer1"></div> </div> <div class="group" onclick="location.href='https://example.com/link2'"> <img src="image2.jpg" alt="Image 2" class="group-image"> <h3 class="group-title">2</h3> <div class="group-timer" id="timer2"></div> </div> <div class="group" onclick="location.href='https://example.com/link3'"> <img src="image3.jpg" alt="Image 3" class="group-image"> <h3 class="group-title">3</h3> <div class="group-timer" id="timer3"></div> </div> </div>  <div class="row"> <div class="group" onclick="location.href='https://example.com/link4'"> <img src="image4.jpg" alt="Image 4" class="group-image"> <h3 class="group-title">4</h3> <div class="group-timer" id="timer4"></div> </div> <div class="group" onclick="location.href='https://example.com/link5'"> <img src="image5.jpg" alt="Image 5" class="group-image"> <h3 class="group-title">5</h3> <div class="group-timer" id="timer5"></div> </div> <div class="group" onclick="location.href='https://example.com/link6'"> <img src="image6.jpg" alt="Image 6" class="group-image"> <h3 class="group-title">6</h3> <div class="group-timer" id="timer6"></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; display: flex; flex-direction: column; align-items: center; } /* 行样式 */ .row { width: 100%; display: flex; justify-content: space-between; margin-bottom: 16px; } /* 小组样式 */ .group { width: 30%; text-align: center; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; padding: 16px; cursor: pointer; transition: transform 0.2s; } .group:hover { transform: scale(1.05); } /* 图片样式 */ .group-image { width: 100%; height: auto; border-radius: 8px; margin-bottom: 8px; } /* 样式 */ .group-title { font-size: 18px; margin-bottom: 8px; } /* 倒计时样式 */ .group-timer { font-size: 16px; color: #333; } ``` JavaScript (scripts.js) ```javascript // 倒计时函数 function countdown(elementId, startTime, endTime, interval) { const timerElement = document.getElementById(elementId); function updateTimer() { const now = new Date().getTime(); const start = new Date(startTime).getTime(); const end = new Date(endTime).getTime(); if (now < start) { timerElement.textContent = "未开始"; } else if (now > end) { timerElement.textContent = "已结束"; } else { const timeLeft = end - now; const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); timerElement.textContent = `${minutes} 分 ${seconds} 秒`; } } // 初始更新 updateTimer(); // 每隔指定时间间隔更新一次 setInterval(updateTimer, interval * 1000); } // 设置各个倒计时 countdown('timer1', '2023-10-01T08:10:00', '2023-10-01T22:15:00', 20); countdown('timer2', '2023-10-01T07:20:00', '2023-10-01T23:30:00', 1); countdown('timer3', '2023-10-01T08:10:00', '2023-10-01T22:15:00', 5); countdown('timer4', '2023-10-01T07:20:00', '2023-10-01T23:30:00', 20); countdown('timer5', '2023-10-01T08:10:00', '2023-10-01T22:15:00', 1); countdown('timer6', '2023-10-01T07:20:00', '2023-10-01T23:30:00', 5); ``` 代码说明 1. HTML部分: - `container` 是整个页面的容器，使用 `flex` 布局来垂直居中内容。 - `row` 是每一行的容器，使用 `flex` 布局来水平分布三个小组。 - `group` 是每个小组的容器，包含图片、和倒计时。 - `group-image` 是图片，设置了圆角。 - `group-title` 是。 - `group-timer` 是倒计时显示区域。 2. CSS部分: - 重置了默认样式，确保一致的布局。 - `container` 设置了内边距和居中对齐。 - `row` 设置了水平分布和底部间距。 - `group` 设置了宽度、居中对齐、边框、圆角和鼠标悬停效果。 - `group-image` 设置了图片的宽度和圆角。 - `group-title` 设置了的字体大小和底部间距。 - `group-timer` 设置了倒计时的字体大小和颜色。 3. JavaScript部分: - `countdown` 函数用于计算和更新倒计时。 - `updateTimer` 函数检查当前时间是否在开始时间和结束时间之间，并更新倒计时显示。 - 使用 `setInterval` 每隔指定的时间间隔调用 `updateTimer` 函数。 - 为每个倒计时设置不同的开始时间、结束时间和更新间隔。你可以根据需要添加更多的行和小组，只需复制相应的 HTML 结构并调整 `countdown` 函数中的参数即可。 ######[AI写代码神器 | 1863点数解答 | 2024-11-03 01:55:13]

服务商

更多选项

快捷项

自定义