首页html搜索框随机显示关键词

html搜索框随机显示关键词

时间: 2024-10-23 13:15:14 浏览: 20

HTML中的搜索框通常是一个文本输入字段，让用户输入他们想要搜索的内容。如果你想在搜索框旁边随机显示一些关键词作为提示，可以使用JavaScript来实现这个功能。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>搜索框随机关键词</title> <style> .keyword { display: inline-block; margin-right: 5px; } </style> <script> function getRandomKeywords() { var keywords = ['关键字1', '关键字2', '关键字3', '热门话题', '最新资讯']; // 可替换为你实际的关键词数组 return keywords[Math.floor(Math.random() * keywords.length)]; } window.onload = function() { document.getElementById('searchInput').onfocus = function() { document.getElementById('keywordPrompt').innerText = getRandomKeywords(); }; }; </script> </head> <body> <input type="text" id="searchInput" placeholder="请输入搜索内容..."> <span class="keyword" id="keywordPrompt">点击获取随机关键词...</span> </body> </html> ``` 在这个例子中，当用户聚焦到搜索框(`id="searchInput"`)时，`getRandomKeywords()`函数会被调用，它会返回一个随机的关键词并显示在`<span>`标签(`id="keywordPrompt"`)里。关键词数组可以根据需要随时修改。

阅读全文