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

Question

我在创建一种简单的方法来动态地将 ascii 艺术添加到实际的 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 模板文字中编写代码，可能会容易得多，这样您就不必担心所有的串联和换行符，您可以简单地创建 art 字符串。用于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;
}