使用JS实现灯泡开关动画效果

"该资源是一个使用JavaScript实现的灯泡开关特效的示例代码，包括HTML、CSS和JavaScript三个部分。用户点击"开灯"或"关灯"的链接，会切换灯泡图片来模拟灯泡的开启和关闭，并在页面上显示当前状态。此外，还显示了当前时间。" 在这个示例中，主要涉及以下JavaScript知识点： 1. DOM操作：JavaScript通过`document.getElementById`获取DOM元素，如`showBulb`函数中的`getElementById('imgBulb')`用于获取灯泡图片元素。`setAttribute`和`getAttribute`用于设置和获取元素属性，如切换图片源。 2. 事件处理：使用`onclick`属性绑定点击事件，当用户点击链接时调用`showBulb`函数。`return false`阻止了链接的默认行为（跳转）。 3. 函数定义与调用：`showBulb`函数是实现灯泡开关的核心，它接收一个参数`assign`，即触发事件的元素。函数内通过判断当前图片源来决定是开启还是关闭灯泡。 4. 图片切换：通过修改`img`元素的`src`属性来实现灯泡图片的切换，从而达到开关效果。 5. CSS样式：CSS用于美化页面，如设置背景色、文字颜色、元素布局等。`float`属性用于使列表项水平排列，`padding`调整元素间距，`list-style`移除列表的默认样式。 6. 时间显示：虽然未给出JavaScript代码实现时间显示，但通常可以使用`Date`对象获取当前时间，并将其显示在页面相应位置。 这个示例提供了一个基础的交互式网页元素的实现方法，适合初学者学习JavaScript事件处理、DOM操作以及简单的页面交互。