用javascript编写北斗三号发射动画要求如下1.从动画倒计时5s开始,倒计时结束时,在页面下面的北斗三号图片开始上升发射2.北斗三号图片发射完毕,显示“祝贺北斗三号发射成功!”的文字
时间: 2024-02-23 19:02:45 浏览: 23
好的,以下是使用 JavaScript 编写北斗三号发射动画的代码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>北斗三号发射动画</title>
<style>
body {
background-color: #000;
color: #fff;
font-size: 24px;
text-align: center;
padding-top: 100px;
}
img {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -300px;
transition: all 5s linear;
}
</style>
</head>
<body>
<img id="beidou" src="beidou.png">
<script src="main.js"></script>
</body>
</html>
```
CSS 样式中,设置了页面的背景色为黑色,文字颜色为白色,字体大小为 24px,文字居中,图片的初始位置在页面底部,图片的位置属性使用了 CSS3 的 `transform` 和 `transition` 属性,让图片在 5 秒内从底部上升到页面顶部。
JavaScript 代码:
```javascript
window.onload = function() {
var img = document.getElementById("beidou");
var timer = setInterval(countdown, 1000);
var count = 5;
function countdown() {
if (count > 0) {
console.log(count);
count--;
} else {
clearInterval(timer);
img.style.bottom = "0";
setTimeout(function() {
alert("祝贺北斗三号发射成功!");
}, 5000);
}
}
};
```
JavaScript 代码中,首先获取页面中的图片元素和倒计时器元素。然后使用 `setInterval()` 方法每隔 1 秒执行一次 `countdown()` 函数,实现倒计时效果。`count` 变量表示倒计时的秒数。在 `countdown()` 函数中,如果倒计时还未结束,则将 `count` 的值减 1,并输出倒计时剩余时间。否则,清除倒计时器,将图片的下边距设置为 0,实现图片上升效果,并使用 `setTimeout()` 方法在 5 秒后弹出提示框,表示北斗三号发射成功。