cuốn sách gpt4 ai đã làm

javascript - 多个 slider 相互 react

In lại Tác giả: Walker 123 更新时间:2023-11-28 14:32:42 27 4
mua khóa gpt4 Nike

这里是新手。我正在做我的第一个元素,我想为不同的人(普通人、 worker 、农民等)提供 slider ,但我不知道如何放置多个 slider 以及如何让它们全部工作。我从 W3schools 获取代码并更改了一些东西,但似乎我已经破坏了它并且我不知道如何处理它。我希望有 2 个 slider 都在工作,并且当一个 slider 上升而另一个 slider 下降时(将人员分配给他们的工作)。这是我的代码(我不知道它是否有任何帮助)

        var people = 100;
var workers = 0;
document.onreadystatechange = function () {
if (document.readyState == "complete") {

var slider = document.getElementById("sliderWorkers");
var output = document.getElementById("workers").innerHTML = workers;
output.innerHTML = workers;



slider.oninput = function () {
output.innerHTML = this.value;
}

/*################################################################*/
var slider2 = document.getElementById("sliderPeople");
var output = document.getElementById("people").innerHTML = people;
output.innerHTML = slider.value;


slider.oninput = function () {
output.innerHTML = this.value;
}


}
}
setInterval(hàm () {


document.getElementById("people").innerHTML = people;
document.getElementById("workers").innerHTML = workers;
}, 100000);
        .slider, .slider2 {
-webkit-appearance: none;
width: 10%;
height: 7px;
bán kính đường viền: 5px;
background: #d3d3d3;
phác thảo: không có;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
bán kính đường viền: 50%;
nền: đen;
con trỏ: con trỏ;
}

.slider::-moz-range-thumb {
width: 15px;
height: 15px;
bán kính đường viền: 50%;
nền: đen;
con trỏ: con trỏ;
}

.slider2::-moz-range-thumb {
width: 15px;
height: 15px;
bán kính đường viền: 50%;
nền: đen;
con trỏ: con trỏ;
}
.slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
bán kính đường viền: 50%;
nền: đen;
con trỏ: con trỏ;
}

Population range slider





Value wokers:






Value people:



câu trả lời hay nhất

Bạn có thể sử dụng Nội dung DOM được tảiaddEventListener以便在 dom 准备就绪时开始您的任务。

在你之后querySelectorAll为了选择所有范围元素,并且每个元素都需要一个事件处理程序。

在此事件处理程序中,您可以更新值。

注意:P + DIV 现在是 P 里面有一个 SPAN。

document.addEventListener('DOMContentLoaded', function(e) {
document.querySelectorAll('[type="range"]').forEach(function (ele) {
ele.addEventListener('input', function (e) {
this.parentElement.querySelector('span').textContent = this.value;
var next = this.closest('div').nextElementSibling;
if (next.tagName != 'DIV') {
next = this.closest('div').previousElementSibling;
}
next.querySelector('[type="range"]').value = 100 - +this.value;
next.querySelector('span').textContent = 100 - +this.value;
});
// start with an initial value.....simultating an input...
ele.parentElement.querySelector('span').textContent = ele.value;
});
})
.thanh trượt {
-webkit-appearance: none;
width: 10%;
height: 7px;
bán kính đường viền: 5px;
background: #d3d3d3;
phác thảo: không có;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
bán kính đường viền: 50%;
nền: đen;
con trỏ: con trỏ;
}

.slider::-moz-range-thumb {
width: 15px;
height: 15px;
bán kính đường viền: 50%;
nền: đen;
con trỏ: con trỏ;
}

Population range slider






Value wokers:







Value people:


关于javascript - 多个 slider 相互 react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53946952/

27 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress