我有一个从0到100的范围条来控制文件的读取速度。
图片在这里
问题是0表示最快，100表示最慢。如何求逆呢?
我想让0是最慢的速度/100是最快的速度
(function(){
const pauseButton = document.getElementById("pauseReadingButton");
const resumeButton = document.getElementById("resumeReadingButton");
const uploadButton = document.getElementById("uploadFileButton");
let displayFileContents = null;
let interval = null;
const setButtonState = function(isPlaying){
if (displayFileContents) {
pauseButton.disabled = !isPlaying;
resumeButton.disabled = isPlaying;
} else {
pauseButton.disabled = true;
resumeButton.disabled = true;
}
};
const pauseReading = () => {
clearInterval(interval);
setButtonState(false);
}
pauseButton.addEventListener("click", pauseReading)
const resumeReading = () => {
if (displayFileContents){
interval = setInterval(displayFileContents, document.getElementById("range").value);
setButtonState(true);
}
};
resumeButton.addEventListener("click", resumeReading);
const readFile = (file, callback) => {
const reader = new FileReader();
reader.onload = callback;
reader.readAsText(file);
};
uploadButton.addEventListener("click", () => {
const files = document.getElementById("fileToUpload").files;
if (!files.length) { return; }
readFile(files[0], function(e){
const content = e.target.result;
const fileContentArray = content.split(/rn|n/);
let index = 0;
displayFileContents = () => {
document.getElementById("demo").innerHTML = fileContentArray[index];
++index;
if (index >= fileContentArray.length){
displayFileContents = null;
pauseReading();
setButtonState(false);
}
};
resumeReading();
setButtonState(true);
});
});
setButtonState(false);
})();<body>
<input class="buttonupload" type="file" name="fileToUpload" id="fileToUpload">
<button id="uploadFileButton">Play</button>
<text style="color:blue" id="demo"> </text> <br><br>
<button style="margin-top:20px;" id="pauseReadingButton">Pause</button>    
<button id="resumeReadingButton">Resume</button>
<input type="range" min="0" max="100" value="0" id="range" onchange="name=this.value"; oninput="rangeValue.innerText = this.value">
<p id="rangeValue">0</p>
</body>#创造空间空间空间空间空间空间空间空间空间空间空间空间空间空间空间
在回答的注释部分添加了下面的代码片段:
你也可以在你的Javascript中使用相同的方法，如果你也想反转后台的逻辑
<input type="range" min="0" max="100" value="0" id="range" onchange="name=this.value"; oninput="rangeValue.innerText = 100 - this.value">
<p id="rangeValue">100</p>