使用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 LIST

function 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)&nbsp; &nbsp; .fill()&nbsp; &nbsp; .map(() => getRandomInt(30, 99)),&nbsp;&nbsp; &nbsp; 100]&nbsp; .sort((a, b) => b - a)&nbsp; .forEach((item, i) => {&nbsp; &nbsp; list[i].appendChild(document.createTextNode(item + '%'));&nbsp; })<ol class="row top20" id="my_list">&nbsp; <li class="list_item">&nbsp; &nbsp; <div class="showcase col-sm-6 col-md-4">&nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; <h3>Title 1</h3>&nbsp; &nbsp; &nbsp; &nbsp; <h5>Destination 1</h5>&nbsp; &nbsp; &nbsp; &nbsp; <img src="..." class="img-responsive">&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div>&nbsp; </li>&nbsp; <li class="list_item">&nbsp; &nbsp; <div class="showcase col-sm-6 col-md-4">&nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; <h3>Title 2</h3>&nbsp; &nbsp; &nbsp; &nbsp; <h5>Destination 2</h5>&nbsp; &nbsp; &nbsp; &nbsp; <img src="..." class="img-responsive">&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div>&nbsp; </li>&nbsp; <li class="list_item">&nbsp; &nbsp; <div class="showcase col-sm-6 col-md-4">&nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; <h3>Title 3</h3>&nbsp; &nbsp; &nbsp; &nbsp; <h5>Destination 3</h5>&nbsp; &nbsp; &nbsp; &nbsp; <img src="..." class="img-responsive">&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div>&nbsp; </li></ol>