超详细！手把手教你打造丝滑滑动、含多样倒计时的手机页面

好的，下面是一个详细的手机页面代码示例，使用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="window.location.href='https://example.com/link1'"> <img src="image1.jpg" alt="图片1" class="image"> <h3 class="title">1</h3> <div class="countdown" id="countdown1"></div> </div> <div class="group" onclick="window.location.href='https://example.com/link2'"> <img src="image2.jpg" alt="图片2" class="image"> <h3 class="title">2</h3> <div class="countdown" id="countdown2"></div> </div> <div class="group" onclick="window.location.href='https://example.com/link3'"> <img src="image3.jpg" alt="图片3" class="image"> <h3 class="title">3</h3> <div class="countdown" id="countdown3"></div> </div> </div>  <div class="row"> <div class="group" onclick="window.location.href='https://example.com/link4'"> <img src="image4.jpg" alt="图片4" class="image"> <h3 class="title">4</h3> <div class="countdown" id="countdown4"></div> </div> <div class="group" onclick="window.location.href='https://example.com/link5'"> <img src="image5.jpg" alt="图片5" class="image"> <h3 class="title">5</h3> <div class="countdown" id="countdown5"></div> </div> <div class="group" onclick="window.location.href='https://example.com/link6'"> <img src="image6.jpg" alt="图片6" class="image"> <h3 class="title">6</h3> <div class="countdown" id="countdown6"></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; cursor: pointer; transition: transform 0.2s; } .group:hover { transform: scale(1.05); } /* 图片样式 */ .image { width: 100%; height: auto; border-radius: 8px; margin-bottom: 8px; } /* 样式 */ .title { font-size: 16px; margin-bottom: 8px; } /* 倒计时样式 */ .countdown { font-size: 14px; color: #333; } ``` JavaScript (scripts.js) ```javascript // 倒计时函数 function countdown(elementId, startTime, endTime, cycle) { const countdownElement = document.getElementById(elementId); function updateCountdown() { const now = new Date().getTime(); const start = new Date(startTime).getTime(); const end = new Date(endTime).getTime(); if (now < start || now > end) { countdownElement.textContent = '未开始'; } else { const timeLeft = Math.max(0, end - now); const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); countdownElement.textContent = `${minutes}分${seconds}秒`; } } // 初始更新 updateCountdown(); // 每秒更新一次 setInterval(updateCountdown, cycle * 1000); } // 设置每个小组的倒计时 countdown('countdown1', '2023-10-01T08:10:00', '2023-10-01T22:15:00', 20); countdown('countdown2', '2023-10-01T07:20:00', '2023-10-01T23:30:00', 1); countdown('countdown3', '2023-10-01T08:10:00', '2023-10-01T22:15:00', 5); countdown('countdown4', '2023-10-01T07:20:00', '2023-10-01T23:30:00', 20); countdown('countdown5', '2023-10-01T08:10:00', '2023-10-01T22:15:00', 1); countdown('countdown6', '2023-10-01T07:20:00', '2023-10-01T23:30:00', 5); ``` 代码说明 HTML - `<!DOCTYPE html>`: 声明文档类型。 - `<meta charset="UTF-8">`: 设置字符编码为UTF-8。 - `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: 设置视口，使页面适应移动设备。 - `<link rel="stylesheet" href="styles.css">`: 引入外部CSS文件。 - `<div class="container">`: 容器，用于包裹所有内容。 - `<div class="row">`: 每一行，包含三个小组。 - `<div class="group">`: 每个小组，包含图片、和倒计时。 - `<img src="image1.jpg" alt="图片1" class="image">`: 图片，设置圆角。 - `<h3 class="title">1</h3>`: 。 - `<div class="countdown" id="countdown1"></div>`: 倒计时显示区域。 - `onclick="window.location.href='https://example.com/link1'"`: 点击链接跳转。 CSS - `* { ... }`: 重置浏览器默认样式。 - `.container { ... }`: 容器样式，设置宽度、内边距、显示方式和对齐方式。 - `.row { ... }`: 行样式，设置宽度、显示方式和间距。 - `.group { ... }`: 小组样式，设置宽度、文本对齐方式、鼠标指针和过渡效果。 - `.group:hover { ... }`: 小组悬停样式，增加缩放效果。 - `.image { ... }`: 图片样式，设置宽度、高度、圆角和间距。 - `.title { ... }`: 样式，设置字体大小和间距。 - `.countdown { ... }`: 倒计时样式，设置字体大小和颜色。 JavaScript - `countdown(elementId, startTime, endTime, cycle) { ... }`: 倒计时函数，参数分别为倒计时显示元素ID、开始时间、结束时间和更新周期。 - `const countdownElement = document.getElementById(elementId);`: 获取倒计时显示元素。 - `function updateCountdown() { ... }`: 更新倒计时的函数。 - `const now = new Date().getTime();`: 获取当前时间。 - `const start = new Date(startTime).getTime();`: 获取开始时间。 - `const end = new Date(endTime).getTime();`: 获取结束时间。 - `if (now < start || now > end) { ... }`: 如果当前时间不在开始和结束时间之间，显示“未开始”。 - `else { ... }`: 否则，计算剩余时间并格式化显示。 - `updateCountdown();`: 初始更新倒计时。 - `setInterval(updateCountdown, cycle * 1000);`: 每隔`cycle`秒更新一次倒计时。 - `countdown('countdown1', '2023-10-01T08:10:00', '2023-10-01T22:15:00', 20);`: 设置每个小组的倒计时。希望这些代码和注释对你有帮助！你可以根据需要调整内容和样式。 ######[AI写代码神器 | 2196点数解答 | 2024-11-03 01:59:20]

服务商

更多选项

快捷项

自定义