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框的字体取决于浏览器（仅浏览器）-无法通过Java脚本更改。如果用户的浏览器碰巧使用了等宽字体，则可以使用该字体，否则，它将看起来像一团糟。

请考虑使用比alert更用户友好和可自定义的内容，例如页面上的实际元素（您可以调整其字体，而不会被 block 屏蔽）。< / p>

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

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

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

1 个答案: