javascript 呼吸灯
时间: 2023-09-02 08:14:02 浏览: 168
以下是一个简单的JavaScript呼吸灯效果:
HTML代码:
```
<div id="breathing-light"></div>
```
CSS代码:
```
#breathing-light {
width: 50px;
height: 50px;
background-color: #fff;
}
```
JavaScript代码:
```
var breathingLight = document.getElementById('breathing-light');
var opacity = 1;
var direction = -0.05;
function breathe() {
opacity += direction;
if (opacity < 0.1) {
direction = 0.05;
} else if (opacity > 0.9) {
direction = -0.05;
}
breathingLight.style.opacity = opacity;
setTimeout(breathe, 50);
}
breathe();
```
代码解释:
- 首先获取呼吸灯的DOM对象。
- 定义一个变量`opacity`,表示当前的透明度,初始值为1。
- 定义一个变量`direction`,表示透明度变化的方向,初始值为-0.05,即逐渐变暗。
- 定义一个函数`breathe()`,每50毫秒调用一次。
- 在函数中,根据当前透明度和变化方向,计算下一次的透明度。
- 如果透明度小于0.1,则将变化方向改为逐渐变亮。
- 如果透明度大于0.9,则将变化方向改为逐渐变暗。
- 将计算出的透明度赋值给DOM对象的`opacity`属性,实现呼吸灯效果。
- 最后通过`setTimeout()`函数,每50毫秒调用一次`breathe()`函数,形成一个循环。