[英]ASCII art on website
我正在嘗試使用 JavaScript 函數在我的網站上獲取一些 ASCII 藝術,但結果不是我現在正在尋找的......
這是它的外觀:
這是我用來嘗試實現這一目標的代碼:
function log( text ) { $log = $('#log'); //Add text to log $log.append(($log.val()?"":'')+ text ); //Autoscroll $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight; } log('<div style="font-family: monospace; white-space: pre;">' + " _______ <br>" + " |__ __| <br>" + " | | ___ _ __ ___ _ __ ___ _ _ <br>" + " | |/ _ \\| '_ ` _ \\| '_ ` _ \\| | | |<br>" + " | | (_) | | | | | | | | | | | |_| |<br>" + " |_|\\___/|_| |_| |_|_| |_| |_|\\__, |<br>" + " __/ |<br>" + " |___/ <br>" + "<br>" + "</div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="log"></div>
希望你們想出比我更好的結果,因為這對我現在根本不起作用。
您必須注意,在字符串中,如果要打印 '\\' 字符,則必須使用 '\\\\' 代替 :)
function log( text ) { $log = $('#log'); //Add text to log $log.append(($log.val()?"":'')+ text ); //Autoscroll $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight; } log('<div style="font-family: monospace; white-space: pre;">' + " _______ <br>" + " |__ __| <br>" + " | | ___ _ __ ___ _ __ ___ _ _ <br>" + " | |/ _ \\\\| '_ ` _ \\\\| '_ ` _ \\\\| | | |<br>" + " | | (_) | | | | | | | | | | | |_| |<br>" + " |_|\\\\___/|_| |_| |_|_| |_| |_|\\\\__, |<br>" + " __/ |<br>" + " |___/ <br>" + "<br>" + "</div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="log"></div>
HTML <pre>
標簽可以作為替代解決方案嗎? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
編輯:如果您打算在 JS 字符串中使用反斜杠,則確實需要轉義反斜杠,如評論和其他答案所述。
pre
實時示例:
<pre > ______ < Moo! > ------ \\ ^__^ \\ (oo)\\_______ (__)\\ )\\/\\ ||----w | || || </pre>
在 ECMAScript 6 中, 模板字符串使用模板標記函數String.raw()
來拯救:
function log(text) { $log = $('#log'); //Add text to log $log.append(($log.val() ? "" : '') + text); //Autoscroll $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight; } log('<div style="font-family: monospace; white-space: pre;">' + String.raw ` _______ <br>` + String.raw ` |__ __| <br>` + String.raw ` | | ___ _ __ ___ _ __ ___ _ _ <br>` + String.raw ` | |/ _ \\| '_ ' _ \\| '_ ' _ \\| | | |<br>` + String.raw ` | | (_) | | | | | | | | | | | |_| |<br>` + String.raw ` |_|\\___/|_| |_| |_|_| |_| |_|\\__, |<br>` + String.raw ` __/ |<br>` + String.raw ` |___/ <br>` + "<br>" + "</div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="log"></div>
(不幸的是,我不得不用 m 中的單引號替換兩個反引號才能使其正常工作)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.