超详细！实现丝滑滑动手机页面，含图片圆角、20分钟倒计时及跳转链接代码

好的，下面是一个详细的HTML和CSS代码示例，用于实现你描述的手机页面。这个页面使用了HTML、CSS和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-content"> <h3>1</h3> <div id="countdown1" class="countdown">00:00</div> </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-content"> <h3>2</h3> <div id="countdown2" class="countdown">00:00</div> </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-content"> <h3>3</h3> <div id="countdown3" class="countdown">00:00</div> </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; padding: 16px; } .row { display: flex; justify-content: space-between; margin-bottom: 16px; } .group { flex: 1; max-width: 30%; background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin: 0 8px; cursor: pointer; } .group-image { width: 100%; height: auto; border-top-left-radius: 8px; border-top-right-radius: 8px; } .group-content { padding: 16px; } .group-content h3 { margin: 0; font-size: 18px; color: #333; } .countdown { font-size: 16px; color: #777; margin-top: 8px; } ``` JavaScript (scripts.js) ```javascript function updateCountdown(id, startTime, endTime) { const countdownElement = document.getElementById(id); const now = new Date().getHours() * 60 + new Date().getMinutes(); const start = startTime * 60; const end = endTime * 60; if (now < start || now >= end) { countdownElement.textContent = '未开始'; } else { const remainingTime = (end - now) * 60 - new Date().getSeconds(); if (remainingTime <= 0) { countdownElement.textContent = '00:00'; } else { const minutes = Math.floor(remainingTime / 60).toString().padStart(2, '0'); const seconds = (remainingTime % 60).toString().padStart(2, '0'); countdownElement.textContent = `${minutes}:${seconds}`; } } } function startCountdowns() { setInterval(() => { updateCountdown('countdown1', 8, 22); updateCountdown('countdown2', 8, 22); updateCountdown('countdown3', 8, 22); }, 1000); } document.addEventListener('DOMContentLoaded', startCountdowns); ``` 说明 1. HTML：定义了页面结构，每个`<div class="group">`代表一个小组，包含图片、和倒计时。 2. CSS：设置了页面的样式，包括布局、边距、圆角等。 3. JavaScript：实现了倒计时功能，每秒更新一次倒计时，并根据当前时间显示“未开始”或倒计时时间。你可以根据需要复制并修改这些代码，填入你的具体内容。希望这对你有帮助！ ######[AI写代码神器 | 1110点数解答 | 2024-11-03 01:23:22]

服务商

更多选项

快捷项

自定义