是否可以将ASCII艺术添加到javascript弹出窗口？

Question

我在创建一个简单的方法来动态添加ascii art到实际的javascript确认弹出窗口时遇到了问题。 我相信很多人都喜欢..为什么>！> @！ 那个..我说..因为;）

现在我可以做一行或两个工作，但每次我写一些ascii艺术，它非常独特..所以..谁能想到一个可能使它更容易的功能？

这是我得到的最接近的一个例子。 （这不是很远）

<? 
$rusure = "\n"; 
$rusure =. "   __           __                  ___  \n";
$rusure =. "  /__\  /\ /\  / _\_   _ _ __ ___  / _ \ \n";
$rusure =. " / \// / / \ \ \ \| | | | '__/ _ \ \// / \n";
$rusure =. "/ _  \ \ \_/ / _\ \ |_| | | |  __/   \/  \n";
$rusure =. "\/ \_/  \___/  \__/\__,_|_|  \___|   ()  \n";
$rusure =. "                                         \n";
?>

<button type="button" onclick="if(confirm('Are you sure you want to Delete this?\nIt will be GONE FOREVER.. and there is no undo..<?=$rusure?>')){ document.location.href='' }">DELETE FOREVER</button>

Answer 1

如果您在Javascript模板文字中编写代码可能会容易得多，这样您就不必担心所有连接和换行，您只需创建艺术字符串即可。 使用String.raw确保反斜杠被解释为文字反斜杠而不是转义字符：

 const artStr = String.raw` __ __ ___ xx /__\\ /\\ /\\ / _\\_ _ _ __ ___ / _ \\yy / \\// / / \\ \\ \\ \\| | | | '__/ _ \\ \\// /xx / _ \\ \\ \\_/ / _\\ \\ |_| | | | __/ \\/ yy \\/ \\_/ \\___/ \\__/\\__,_|_| \\___| () xx `; alert(artStr); 

也就是说，实际效果不可靠，因为alert框的字体取决于浏览器（仅限浏览器） - 它不能通过Javascript更改。 如果用户的浏览器恰好使用等宽字体，它可能会起作用，但除此之外，它看起来就像一团糟。

考虑使用比alert更加用户友好和可自定义的内容，例如页面上的实际元素（您可以调整其字体，哪些不会阻止 ）。

 const artStr = String.raw` __ __ ___ xx /__\\ /\\ /\\ / _\\_ _ _ __ ___ / _ \\yy / \\// / / \\ \\ \\ \\| | | | '__/ _ \\ \\// /xx / _ \\ \\ \\_/ / _\\ \\ |_| | | | __/ \\/ yy \\/ \\_/ \\___/ \\__/\\__,_|_| \\___| () xx `; const makeCustomAlert = str => { const container = document.createElement('div'); container.className = 'customAlert'; str = str .replace(/ /g, ' ') .replace(/\\\\/g, '\') container.innerHTML = str; document.body.appendChild(container); container.onclick = () => container.remove(); }; makeCustomAlert(artStr); 

 .customAlert { font-family: "consolas"; background-color: yellow; white-space: pre-wrap; }