首页帮我一个显示当前日期的代码要拟态风格的

帮我一个显示当前日期的代码要拟态风格的

时间: 2024-04-30 22:19:37 浏览: 137

以下是一个简单的HTML/CSS/JavaScript代码，可以在网页上显示当前日期并使用拟态风格： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Current Date</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #e8e8e8; } .card { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 300px; height: 200px; padding: 20px; border-radius: 10px; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); } h1 { font-size: 36px; margin-bottom: 10px; } p { font-size: 24px; color: #666; } </style> </head> <body> <div class="card"> <h1 id="date"></h1> <p>Current Date</p> </div> <script> const date = new Date(); const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const formattedDate = date.toLocaleDateString('en-US', options); document.getElementById('date').innerHTML = formattedDate; </script> </body> </html> ``` 这段代码会在网页上显示一个带有阴影和圆角的白色卡片，上面显示当前日期和标题“Current Date”。可以根据需要调整样式和布局。

阅读全文