使用JavaScript编写先使用HTMLCSS实现页面布局,在使用闭包的方式实现鼠标单机某个百度热搜列表时显示对应索引
时间: 2024-02-23 08:00:28 浏览: 22
好的,我理解了你的问题。首先,我们需要在HTML中创建一个百度热搜列表,然后用CSS样式来对列表进行布局。接着,在JavaScript中,我们使用闭包的方式来实现鼠标单击某个列表项时,显示对应的索引值。下面是一个简单的示例代码:
HTML代码:
```html
<ul id="hotsearch">
<li>王者荣耀</li>
<li>LOL</li>
<li>PUBG</li>
<li>绝地求生</li>
<li>CS:GO</li>
</ul>
```
CSS代码:
```css
#hotsearch {
list-style-type: none;
margin: 0;
padding: 0;
}
#hotsearch li {
background-color: #f2f2f2;
padding: 10px;
margin-bottom: 5px;
cursor: pointer;
}
```
JavaScript代码:
```javascript
(function() {
var items = document.querySelectorAll("#hotsearch li");
for (var i = 0; i < items.length; i++) {
(function(index) {
items[index].onclick = function() {
alert("你点击了第" + (index+1) + "项热搜");
}
})(i);
}
})();
```
上述代码中使用了一个立即执行函数来创建闭包,其中通过querySelectorAll方法获取了所有的列表项元素,并使用循环遍历每个元素。在每个元素内部再使用闭包的方式,为每个元素添加了一个onclick事件,当用户单击某个列表项时,就会弹出一个提示框,显示对应的索引值。