<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Under Construction</title>
<style>
body {
图片来源于网络，如有侵权联系删除
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
.construction-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
p {
color: #666;
margin-bottom: 10px;
}
.social-links {
margin-top: 20px;
}
.social-links a {
color: #333;
text-decoration: none;
margin-right: 10px;
font-size: 24px;
}
.social-links a:hover {
color: #0056b3;
图片来源于网络，如有侵权联系删除
}
.countdown {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
.progress-bar {
margin-top: 10px;
width: 80%;
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
overflow: hidden;
}
.progress {
height: 100%;
background-color: #0056b3;
width: 0%;
border-radius: 10px;
}
</style>
<div class="construction-container">
<h1>Welcome to Our Website!</h1>
<p>Our website is currently under construction and will be back online soon.</p>
<p>We apologize for any inconvenience this may cause.</p>
<div class="social-links">
<a href="https://twitter.com" target="_blank" aria-label="Twitter">Twitter</a>
<a href="https://facebook.com" target="_blank" aria-label="Facebook">Facebook</a>
<a href="https://instagram.com" target="_blank" aria-label="Instagram">Instagram</a>
</div>
<div class="countdown">
<p>Estimated Time of Completion:</p>
<p id="countdown">00:00:00:00</p>
</div>
<div class="progress-bar">
<div class="progress" id="progress"></div>
图片来源于网络，如有侵权联系删除
</div>
<p>Thank you for your patience and support.</p>
<p>Stay tuned for updates and exciting new features.</p>
<script>
// Countdown Timer
const countdownElement = document.getElementById('countdown');
const now = new Date();
const completionDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7, 0, 0, 0);
const countdownInterval = setInterval(() => {
const now = new Date();
const difference = completionDate - now;
if (difference <= 0) {
clearInterval(countdownInterval);
countdownElement.textContent = 'Website Live!';
} else {
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((difference / 1000 / 60) % 60);
const seconds = Math.floor((difference / 1000) % 60);
countdownElement.textContent =${days}d ${hours}h ${minutes}m ${seconds}s;
}
}, 1000);
// Progress Bar
const progressElement = document.getElementById('progress');
let progress = 0;
const updateProgress = setInterval(() => {
progress += 1;
progressElement.style.width =${progress}%;
if (progress >= 100) {
clearInterval(updateProgress);
}
}, 100);
</script>
</div>
This HTML code provides a complete webpage design for a website that is currently under construction. It includes a title, a description of the ongoing construction, social media links, a countdown timer, and a progress bar to visually indicate the progress of the construction. The code is styled to be visually appealing and informative, with interactive elements such as the countdown timer and progress bar.
标签： #网站正在建设中 html源码
评论列表