用html和js写一个升旗过程,请写出完整的代码
时间: 2023-08-31 19:23:52 浏览: 57
### 回答1:
以下是一个简单的HTML和JavaScript代码实现升旗过程的动画效果:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>升旗过程</title>
</head>
<body>
<canvas id="flag" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('flag');
var ctx = canvas.getContext('2d');
// 绘制国旗背景
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制五角星
ctx.fillStyle = '#FFFF00';
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(220, 100);
ctx.lineTo(270, 100);
ctx.lineTo(230, 135);
ctx.lineTo(250, 190);
ctx.lineTo(200, 155);
ctx.lineTo(150, 190);
ctx.lineTo(170, 135);
ctx.lineTo(130, 100);
ctx.lineTo(180, 100);
ctx.closePath();
ctx.fill();
// 设置初始状态
var flagHeight = 0;
var flagWidth = 0;
var flagpoleHeight = 200;
var flagpoleWidth = 10;
var flagSpeed = 5;
// 绘制升旗过程
function raiseFlag() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制国旗背景
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制旗杆
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(canvas.width / 2 - flagpoleWidth / 2, canvas.height - flagpoleHeight, flagpoleWidth, flagpoleHeight);
// 绘制旗帜
ctx.fillStyle = '#FFFF00';
ctx.fillRect(canvas.width / 2 - flagWidth / 2, canvas.height - flagHeight - flagpoleHeight, flagWidth, flagHeight);
// 更新旗帜高度
flagHeight += flagSpeed;
flagWidth = flagHeight * 1.5;
// 判断是否到达顶部
if (flagHeight > canvas.height - flagpoleHeight) {
clearInterval(timerId);
}
}
// 开始升旗
var timerId = setInterval(raiseFlag, 30);
</script>
</body>
</html>
```
在以上代码中,我们使用了`canvas`元素来绘制图像。首先,在`<canvas>`标签中定义了一个`id`为`flag`的元素,并指定了画布的宽度和高度。然后,在`<script>`标签中,我们获取了这个`canvas`元素的上下文`ctx`,并使用`fillRect()`方法绘制了国旗背景和五角星。
接着,我们定义了一些变量来设置旗杆和旗帜的初始状态。`flagHeight`和`flagWidth`分别表示旗帜的高度和宽度,初始值为0;`flagpoleHeight`和`flagpoleWidth`分别表示旗杆的高度和宽度;`flagSpeed`表示旗帜升起的速度。在`raiseFlag()`函数中,我们使用`clearRect()`方法清空画布,并重新绘制旗杆和旗帜。然后,我们更新旗帜的高度和宽度,并判断是否到达顶部,如果到达顶部,则使用`clearInterval()`方法停止升旗动画。
最后,我们使用`setInterval()`方法调用`raiseFlag()`函数,并指定了一个时间间隔,来实现升旗过程的动画效果。
### 回答2:
以下是一个用HTML和JavaScript编写的升旗过程的完整代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>升旗过程</title>
<style>
#flagpole {
width: 10px;
height: 200px;
background-color: gray;
}
#flag {
width: 100px;
height: 60px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button id="raiseBtn" onclick="raiseFlag()">升旗</button>
<button id="lowerBtn" onclick="lowerFlag()" disabled>降旗</button>
<div id="flagpole"></div>
<div id="flag"></div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript代码(script.js文件):
```javascript
function raiseFlag() {
var flag = document.getElementById("flag");
var raiseBtn = document.getElementById("raiseBtn");
var lowerBtn = document.getElementById("lowerBtn");
flag.style.display = "block";
raiseBtn.disabled = true;
lowerBtn.disabled = false;
var height = 0;
var interval = setInterval(function() {
if (height < 140) {
height += 20;
flag.style.height = height + "px";
} else {
clearInterval(interval);
}
}, 500);
}
function lowerFlag() {
var flag = document.getElementById("flag");
var raiseBtn = document.getElementById("raiseBtn");
var lowerBtn = document.getElementById("lowerBtn");
var height = 140;
var interval = setInterval(function() {
if (height > 0) {
height -= 20;
flag.style.height = height + "px";
} else {
clearInterval(interval);
flag.style.display = "none";
raiseBtn.disabled = false;
lowerBtn.disabled = true;
}
}, 500);
}
```
这段代码创建了一个简单的升旗过程。点击“升旗”按钮会出现一根灰色的旗杆以及一个红色的旗帜,然后逐渐升起至高度为140像素。升旗过程中,“升旗”按钮被禁用,而“降旗”按钮呈激活状态。点击“降旗”按钮,旗帜逐渐降落,并最终隐藏。“降旗”按钮被禁用,而“升旗”按钮重新激活。