当先锋百科网

首页 1 2 3 4 5 6 7

HTML电风扇代码示例:

<!DOCTYPE html>
<html>
<head>
<title>电风扇</title>
</head>
<body>
<h1>电风扇控制台</h1>
<button onclick="fanOn()">开启电风扇</button>
<button onclick="fanOff()">关闭电风扇</button>
<button onclick="fanSpeed()">加速电风扇</button>
<button onclick="fanAngle()">改变电风扇角度</button>
<script>
//定义电风扇控制函数
function fanOn() {
document.getElementById("fan").src = "fan-on.gif"
}
function fanOff() {
document.getElementById("fan").src = "fan-off.gif"
}
function fanSpeed() {
document.getElementById("fan").style.animationDuration = "0.5s"
}
function fanAngle() {
document.getElementById("fan").style.transform = "rotate(45deg)"
}
</script>
<img id="fan" src="fan-off.gif" alt="电风扇">
</body>
</html>

以上代码通过JavaScript实现了电风扇的开、关、调速和旋转功能。其中<button>标签绑定了相应的事件,当点击按钮时触发JavaScript函数。通过<script>标签嵌入JavaScript代码,使用document.getElementById()方法获取<img>标签,根据控制需要修改相应的属性,从而实现电风扇的控制。