点击百度一下会跳转到相应的百度搜索结果(加入了回车搜索)

代码

<div class="search-container">
  <input type="text" placeholder="请输入搜索内容" class="sousuokuang">
  <button type="submit" id="su" value="百度一下" class="anniu" onclick="searchBaidu()">百度一下</button>
</div>

<script>
function searchBaidu() {
  var query = document.querySelector('.sousuokuang').value;
  window.location.href = 'https://www.baidu.com/s?wd=' + encodeURIComponent(query);
}

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault(); // 阻止默认行为,避免页面刷新
    searchBaidu(); // 调用搜索函数
  }
});
</script>
 1. <div class="search-container">:创建一个包含搜索框和按钮的容器。
 2. <input type="text" placeholder="请输入搜索内容" class="sousuokuang">:创建一个文本输入框,用于接收用户输入的搜索内容。
 3. <button type="submit" id="su" value="百度一下" class="anniu" "searchBaidu()">百度一下</button>:创建一个提交按钮,用于触发搜索操作。该按钮绑定了点击事件处理函数searchBaidu()。
 4. function searchBaidu() { ... }:定义了一个名为searchBaidu()的函数,用于实现搜索功能。
 5. document.querySelector('.sousuokuang').value:通过选择器.sousuokuang选取页面中的文本输入框元素,并获取其值,即用户输入的搜索内容。
 6. window.location.href = 'https://www.baidu.com/s?wd=' + encodeURIComponent(query);:构造百度搜索的URL,其中query为用户输入的搜索内容,使用encodeURIComponent()方法对搜索内容进行URL编码。然后将编码后的字符串拼接到URL末尾,并将当前页面的URL修改为该URL,从而实现跳转到百度搜索引擎的结果页面进行搜索。
 7. document.addEventListener('keydown', function(event) { ... }):添加键盘按下事件监听器,当用户按下键盘上的任意键时,都会触发该事件的处理函数。
 8. if (event.key === 'Enter') { ... }:判断按下的键是否为回车键。如果是回车键被按下,则执行以下操作:
        event.preventDefault();:阻止默认行为,避免页面刷新。
        searchBaidu();:调用searchBaidu()函数,以触发搜索操作。

加入以下内容可以在点击百度一下鼠标呈现 小手状态

<style>
    .search-container .anniu {
      cursor: pointer;
    }
  </style>