JavaScript实现楼层效果的代码实践

JavaScript 实现楼层效果 本文将详细介绍如何使用 JavaScript 实现楼层效果，主要包括 HTML、CSS 和 JavaScript 三部分。 HTML 结构 首先，我们需要创建一个 HTML 结构来存放楼层信息。我们使用无序列表（ul）和有序列表（ol）来表示楼层的结构。 ```html <ul> <li>我是第1层</li> <li>我是第2层</li> <li>我是第3层</li> <li>我是第4层</li> <li>我是第5层</li> </ul> <ol> <li class="selected">第1层</li> <li>第2层</li> <li>第3层</li> <li>第4层</li> <li>第5层</li> </ol> ``` CSS 样式 接下来，我们需要使用 CSS 来设置楼层的样式。我们使用 CSS 选择器来选择楼层的元素，并设置其样式。 ```css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } ul { width: 100%; height: 100%; } ul > li { list-style: none; width: 100%; height: 100%; font-size: 100px; text-align: center; } ol { position: fixed; left: 10px; top: 50%; transform: translateY(-50%); } ol > li { list-style: none; width: 100px; line-height: 40px; text-align: center; border: 1px solid #000; } .selected { background: skyblue; } ``` JavaScript 实现 现在，我们使用 JavaScript 来实现楼层的逻辑。我们首先获取楼层的元素，然后使用循环来设置每个楼层的背景颜色。 ```javascript // 1. 初始化楼层的颜色 let oPages = document.querySelectorAll("ul > li"); let colorArr = ['green', 'blue', 'purple', 'red', 'yellow']; for (let i = 0; i < oPages.length; i++) { let page = oPages[i]; page.style.background = colorArr[i]; } // 2. 实现点击谁就选中谁 let oItems = document.querySelectorAll("ol > li"); let currentItem = oItems[0]; let screenHeight = getScreen().height; let timerId = null; // ... ``` 在上面的代码中，我们首先获取楼层的元素，然后使用循环来设置每个楼层的背景颜色。然后，我们获取有序列表的元素，并使用循环来实现点击谁就选中谁的逻辑。 总结 本文介绍了如何使用 JavaScript 实现楼层效果，包括 HTML 结构、CSS 样式和 JavaScript 实现三部分。通过这篇文章，您可以了解到楼层效果的实现方法和原理。