Question

我目前正在开发一个程序，该程序演示了算术序列的使用，该算术序列要求用户输入起始词，这些词之间的差异以及用户要生成多少个词。下面的代码和演示：

var t0, difference, boxedNums, numOfTerms, redCircle, redTriangle, redRectangle, blueCircle, blueTriangle, blueRectangle;
redCircle = "<img src='imgs/negativeOne.png'>";
redTriangle = "<img src='imgs/negativeTen.png'>";
redRectangle = "<img src='imgs/negativeHundred.png'";
blueCircle = "<img src='imgs/one.png'";
blueTriangle = "<img src='imgs/ten.png'";
blueRectangle = "img src='imgs/hundred.png'";

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);
}

function buildNextOne(n, tn) {
    var insert = '<div class="col-sm-4 col-md-2">'
    insert += '<span class="boxed center">'
    insert += 't<sub>' + n + '</sub>'
    insert += '<span class="tn">' + tn + '</span>'
    insert += '</span>'
    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 = "";
}

.center {
    text-align: center;
}

#equation {
    background-color: lightgreen;
    text-align: center;
    border-radius: 10%;
}

body {
    background-color: lightblue;
}

#formula {
    background-color: lightgreen;
}

span {
    display: block;
}

.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> = t<sub>0</sub> + d*n <br>
        <br>
        t<sub>0</sub>
        <input type="range" min="-50" max="50" value="0" id="t0" class="slider">
        <br>
        d
        <input type="range" min="-50" max="50" value="0" id="d" class="slider">
        <br>
        n
        <input type="range" min="1" max="20" value="10" id="tn" class="slider">
        <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>

但是，我想添加一些图像来代表数字；例如，圆形代表1，三角形代表10，而正方形代表100。期望的结果是这样的：

我不确定如何生成该数字并检查数字，将其分类为1、10、100等，然后插入相应的图像。有办法吗？

这是图片的显示方式：

redCircle = "<img src='imgs/negativeOne.png'>";
redTriangle = "<img src='imgs/negativeTen.png'>";
redRectangle = "<img src='imgs/negativeHundred.png'";
blueCircle = "<img src='imgs/one.png'";
blueTriangle = "<img src='imgs/ten.png'";
blueRectangle = "img src='imgs/hundred.png'";

Answer 1

您只需要添加以下功能

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 ? '-H' : 'H';
  }

  for (var i = 0; i < totalTens; i++) {
    returnHtml += number < 0 ? '-T' : 'T';
  }

  for (var i = 0; i < totalOnes; i++) {
    returnHtml += number < 0 ? '-O' : 'O';
  }

  return returnHtml;
}

我用过 -H表示负百

H为正百

-T表示负数

T为正数

-否定否定

O代表积极的人

为了您的工作，您需要更换

'-H'与redRectangle，

带有blueRectangle的'H'，

'-T'与redTriangle，

“ blue”为“ T”，

'-O'带有redCircle，

带有blueCircle的'O'

工作演示

var t0, difference, boxedNums, numOfTerms, redCircle, redTriangle, redRectangle, blueCircle, blueTriangle, blueRectangle;
redCircle = "<img src='imgs/negativeOne.png'>";
redTriangle = "<img src='imgs/negativeTen.png'>";
redRectangle = "<img src='imgs/negativeHundred.png'";
blueCircle = "<img src='imgs/one.png'";
blueTriangle = "<img src='imgs/ten.png'";
blueRectangle = "img src='imgs/hundred.png'";

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);
}

function buildNextOne(n, tn) {
    var insert = '<div class="col-sm-4 col-md-2">'
    insert += '<span class="boxed center">'
    insert += 't<sub>' + n + '</sub>'
    insert += '<span class="tn">' + tn + '</span>'
    insert += getPicsRepresentOfNumber(tn)
    insert += '</span>'
    insert += '</div>'
    document.getElementById("boxArea").innerHTML += insert;
    
    var msg = new SpeechSynthesisUtterance(tn);
    window.speechSynthesis.speak(msg);
}

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 ? '-H' : 'H';
  }
  
  for (var i = 0; i < totalTens; i++) {
    returnHtml += number < 0 ? '-T' : 'T';
  }
  
  for (var i = 0; i < totalOnes; i++) {
    returnHtml += number < 0 ? '-O' : 'O';
  }
  
  return returnHtml;
}

function showButton() {
    document.getElementById('buildButton').style.display = '';
}

function reset() {
    document.getElementById("boxArea").innerHTML = "";
}

.center {
    text-align: center;
}

#equation {
    background-color: lightgreen;
    text-align: center;
    border-radius: 10%;
}

body {
    background-color: lightblue;
}

#formula {
    background-color: lightgreen;
}

span {
    display: block;
}

.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> = t<sub>0</sub> + d*n <br>
        <br>
        t<sub>0</sub>
        <input type="range" min="-50" max="50" value="0" id="t0" class="slider">
        <br>
        d
        <input type="range" min="-50" max="50" value="0" id="d" class="slider">
        <br>
        n
        <input type="range" min="1" max="20" value="10" id="tn" class="slider">
        <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>

如何将数字分类为特定数字？

1 个答案: