javascript - 存储随机句子生成器的结果

Question

我正在开发一个随机艺术提示生成器，但我想通过添加一个部分来改进代码，该部分保存以前的结果并将其显示在“搜索”部分下方，这样它们就不会立即丢失。也许缓存有 10 个左右？我什至不知道如何开始。

function GetValue() {
  var myarray1 = new Array("VIBRATING", "EYE-POPPING", "BUSY", "BOLD", "GARISH", "STUNNING", "NAUSEATING", "POWERFUL", "SIMPLE", "BORING", "GRAPHIC", "CLASHING", "HARMONIOUS", "MULTICOLORED");
  var myarray2 = new Array("POLITICAL", "DREAMY", "EPIC", "BIBLICAL", "ROMANTIC", "NATURAL", "VIOLENT", "SERENE", "LITERARY", "ASSYMETRICAL", "SYMETRICAL");
  var myarray3 = new Array("DULL", "DARK", "BRIGHT", "VIVID", "VIBRANT", "PRIMARY-COLORED", "MUDDY", "ROUGH", "SHINY", "GRAINY", "GLOSSY");  
  var myarray4 = new Array("MONOCHROMATIC", "BLACK-AND-WHITE", "FLUORESCENT", "BROWN", "EARTHTONE", "PINK", "TWO-TONE", "GREEN");
  var myarray5 = new Array("CUBIST", "CLASSICAL", "FOLKSY", "MINIMALIST", "REALIST", "EXPRESSIONIST", "MODERNIST", "CONCEPTUAL");
  var myarray6 = new Array("PAINTING", "DRAWING", "SCULPTURE", "DIORAMA", "CUT-OUT", "COLLAGE","VIDEO","PHOTOGRAPH","FLIPBOOK","WOODBLOCK PRINT", "DRYPOINT", "ETCHING");


  var random1 = myarray1[Math.floor(Math.random() * myarray1.length)];
  var random2 = myarray2[Math.floor(Math.random() * myarray2.length)];
  var random3 = myarray3[Math.floor(Math.random() * myarray3.length)];
  var random4 = myarray4[Math.floor(Math.random() * myarray4.length)];
  var random5 = myarray5[Math.floor(Math.random() * myarray5.length)];
  var random6 = myarray6[Math.floor(Math.random() * myarray6.length)];
  var output = random1 + ' ' + random2 + ' ' + random3 + ' ' + random4 + ' ' + random5 + ' ' + random6;

  document.getElementById("message").innerHTML = output;
}

<input type="button" id="btnSearch" value="Search" onclick="GetValue();" />
<p id="message">

Answer 1

您可以对最后一个字符串使用全局变量并在前面添加一个列表。如果超过 10 条，最新的一条将被删除。

function GetValue() {
    var words = [["VIBRATING", "EYE-POPPING", "BUSY", "BOLD", "GARISH", "STUNNING", "NAUSEATING", "POWERFUL", "SIMPLE", "BORING", "GRAPHIC", "CLASHING", "HARMONIOUS", "MULTICOLORED"], ["POLITICAL", "DREAMY", "EPIC", "BIBLICAL", "ROMANTIC", "NATURAL", "VIOLENT", "SERENE", "LITERARY", "ASSYMETRICAL", "SYMETRICAL"], ["DULL", "DARK", "BRIGHT", "VIVID", "VIBRANT", "PRIMARY-COLORED", "MUDDY", "ROUGH", "SHINY", "GRAINY", "GLOSSY"], ["MONOCHROMATIC", "BLACK-AND-WHITE", "FLUORESCENT", "BROWN", "EARTHTONE", "PINK", "TWO-TONE", "GREEN"], ["CUBIST", "CLASSICAL", "FOLKSY", "MINIMALIST", "REALIST", "EXPRESSIONIST", "MODERNIST", "CONCEPTUAL"], ["PAINTING", "DRAWING", "SCULPTURE", "DIORAMA", "CUT-OUT", "COLLAGE", "VIDEO", "PHOTOGRAPH", "FLIPBOOK", "WOODBLOCK PRINT", "DRYPOINT", "ETCHING"]],
        output = words.map(function (a) {
            return a[Math.floor(Math.random() * a.length)];
        }).join(' '), 
        list = document.getElementById("last"), 
        li;

    if (last){
        list.childNodes.length > 9 && list.removeChild(list.childNodes[9]);
        li = document.createElement('li');
        li.innerHTML = last;
        if (list.childNodes.length) {
            list.insertBefore(li, list.childNodes[0]);
        } else {
            list.appendChild(li);
        }
    }
    document.getElementById("message").innerHTML = output;
    last = output;
}

var last = '';

<input type="button" id="btnSearch" value="Search" onclick="GetValue();" />
<p id="message"></p>
<ul id="last"></ul>