js实现金额区间搜索框
时间: 2024-01-03 18:53:12 浏览: 36
可以使用HTML、CSS和JavaScript来实现一个金额区间搜索框。
首先,需要在HTML中创建两个输入框,一个用于输入最小金额,一个用于输入最大金额。可以使用`<input>`标签来创建输入框,并设置`type="number"`属性来限制输入内容为数字。
```html
<label>最小金额:</label>
<input type="number" id="minAmount">
<label>最大金额:</label>
<input type="number" id="maxAmount">
```
接下来,创建一个搜索按钮,用于触发搜索操作。可以使用`<button>`标签来创建按钮。
```html
<button id="searchBtn">搜索</button>
```
然后,使用CSS来美化输入框和搜索按钮,如设置输入框和按钮的样式、大小和位置等。
```css
input[type="number"] {
width: 100px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
button {
width: 80px;
height: 30px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
```
最后,使用JavaScript来实现搜索功能。在搜索按钮的点击事件中,获取最小金额和最大金额的值,并将其作为参数传递给搜索函数。
```javascript
const searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', function() {
const minAmount = document.getElementById('minAmount').value;
const maxAmount = document.getElementById('maxAmount').value;
search(minAmount, maxAmount);
});
function search(minAmount, maxAmount) {
// TODO: 在这里实现搜索功能
}
```
在`search`函数中,可以使用Ajax请求后端接口来获取符合条件的数据,并将其展示在页面上。具体实现方式可以根据实际情况进行调整。
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>金额区间搜索框</title>
<style>
input[type="number"] {
width: 100px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
button {
width: 80px;
height: 30px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<label>最小金额:</label>
<input type="number" id="minAmount">
<label>最大金额:</label>
<input type="number" id="maxAmount">
<button id="searchBtn">搜索</button>
<script>
const searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', function() {
const minAmount = document.getElementById('minAmount').value;
const maxAmount = document.getElementById('maxAmount').value;
search(minAmount, maxAmount);
});
function search(minAmount, maxAmount) {
// TODO: 在这里实现搜索功能
console.log(`搜索范围:${minAmount} ~ ${maxAmount}`);
}
</script>
</body>
</html>
```