html css工资条样式,JS+CSS3交互式拖动滑块选择工资条代码
时间: 2023-12-20 19:04:39 浏览: 33
以下是一个简单的 HTML/CSS 工资条样式,包含一个交互式的拖动滑块:
```html
<!DOCTYPE html>
<html>
<head>
<title>工资条</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 500px;
margin: 50px auto;
background-color: #f5f5f5;
padding: 20px;
}
h1 {
text-align: center;
margin-top: 0;
}
label {
display: block;
margin-bottom: 10px;
}
.slider {
width: 100%;
height: 20px;
background-color: lightgray;
border-radius: 10px;
position: relative;
margin-bottom: 20px;
}
.slider:before {
content: "";
display: block;
width: 40px;
height: 40px;
background-color: white;
border-radius: 50%;
border: 2px solid lightgray;
position: absolute;
left: 0;
top: -10px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.slider:after {
content: "";
display: block;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
border: 2px solid lightgray;
position: absolute;
right: -10px;
top: -10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 20px;
background-color: transparent;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
border: 2px solid lightgray;
position: relative;
top: -10px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
border: 2px solid lightgray;
position: relative;
top: -10px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.output {
text-align: center;
font-size: 24px;
font-weight: bold;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>工资条</h1>
<label for="salary-range">选择工资:</label>
<div class="slider">
<input type="range" min="0" max="100" value="50" id="salary-range">
</div>
<div class="output" id="salary-output">$5,000</div>
</div>
<script>
var slider = document.getElementById("salary-range");
var output = document.getElementById("salary-output");
slider.oninput = function() {
var salary = this.value * 5000;
output.innerHTML = "$" + salary.toLocaleString();
}
</script>
</body>
</html>
```
这个工资条样式包含一个 `div` 容器,包含一个标题和一个拖动滑块。拖动滑块使用 `input` 元素的 `type="range"` 属性实现。拖动滑块的样式使用 CSS3 的 `::before` 和 `::after` 伪元素实现。
拖动滑块的值使用 JavaScript 监听 `input` 元素的 `oninput` 事件实现。在事件处理程序中,根据拖动滑块的值计算工资,并将结果更新到一个 `div` 元素中。
上面的代码只是一个简单的例子,你可以根据自己的需求进行修改和扩展。