Question

我最近一直在研究一个项目，该项目演示了算术序列的用法。用户将使用滑块输入起始项的值，即t0；差为d;项数，以n表示。但是，我无法使代码正常工作。我在这篇文章中使用了解决方案：HTML5 input type range show range value。下面是我的代码的演示：

var t0, difference, boxedNums, numOfTerms, redCircle, redTriangle, redRectangle, blueCircle, blueTriangle, blueRectangle;

function genTn() {
    reset();
    t0 = document.getElementById("t0").value;
    difference = document.getElementById("d").value;
    numOfTerms = document.getElementById("tn").value;
    var tn;
    document.getElementById('buildButton').style.display = 'none';
    for (n = 0; n < numOfTerms; n++) {
        tn = t0 * 1 + difference * n;
        setTimeout(buildNextOne, 3000 * n, n, tn);
    }
    setTimeout(showButton, 3000 * numOfTerms);
    document.getElementById("formulat0").innerHTML = t0;
    document.getElementById("formulad").innerHTML = difference;
    document.getElementById("formulan").innerHTML = numOfTerms;
}

function buildNextOne(n, tn) {
    var insert = '<div class="col-sm-4 col-md-2 boxed center">'
    insert += 't<sub>' + n + '</sub><br>'
    insert += '<span class="tn">' + tn + '</span><br>'
    insert += getPicsRepresentOfNumber(tn);
    insert += '</div>'
    document.getElementById("boxArea").innerHTML += insert;

    var msg = new SpeechSynthesisUtterance(tn);
    window.speechSynthesis.speak(msg);
}

function showButton() {
    document.getElementById('buildButton').style.display = '';
}

function reset() {
    document.getElementById("boxArea").innerHTML = "";
}

function getPicsRepresentOfNumber(number) {
    var totalHund = 0,
        totalTens = 0,
        totalOnes = 0,
        returnHtml = '';

    totalHund = Math.abs(parseInt(number / 100));
    var diffAfterRemovingHund = number % 100;
    totalTens = Math.abs(parseInt(diffAfterRemovingHund / 10));
    totalOnes = Math.abs(parseInt(diffAfterRemovingHund % 10));

    for (var i = 0; i < totalHund; i++) {
        returnHtml += number < 0 ? "<img src='imgs/negativeHundred.png'>&nbsp" : "<img src='imgs/hundred.png'>&nbsp";
        if (i == 4) {
            returnHtml += "&nbsp"
        }
    }
    returnHtml += "<br>";
    for (var i = 0; i < totalTens; i++) {
        returnHtml += number < 0 ? "<img src='imgs/negativeTen.png'>&nbsp" : "<img src='imgs/ten.png'>&nbsp";
        if (i == 4) {
            returnHtml += "&nbsp";
        }
    }
    returnHtml += "<br>";
    for (var i = 0; i < totalOnes; i++) {
        returnHtml += number < 0 ? "<img src='imgs/negativeOne.png'>&nbsp" : "<img src='imgs/one.png'>&nbsp";
        if (i == 4) {
            returnHtml += "&nbsp";
        }
    }
    returnHtml += "<br>";
    return returnHtml;
}

function updateT0Input(t0) {
    document.getElementById("updatet0").value = t0;
}

function updateDInput(difference) {
    document.getElementById("updated").value = difference;
}

function updateNInput(numOfTerms) {
    document.getElementById("updaten").value = numOfTerms;
}

.center {
    text-align: center;
}

#equation {
    background-color: lightgreen;
    text-align: center;
    border-radius: 10%;
}

body {
    background-color: lightblue;
}

#formula {
    background-color: lightgreen;
}

.boxed {
    border: 1px solid gray;
    margin-top: 10px;
    background-color: beige;
}

.tn {
    font-size: 3em;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <title>Assignment 10a2</title>
</head>

<body>
    <div id="formula">
        Formula: <br>
        t<sub>n</sub> = <span id="formulat0">t<sub>0</sub></span> + <span id="formulad">d</span>*<span id='formulan'>n</span> <br>
        <br>
        t<sub>0</sub> = <span id="updatet0"></span>
        <input type="range" min="-50" max="50" value="0" id="t0" class="slider" onchange="updateT0Input(this.value);">
        <br>
        d = <span id="updated"></span>
        <input type="range" min="-50" max="50" value="0" id="d" class="slider" onchange="updateDInput(this.value);">
        <br>
        n = <span id="updaten"></span>
        <input type="range" min="1" max="20" value="10" id="tn" class="slider" onchange="updateNInput(this.value);">
        <br>
        <button id="buildButton" style="display:''" type="button" class="btn btn-warning"
            onclick="genTn()">Generate</button>
    </div>

    <br>

    <div class="container">
        <div class="row" id="boxArea">
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
    <script src="10a2.js"></script>
</body>

我添加了函数updateT0Input，updateDInput和updateNInput：

function updateT0Input(t0) {
    document.getElementById("updatet0").value = t0;
}

function updateDInput(difference) {
    document.getElementById("updated").value = difference;
}

function updateNInput(numOfTerms) {
    document.getElementById("updaten").value = numOfTerms;
}

我的html滑块在这里：

        t<sub>0</sub> = <span id="updatet0"></span>
        <input type="range" min="-50" max="50" value="0" id="t0" class="slider" onchange="updateT0Input(this.value);">
        <br>
        d = <span id="updated"></span>
        <input type="range" min="-50" max="50" value="0" id="d" class="slider" onchange="updateDInput(this.value);">
        <br>
        n = <span id="updaten"></span>
        <input type="range" min="1" max="20" value="10" id="tn" class="slider" onchange="updateNInput(this.value);">

我做错了吗？

请不要介意演示中无法显示的图像

Answer 1

JSFiddle和您的代码段：https://jsfiddle.net/u92ws7ce/1/

这是您的HTML，其中的类名进行了稍微修改：

 t<sub>0</sub> = <span id="updatet0"></span>
  <input type="range" min="-50" max="50" value="0" id="t0" class="slider1" onchange="updateT0Input(this.value);">
  <p>Value: <span id="demo1"></span></p>
  <br>
  d = <span id="updated"></span>
  <input type="range" min="-50" max="50" value="0" id="d" class="slider2" onchange="updateDInput(this.value);">
  <p>Value: <span id="demo2"></span></p>
  <br>
  n = <span id="updaten"></span>
  <input type="range" min="1" max="20" value="10" id="tn" class="slider3" onchange="updateNInput(this.value);">
  <p>Value: <span id="demo3"></span></p>

并将其添加到您的JS文件中：

var output1 = document.getElementById("demo1");
output1.innerHTML = slider1.value;

slider1.oninput = function() {
  output1.innerHTML = this.value;
}

var slider2 = document.getElementById("d");
var output2 = document.getElementById("demo2");
output2.innerHTML = slider2.value;

slider2.oninput = function() {
  output2.innerHTML = this.value;
}

var slider3 = document.getElementById("tn");
var output3 = document.getElementById("demo3");
output3.innerHTML = slider3.value;

slider3.oninput = function() {
  output3.innerHTML = this.value;
}

请确保您使用唯一类名和ID标识每个滑块。您将希望将其重构为程序化的，并使用函数封装重复性逻辑。

参考：https://www.w3schools.com/howto/howto_js_rangeslider.asp

如何在html中显示滑块值？

1 个答案: