首页静态京东秒杀页面代码和css

静态京东秒杀页面代码和css

时间: 2024-01-07 19:10:43 浏览: 105

以下是一个简单的 HTML5 京东秒杀页面代码，包含静态 CSS 样式： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>京东秒杀页面</title> <style> body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; } h1 { margin-top: 20px; margin-bottom: 20px; text-align: center; font-size: 36px; color: #ff6600; } #countdown { margin: 0 auto; width: 600px; height: 100px; background-color: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; font-size: 48px; color: #ff6600; } </style> </head> <body> <h1>京东秒杀专场倒计时</h1> <div id="countdown"></div> <script> // 获取当前时间 var now = new Date().getTime(); // 设置秒杀开始时间 var start = new Date("2021-08-01T00:00:00").getTime(); // 设置秒杀结束时间 var end = new Date("2021-08-01T00:10:00").getTime(); // 计算剩余时间 var remaining = end - now; // 计算倒计时小时、分钟和秒数 var hours = Math.floor((remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((remaining % (1000 * 60)) / 1000); // 显示倒计时 document.getElementById("countdown").innerHTML = "距离秒杀结束还有：" + hours + "小时 " + minutes + "分钟 " + seconds + "秒"; </script> </body> </html> ``` 这段代码中，我们添加了一些 CSS 样式，使页面看起来更加美观和专业。具体来说，我们设置了背景颜色、字体、标题样式、倒计时容器样式等等。当然，这只是一个简单的示例，实际应用中可能需要更复杂的 CSS 样式和设计。

阅读全文