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

好的，下面是一个详细的手机页面代码示例，使用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"> <div class="group-title">1</div> <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"> <div class="group-title">2</div> <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"> <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; display: flex; flex-direction: column; align-items: center; } /* 行样式 */ .row { width: 100%; display: flex; justify-content: space-between; margin-bottom: 16px; } /* 小组样式 */ .group { width: 30%; background-color: #f9f9f9; border-radius: 8px; overflow: hidden; text-align: center; cursor: pointer; transition: transform 0.2s; } .group:hover { transform: scale(1.05); } /* 图片样式 */ .group-image { width: 100%; height: 150px; object-fit: cover; border-top-left-radius: 8px; border-top-right-radius: 8px; } /* 样式 */ .group-title { font-size: 18px; font-weight: bold; margin: 12px 0; } /* 倒计时样式 */ .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 remainingTime = end - now; const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); timerElement.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; } } // 初始更新 updateTimer(); // 每隔interval毫秒更新一次 setInterval(updateTimer, interval * 1000); } // 设置每个小组的倒计时 countdown('timer1', '2023-10-01T08:10:00', '2023-10-01T22:15:00', 20); // 20分钟为一个周期 countdown('timer2', '2023-10-01T07:20:00', '2023-10-01T23:30:00', 1); // 1分钟为一个周期 countdown('timer3', '2023-10-01T08:10:00', '2023-10-01T22:15:00', 5); // 5分钟为一个周期 ``` 代码解释 HTML - `container`：整个页面的容器，使用Flexbox布局使其内容居中。 - `row`：每一行包含三个小组，使用Flexbox布局使其内容均匀分布。 - `group`：每个小组，包含图片、和倒计时，点击会跳转到指定链接。 - `group-image`：图片，设置圆角。 - `group-title`：。 - `group-timer`：倒计时显示区域。 CSS - 基本重置：去除默认的margin和padding，设置box-sizing为border-box。 - `container`：设置宽度为100%，内边距为16px，使用Flexbox布局使其内容居中。 - `row`：设置宽度为100%，使用Flexbox布局使其内容均匀分布，底部间距为16px。 - `group`：设置宽度为30%，色为浅灰色，圆角为8px，溢出隐藏，文本居中，鼠标悬停时放大。 - `group-image`：设置宽度为100%，高度为150px，图片填充方式为cover，顶部圆角为8px。 - `group-title`：设置字体大小为18px，加粗，上下间距为12px。 - `group-timer`：设置字体大小为16px，颜色为深灰色。 JavaScript - `countdown`函数：接收元素ID、开始时间、结束时间和更新间隔，计算剩余时间并更新倒计时显示。 - `updateTimer`函数：计算当前时间与开始、结束时间的关系，更新倒计时显示。 - `setInterval`：每隔指定的时间间隔调用`updateTimer`函数，更新倒计时。你可以根据需要添加更多的行和小组，并调整每个小组的倒计时参数。希望这个示例对你有帮助！ ######[AI写代码神器 | 1566点数解答 | 2024-11-03 02:54:36]

服务商

更多选项

快捷项

自定义