使用js的多行随机文本
我正在尝试制作一个随机文本生成器，它可以生成多行，但它总是在 HTML 页面上的同一行上（我已经尝试过了，\n但它不起作用）。
我在 Chrome 上测试了它，但如果可能的话，我可以获得一些帮助吗？
这是我使用的代码：（现场演示）
function rtg(maxChar, maxLines) {
var ranChar = "";
var count;
var alphabet = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,r,s,t,u,v,w,x,y,z,1,2,3,4,56,7,8,9,0".split(",");
for (var i = 0; i < maxLines; i++) {
var rand = null;
for (var x = 0; x < maxChar; x++) {
count++;
rand = Math.floor(Math.random() * alphabet.length);
ranChar += alphabet[rand];
if (maxChar == count) {
//this part i need help with
ranChar += '\n'
count = 0;
}
}
}
}
慕容森浏览 127回答 3
3回答
-
catspeake
\n除非您使用 css 属性white-space: pre-line（或将文本放在标签内<pre>Your Text Here</pre>），否则在 HTML 中无法识别。另一种方法（可能更好）是添加，'<br/>'而不是在'\n'您想要转到下一行时添加 -
人到中年有点甜
您可以使用“\n”在字符串中添加新行 -
陪伴而非守候
这里有一些不必要的变量，所以我稍微简化了你的代码。i是x你的计数，所以你实际上不需要变量count。如果您将其放入页面的 HTML 中，您还应该使用<br/>而不是。\nfunction rtg(maxChar, maxLines) { var lines = ""; for(var i = 0; i < maxLines; i++) { if(i > 0) lines += "<br/>"; for (var x = 0; x < maxChar; x++) lines += rando("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnoprstuvwxyz1234567890"); } return lines;}window.addEventListener("load", function(){ document.getElementById("result").innerHTML = rtg(12, 5);});<script src="https://randojs.com/1.0.0.js"></script><div id="result"></div>此代码使用randojs.com来简化随机性，因此如果您想使用此代码，只需确保 html 文档的 head 标记中有此代码：<script src="https://randojs.com/1.0.0.js"></script>回复您的评论：如果你想链接自己的外部js文件，你可以在同一目录下创建两个文件：1个html文件和1个名为“script.js”的js文件。在 HTML 文件中，使用以下内容作为 HTML 代码：<html> <head> <script src="https://randojs.com/1.0.0.js"></script> <script src="script.js"></script> </head> <body> <div id="result"></div> </body></html>在 script.js 文件中，使用以下内容：function rtg(maxChar, maxLines) { var lines = ""; for(var i = 0; i < maxLines; i++) { if(i > 0) lines += "<br/>"; for (var x = 0; x < maxChar; x++) lines += rando("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnoprstuvwxyz1234567890"); } return lines;}window.addEventListener("load", function(){ document.getElementById("result").innerHTML = rtg(12, 5);});这已经过测试并且工作正常。
随时随地看视频慕课网APP
相关分类
Html5