<div class="search"><input type="text" placeholder="监控摄像头"><span></span></div> <div class="car">这段代码如何加一个类似京东搜索跳转的代码
时间: 2023-08-14 20:08:42 浏览: 113
你可以为搜索按钮添加一个点击事件,当按钮被点击时,获取输入框中的文本,然后将其添加到跳转链接的查询参数中。以下是一个示例代码:
HTML 代码:
```html
<div class="search">
<input type="text" id="searchInput" placeholder="监控摄像头">
<span id="searchBtn"></span>
</div>
<div class="car">
<!-- 这里是购物车内容 -->
</div>
```
JavaScript 代码:
```javascript
// 获取搜索按钮和输入框
var searchBtn = document.getElementById('searchBtn');
var searchInput = document.getElementById('searchInput');
// 为搜索按钮添加点击事件
searchBtn.addEventListener('click', function() {
// 获取搜索词
var keyword = searchInput.value;
// 跳转链接
var url = 'https://www.jd.com/s?keyword=' + encodeURIComponent(keyword);
// 在新窗口中打开跳转链接
window.open(url, '_blank');
});
```
上述代码中,我们使用了 `encodeURIComponent` 函数对搜索词进行 URL 编码,以确保跳转链接的查询参数不会出现任何问题。你可以将 `window.open` 函数中的 `_blank` 参数改为 `_self`,这样搜索结果会在当前窗口中打开。
阅读全文
相关推荐











<html> <head> <meta charset="utf-8" /> <title>星星国际影城</title> <script src="js/main.js" type="text/javascript"></script> </head> <body> 登录| 注册| 全国服务热线:888-8888888 < img src="images/logo.jpg" title="" alt="logo" /> 首页 影片 影城 购票 影城活动 会员服务 顾客互动 <input type="text" placeholder="搜索影片" name="search"/> <input type="button" name="btn" value="" /> < img src="images/b1.png" /> < img src="images/b2.png" /> < img src="images/b3.png" /> 在每行代码进行解释



<html> <head> <meta charset="UTF-8"> <title>星星国际影城-用户登录界面</title> <script src="js/login.js"></script> </head> <body> xx国际影城 <form action="#" method="post"> <label>用户名:</label> <input type="text" placeholder="请输入用户名" name="userName" value=""/> <label>密 码:</label> <input type="password" placeholder="请输入密码" name="password" value=""/> 登录 </form> 还不是我们的会员?立即注册 </body> </html>。在每行代码后面加上解释


