个人中心
gpt4 book ai didi

javascript - 如何制作列表随机发生器

转载 作者：行者123 更新时间：2023-12-03 05:15:22 25 4
gpt4 key购买 nike

我一直在开发一个相当毫无意义的网站，其中有多个“随机”生成器。您可以在这里查看:randomwordgen.net16.net正如你所看到的，底部有一个未完成的发电机，这就是我来这里的目的。我想让它根据您输入的内容生成一个列表。我的想法是将输入字段的值添加到数组中，当您点击“添加到列表”时，该数组将进入列表。然后我将有一个单独的按钮，它将使用该数组生成列表。唯一的问题是，当我只知道变量的名称而不是值时，我不知道如何将字符串添加到数组中。如果有人能帮助我解决这些问题，那就太好了!这是整个网站的代码:

<!DocType html>
<html>
<head>
<link rel="shortcut icon" href="https://cdn2.iconfinder.com/data/icons/thesquid-ink-40-free-flat-icon-pack/64/rubber-duck-512.png" type="image/x-icon">
<title>Random Word Generator</title>
<style>
body {
	background-color:pink;
}
button.10letter {
	background-color: blue;
}
button.5letter {
	background-color: blue;
	position:relative;
	top:50px;
}
button.4letter {
	background-color: blue;
	position:relative;
	top:100px;
}
button.3letter {
	background-color: blue;
	position:relative;
	top:150px;
}
button.Add {
	position:relative;
	top:50px;
}
</style>
</head>
<body>
<h1 style="color:grey">Random word generator:</h1>
<button class="10letter" onclick="doAlert();" style="color:orange">Generate with 10 letters.</button>
<script>
function createRandomWord(length) {
    var consonants = 'bcdfghjklmnpqrstvwxyz',
        vowels = 'aeiou',
        rand = function(limit) {
            return Math.floor(Math.random()*limit);
        },
        i, word='', length = parseInt(length,10),
        consonants = consonants.split(''),
        vowels = vowels.split('');
    for (i=0;i<length/2;i++) {
        var randConsonant = consonants[rand(consonants.length)],
            randVowel = vowels[rand(vowels.length)];
        word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
        word += i*2<length-1 ? randVowel : '';
    }
    return word;
}
function doAlert() {
alert( "Your word is: "+createRandomWord(10)+" (bonus points if your word is real)." );
}
</script>
<button class="5letter" onclick="doAlert5();" style="color:orange">Generate with 5 letters.</button>
<script>
function createRandomWord5(length) {
    var consonants = 'bcdfghjklmnpqrstvwxyz',
        vowels = 'aeiou',
        rand = function(limit) {
            return Math.floor(Math.random()*limit);
        },
        i, word='', length = parseInt(length,10),
        consonants = consonants.split(''),
        vowels = vowels.split('');
    for (i=0;i<length/2;i++) {
        var randConsonant = consonants[rand(consonants.length)],
            randVowel = vowels[rand(vowels.length)];
        word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
        word += i*2<length-1 ? randVowel : '';
    }
    return word;
}
function doAlert5() {
alert( "Your word is: "+createRandomWord(5)+" (bonus points if your word is real)." );
}
</script>
<button class="4letter" onclick="doAlert4();" style="color:orange">Generate with 4 letters.</button>
<script>
function createRandomWord4(length) {
    var consonants = 'bcdfghjklmnpqrstvwxyz♀☺☻ƒ=ù"?',
        vowels = 'aeiou',
        rand = function(limit) {
            return Math.floor(Math.random()*limit);
        },
        i, word='', length = parseInt(length,10),
        consonants = consonants.split(''),
        vowels = vowels.split('');
    for (i=0;i<length/2;i++) {
        var randConsonant = consonants[rand(consonants.length)],
            randVowel = vowels[rand(vowels.length)];
        word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
        word += i*2<length-1 ? randVowel : '';
    }
    return word;
}
function doAlert4() {
alert( "Your word is: "+createRandomWord(4)+" (bonus points if your word is real)." );
}
</script>
<button class="3letter" onclick="doAlert3();" style="color:orange">Generate with 3 letters.</button>
<script>
function createRandomWord3(length) {
    var consonants = 'bcdfghjklmnpqrstvwxyz',
        vowels = 'aeiou',
        rand = function(limit) {
            return Math.floor(Math.random()*limit);
        },
        i, word='', length = parseInt(length,10),
        consonants = consonants.split(''),
        vowels = vowels.split('');
    for (i=0;i<length/2;i++) {
        var randConsonant = consonants[rand(consonants.length)],
            randVowel = vowels[rand(vowels.length)];
        word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
        word += i*2<length-1 ? randVowel : '';
    }
    return word;
}
function doAlert3() {
alert( "Your word is: "+createRandomWord(3)+" (bonus points if your word is real)." );
}
</script>
<h1 style="color:grey">Name Generator:</h1>
<button style="color:orange" onclick="generator();">Generate</button>
<script>
function generator(){
  
  var first = ["Kick","Stupid","Random Name","Officer","School-Related","Unoriginal","Original","Mousey","Website to name things?","n00b","Error","var first=name.first","Bob","Joe","Boris","Duck","Cheese","Pablo","Stimuli","Last Test Grade","First Word","Puss","Cat","Cherokee", "Jerry", "[Insert Weird First Name Here]"]
  var last = ["Me","Idiot","dummy.dummy","randomwordgen.net16.net (shameless advertising)","he went that way","it was him!","DESTRUCTION...","Rats","You need advice for a name, use a website or something! Oh wait.","Opposition","Apple","404 not found","var last=name.last","You sure you want to pick this name?","McGuire","Rox","Knox","Bobert","Green","Raul","Damend","Milk","Positive","Negative","Rocky","Boots","Cherry","Parakeet","[Insert Weird Last Name Here]"]

  var randomNumber1 = parseInt(Math.random() * first.length);
  var randomNumber2 = parseInt(Math.random() * last.length);
  var name = first[randomNumber1] + " " + last[randomNumber2];

  alert(name);            

  
  }
  
