使用Javascript随机生成的数字的排序顺序

Question

我刚刚在html中添加了Javascript函数，以为每个列表项生成30到100之间的随机数，并且我试图弄清楚如何对这些数字进行反向排序，并确保第一个项的值始终为100要添加上下文，我的目标是为搜索结果提供匹配分数百分比。例如：90% Match。例如，预期结果将是这样的：List of item (in reverse order with 100 as default first value):1. 100%2. 92%3. 86%4. 80%5. 71%6. 65%7. 58%8. 45%9. 30%目前，它看起来像这样：List of item (random order):1. 58%2. 66%3. 97%4. 58%5. 89%6. 61%7. 63%8. 86%9. 46%当前显示数字的html：<div>   {% if  page_obj.object_list %}       <ol class="row top20" id="my_list">          {% for result in page_obj.object_list %}          <li id="list_item">              <div class="showcase col-sm-6 col-md-4">               <a href="{{ result.object.get_absolute_url }}">                      <h3>{{result.object.title}}</h3>                      <h5>{{ result.object.destination }}</h5>                      <img src="{{ result.object.image }}" class="img-responsive">               </a>               </div>          </li>           {% endfor %}       </ol></div>    {% endif %}如何对顺序进行反向排序，并为第一个结果赋予默认值100？我的剧本var orderedList = document.getElementById("my_list");var itemLength = 9; //REPLACE THIS WITH THE LENGTH OF THE ITEM LISTfunction getRandomInt(min, max) {  min = Math.ceil(min);  max = Math.floor(max);  return Math.floor(Math.random() * (max - min + 1)) + min;}var listItem;var randomInt;for (var i = 0; i < itemLength; i++) {  listItem = document.getElementById("list_item");  randomInt = document.createTextNode(getRandomInt(30, 100).toString() + "%");  listItem.appendChild(randomInt);  orderedList.appendChild(listItem);}<ul id="my_list">  <li id="list_item"></li></ul>

Answer 1

ES6版本

const getRandomInt = ((min, max) => Math.floor(Math.random() * (max - min + 1)) + min);

const list = document.querySelectorAll('#my_list li');

[...Array(list.length - 1)

    .fill()

    .map(() => getRandomInt(30, 99)), 

    100]

  .sort((a, b) => b - a)

  .forEach((item, i) => {

    list[i].appendChild(document.createTextNode(item + '%'));

  })

<ol class="row top20" id="my_list">

  <li class="list_item">

    <div class="showcase col-sm-6 col-md-4">

      <a href="#">

        <h3>Title 1</h3>

        <h5>Destination 1</h5>

        <img src="..." class="img-responsive">

      </a>

    </div>

  </li>

  <li class="list_item">

    <div class="showcase col-sm-6 col-md-4">

      <a href="#">

        <h3>Title 2</h3>

        <h5>Destination 2</h5>

        <img src="..." class="img-responsive">

      </a>

    </div>

  </li>

  <li class="list_item">

    <div class="showcase col-sm-6 col-md-4">

      <a href="#">

        <h3>Title 3</h3>

        <h5>Destination 3</h5>

        <img src="..." class="img-responsive">

      </a>

    </div>

  </li>

</ol>