Javascript 显示拆分、排序和随机化的句子

最近开始潜入一个小项目的编码。基本上，我想显示无限多个html元素的句子（内容），分成4个框，然后将框随机排列，并根据当前分钟随机显示其中一个装箱和不同排序的句子。对于下面这样的元素

<p id="ex1"  style="display:none" >The Chop’s popularity in Atlanta won’t soon abate, and even breaks out spontaneously when the Braves rally on the road (often to the irritation of the home team’s fans).</p>

排骨在亚特兰大的受欢迎程度不会很快减弱，甚至会在勇士队上路集合时自发爆发（通常会激怒主队球迷）

到目前为止，关于一个元素的拆分和排序部分，我自己提出了以下内容：

<p id="demo"></p>
<p id="ex1"  style="display:none" >{{Ex1}}</p>

<script>
var g1 = document.getElementById("ex1").textContent; ;
var g2=g1.split(" ");
var gx = g2.length;
var g3 = [];
if (gx <= 4) {for(var i = 0; i < g2.length; i += 1){ g3.push (g2.slice(i, i + 1));}}

else if (gx <= 8) {for(var i = 0; i < g2.length; i += 2) { g3.push (g2.slice(i, i + 2));}}
else if (gx <= 12) {for(var i = 0; i < g2.length; i += 3){ g3.push (g2.slice(i, i + 3));}}
else if (gx <= 16) {for(var i = 0; i < g2.length; i += 4){ g3.push (g2.slice(i, i + 4));}}
else if (gx <= 20) {for(var i = 0; i < g2.length; i += 5){ g3.push (g2.slice(i, i + 5));}}
else if (gx <= 24) {for(var i = 0; i < g2.length; i += 6){ g3.push (g2.slice(i, i + 6));}}
else if (gx <= 28) {for(var i = 0; i < g2.length; i += 7){ g3.push (g2.slice(i, i + 7));}}
else if (gx <= 32) {for(var i = 0; i < g2.length; i += 8){ g3.push (g2.slice(i, i + 8));}}
else if (gx <= 36) {for(var i = 0; i < g2.length; i += 9){ g3.push (g2.slice(i, i + 9));}}
else if (gx <= 40) {for(var i = 0; i < g2.length; i += 10){g3.push (g2.slice(i, i + 10));}}
else if (gx <= 44) {for(var i = 0; i < g2.length; i += 11){g3.push (g2.slice(i, i +11));}}
else if (gx <= 48) {for(var i = 0; i < g2.length; i += 12){g3.push (g2.slice(i, i + 12));}}
else if (gx <= 52) {for(var i = 0; i < g2.length; i += 13){g3.push (g2.slice(i, i + 13));}}
else if (gx <= 56) {for(var i = 0; i < g2.length; i += 14){g3.push (g2.slice(i, i + 14));}}
else if (gx <= 60) {for(var i = 0; i < g2.length; i += 15){g3.push (g2.slice(i, i + 15));}}
else if (gx > 60) {for(var i = 0; i < g2.length; i += 20){g3.push (g2.slice(i, i + 20));}}

(function () {
  // First sort the array
  g3.sort();
  // Then reverse it:
  g3.reverse(" ");
})();

var g4 = ""
  for (var i = 0; i < g3.length; i++) {
     g4 = g4 + "<li>" + g3[i] + "</li>"
 }

var g5 = g4.replace(/\,/g, '    ');
 document.getElementById("demo").innerHTML = g5;

</script>

{{ex1}
var g1=document.getElementById（“ex1”）.textContent；
var g2=g1.拆分（“”）；
var gx=g2.1长度；
var g3=[]；
如果（gx我认为这就是你的目的，尽管我可能误解了你的问题


const str=document.getElementById（“ex1”）.textContent；
const words=str.split（“”）；
//填充单词bygroup[groupIndex]=组中单词的排序数组
const wordsByGroup=[]；
const groupSize=Math.ceil（words.length/4）；
for（设i=0；i<4；i++）{
wordsByGroup[i]=单词
.slice（i*groupSize，（i+1）*groupSize）
.sort（）；
}
常量分钟=（新日期（））.getMinutes（）；
const groupIndex=数学楼层（分钟%4）；
const pickegroup=wordsByGroup[groupIndex]；
document.getElementById（“demo”）.innerHTML='For minute'+minute+'：'+pickedGroup.join（“”）；

JS-Bin

1 3 2 5 4 7 6 a 9 c b e d g f i h
关于重复代码，循环中使用的数字是
Math.ceil（gx/4）
。非常感谢您的帮助！代码在您的版本中看起来已经好多了！这也几乎是我想要的，尽管整个句子应该显示出来，并且只有组作为一个整体应该以不同的顺序排列。这应该应用于无限数量的元素，其中一个应该是di根据当前分钟显示-如果它有一些内容。我编辑了我的帖子，以澄清我的问题，并添加了一张图片，结果应该是什么样子。如果你能再看一眼，那就太好了！再次感谢你的支持和时间！
<script>
var today = new Date();
var random = today.getMinutes()%3 + 1
if (today.getHours() <= 4) {
 random -= 1
}
if (random == 1) {
 $('#demo').show()
} else if (random == 2) {
 $('#demo2').show()
} else {
 $('#demo3').show()
}
</script>

<p id="ex1"  style="display:none" >The Chop’s popularity in Atlanta won’t soon abate, and even breaks out spontaneously when the Braves rally on the road (often to the irritation of the home team’s fans).</p>

<p id="ex2"  style="display:none" >The Chop’s popularity in Atlanta won’t soon abate, and even breaks out spontaneously when the Braves rally on the road (often to the irritation of the home team’s fans).</p>

<p id="ex3"  style="display:none" >But his attitude of sullen grievance and simmering fury never abated fully</p>

...