javascript - <p> 仅显示最后分配的值

标签 javascript html

我有一个代码,其中我尝试通过随机化字符(暴力破解字符串)来获得所需的字符串(“嘿!”),并在 <p> 中显示所有步骤。 (下一步覆盖前一步)。然而,问题是在 #first ,只显示排列的最后一步(“嘿!”)。

为什么不一一显示所有步骤,只显示最后一步?对于该问题的任何帮助,我将不胜感激。

注意:在控制台中,所有步骤都会被记录下来。我还尝试在 <p> 中输出字符串与 timeout ;什么都没有改变。

必须是什么的示例: https://i.imgur.com/fNjhjUS.gif

这是我的 Javascript 代码和 HTML:

var fline = ["H", "e", "y", "!"];
    temp_fline = [" ", " ", " ", " "],
    index = 0,
    possible = "!abc!defghijklmnopqrstuvwxyz!ABCDEFGHIJKLMNOPQRSTUVWXYZ!";

while (index < 4)
{
    if (fline[index] != temp_fline[index])
        temp_fline[index] = possible[Math.round(Math.random() * 57)];

    if (fline[index] == temp_fline[index])
        ++index;

    var tempString = "";
    for (var i = 0; i < 4; ++i)
        tempString += temp_fline[i];

    console.log(tempString);
    document.getElementById("fline").innerHTML = '> ' + tempString;
}
<html>
<body>
    <div id="first">
        <br>
        <p id="fline"></p>
        <br><br><br>
        <p id="sline"></p>
        <br><br><br>
        <p id="tline"></p>
        <br><br><br>
        <p id="fhline"></p>
    </div>
</body>
</html>

最佳答案

想要那样吗?

	var fline = ["L", "i", "k", "e", " ", "t", "h", "i", "s", "?"], count = 0, index = 0, flist = [],
    possible = "!abc!?defghijklmnopqrstuvwxyz!ABCDEFGHIJKLMNOPQRSTUVWXYZ! ";

	let found = document.getElementById("found");
	let checking = document.getElementById("checking");
	
	let timer = setInterval(function ()
	{
		if (index >= fline.length)
		{
			console.log(flist);
			clearInterval(timer);
			checking.innerText = "";
			flist = [];
		}
		else
		{
			if (fline[index] == possible[count])
			{
				found.innerText += possible[count];
				flist.push(possible[count]);
				index++; count = 0;
			}
			else
			{
				checking.innerText = possible[count];
				count++;
			}
		}
	}, 24);
<div><b id="found"></b><i id="checking"></i></div>

关于javascript - <p> 仅显示最后分配的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51181162/

相关文章:

html - pug - 编译后嵌套不正确 - 包含与扩展

javascript - 查找包含选择器 id + 文本的元素

javascript - Bootstrap Carousel Caption 在转换完成后移动

Javascript 警报 - 删除 "The page at ??? Says"

javascript - 我可以将 jQuery 与 Javascript 结合使用吗?

javascript - 阻止 js 函数在已经执行时执行

javascript - 使用 Javascript Scrapy 登录重定向站点

php - 在不提交的情况下保存和加载表单中的数据

javascript - 客户端和服务器端编程有什么区别?

html - 右对齐表格