使用 JavaScript 添加圣诞树的交互效果。例如,可以使用 JavaScript 监听鼠标的点击事件,使圣诞树的圣诞球闪烁。
时间: 2023-05-20 22:01:33 浏览: 57
可以使用以下代码实现:
HTML 代码:
```html
<div id="tree">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
```
CSS 代码:
```css
#tree {
width: 100px;
height: 150px;
background-color: green;
position: relative;
}
.ball {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
}
.ball:nth-child(1) {
top: 20px;
left: 40px;
}
.ball:nth-child(2) {
top: 40px;
left: 20px;
}
.ball:nth-child(3) {
top: 60px;
left: 60px;
}
.ball:nth-child(4) {
top: 80px;
left: 40px;
}
.ball:nth-child(5) {
top: 100px;
left: 20px;
}
.ball:nth-child(6) {
top: 120px;
left: 60px;
}
.ball:nth-child(7) {
top: 140px;
left: 40px;
}
```
JavaScript 代码:
```javascript
var balls = document.querySelectorAll('.ball');
function blink() {
for (var i = 0; i < balls.length; i++) {
balls[i].style.backgroundColor = 'white';
}
setTimeout(function() {
for (var i = 0; i < balls.length; i++) {
balls[i].style.backgroundColor = 'red';
}
}, 500);
}
for (var i = 0; i < balls.length; i++) {
balls[i].addEventListener('click', blink);
}
```
这段代码会让圣诞树上的圣诞球在被点击后闪烁。