目标: 搜索框中的关键词每一秒切换一个 实现思路: ① 定义一个关键词数组 ② 搜索框默认显示关键词数组的第一个 ③ 使用setInterval定时器,每秒从数组中获取一个新关键词替换到搜索框中
时间: 2024-10-28 20:11:39 浏览: 15
为了实现在搜索框中每秒自动切换关键词的功能,你可以按照以下步骤进行:
1. 首先,创建一个包含所有关键词的JavaScript数组,比如:
```javascript
let keywords = ["关键词1", "关键词2", "关键词3", ...]; // 根据实际需求填充关键词
```
2. 初始化搜索框(假设是HTML元素),将第一个关键词添加为其内容:
```html
<input type="text" id="searchBox" value="{{keywords[0]}}" />
```
这里用`{{keywords[0]}}`表示前端模板语言,实际应用中需要替换为JavaScript动态设置值。
3. 然后,编写JavaScript代码来设置一个每秒执行一次的定时器(使用`setInterval`函数):
```javascript
function switchKeyword() {
let currentIndex = 0;
setInterval(() => {
document.getElementById("searchBox").value = keywords[currentIndex];
currentIndex = (currentIndex + 1) % keywords.length; // 循环数组,当索引溢出时回到开头
}, 1000); // 1000毫秒等于1秒
}
// 在页面加载完成后或者DOM元素可用时执行switchKeyword函数
window.onload = switchKeyword;
```
这个代码会确保搜索框每秒钟更新为数组中的下一个关键词,直到数组遍历完为止,然后又从头开始循环。
阅读全文