ChatAI 智能内容创作平台
登录
绘图
发送
AI思考中...
写一个火箭发射的HTML程序
2024-07-06 18:54:25
来自 重庆市重庆市 用户
" <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>火箭发射</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
#launch {
display: none;
font-size: 24px;
font-weight: bold;
color: #fff;
background-color: #333;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>火箭发射</h1>
<button id="launchBtn">发射火箭</button>
<div id="launch"></div>
<script>
const launchBtn = document.getElementById('launchBtn');
const launchContainer = document.getElementById('launch');
launchBtn.addEventListener('click', () => {
launchContainer.innerHTML = `
<p>火箭发射倒计时：</p>
<span id="countdown">00:00:00</span>
<p>请等待发射...</p>
`;
let countdown = 10;
const interval = setInterval(() => {
countdown--;
document.getElementById('countdown').innerText = formatTime(countdown);
if (countdown === 0) {
clearInterval(interval);
launchContainer.innerHTML = `
<p>火箭发射成功！</p>
<img src="rocket-launch.jpg" alt="火箭发射" style="width: 100%; max-width: 300px;">
`;
}
}, 1000);
});
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = time % 60;
return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}
</script>
</body>
</html>"
ChatAI 智能内容创作平台
内容数
浏览数
用户数
ChatAI 智能内容创作平台
扫码关注