</script>
<h1 style="color:grey">List Randomizer</h1>
<div>
<input type="text" id="Words">
<button id="Add" onClick="appendToArray()">Add To List</button>
<script>
function appendToArray() {
var Words = document.getElementById("Words");
var Word = Words.value 
var arr = [];
arr.push(Word);
}

</script>
</div>
</body>
</html>
这是列表部分的代码: 

<h1 style="color:grey">List Randomizer</h1>
<div>
<input type="text" id="Words">
<button id="Add" onClick="appendToArray()">Add To List</button>
<script>
function appendToArray() {
var Words = document.getElementById("Words");
var Word = Words.value 
var arr = [];
arr.push(Word);
}

</script>
</div>

提前致谢!

最佳答案

这是一个示例，我们获取输入值，将其添加到数组中，对数组进行打乱，然后将其放入列表 <ul> 中。每个添加的值都会添加到数组中并重新排列列表。

试试这个:

<小时/> 编辑

当您只想随机播放而不添加新值时，我添加了随机播放功能。

var randomList = [];
function appendToArray() {
  var word = document.getElementById("Words").value;
  randomList.push(word);
  updateList(randomList);
  document.getElementById("Words").value = "";
}

function updateList(wordsArr) {
  shuffleArr(wordsArr);
  var list = document.getElementById('list');
  list.innerHTML = "";
  for (var i =0; i < wordsArr.length; i++) {
    var word = wordsArr[i];
    var li = document.createElement('li');
    li.innerText = word;
    list.appendChild(li);
  }
}

function shuffleArr(arr) {
    var j,
        x,
        i;
    for (var i = arr.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = arr[i - 1];
        arr[i - 1] = arr[j];
        arr[j] = x;
    }
}

function shuffleList() {
  var list = randomList;
  updateList(list);
}
<h1 style="color:grey">List Randomizer</h1>
<div>
<input type="text" id="Words">
<button id="Add" onClick="appendToArray()">Add To List</button>
<button id="Shuffle" onClick="shuffleList()">Shuffle List</button>
  <h3>List</h3>
  <ul id="list"></ul>

关于javascript - 如何制作列表随机发生器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41624841/

25 4 0
文章推荐： IntelliJ 和 Android Studio 中 Eclipse 的 Ctrl+1
文章推荐： android - ionic 重建自定义插件
文章推荐： programming-languages - 数学 : what is symbolic programming?
文章推荐： android - android studio中的app preDexDebug错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com