时间戳

首页 > 解决方案 > 如何自动调整 API 输入的范围？

javascript - 如何自动调整 API 输入的范围？

问题描述

我正在研究通过 API 控制灯具的滑块。

如果我想知道夹具的状态，我可以从 API 请求它。这给了我一个介于 0 到 100 之间的值。这个值可以改变，因为有人在不同的地方操作灯。使用 JavaScript，我可以通过轮询 API 在文本框中获取此值。但我无法用范围滑块完成它。这个不动。谁能帮我完成这件事？当然，无需提交页面。

为了完成下面的示例，我将 API 更改为一个 PHP 文件，其中包含一个实际上执行相同操作的简单代码。

随机文件

<?php echo rand(1, 100); ?>

我的剧本

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
let url="http://127.0.0.1/random.php"
async function refreshh() {
    btn.disabled = true;
    document.getElementById("rangeInput").value = await(await fetch(url)).text();
    document.getElementById("amount").value = await(await fetch(url)).text();
    setTimeout(refreshh,3000);}
document.addEventListener("DOMContentLoaded", function() {
    refreshh();
});
</script>
<button hidden="" id="btn" onclick="refreshh()"> </button>
<input id="rangeInput" type="range"  min="0" max="100" oninput="amount.value=rangeInput.value" />
<input id="amount" type="text"  oninput="rangeInput.value=amount.value" />

输出是“文本”框有效，但滑块无效。

我希望有人可以帮助我。

干杯。

标签： javascriptapidynamicsliderrange

解决方案

我自己已经弄清楚了。问题是我无法将文本值解析为滑块，它必须是 INT。

let url="http://127.0.0.1/random.php";
async function refreshh() {
    btn.disabled = true;
    
    var result =  await(await fetch(url)).text();
    
    document.getElementById("rangeInput").value =  parseInt(result);
    document.getElementById("amount").value = result;
    
    setTimeout(refreshh,3000);}
document.addEventListener("DOMContentLoaded", function() {
    refreshh();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button hidden="" id="btn" onclick="refreshh()"> </button>
<input id="rangeInput" type="range"  min="0" max="100" oninput="amount.value=rangeInput.value" />
<input id="amount" type="text"  oninput="rangeInput.value=amount.value" />

推荐阅读