Last active
September 15, 2016 11:16
-
-
Save neetsdkasu/185b21a7a01e3d839b25fc22a1a7b135 to your computer and use it in GitHub Desktop.
コンソール風（風なだけ）
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head><meta charset="utf8" /> | |
| <title>Console Like</title> | |
| <style type="text/css"> | |
| body { background-color: gray; } | |
| h1 { text-align: center; color: yellow; } | |
| pre.myconsole { text-align: left; margin: auto; background-color: black; color: white; width: 480px; height: 320px; overflow: auto; } | |
| input.myinput { width: 410px; } | |
| div.formouter { text-align: center; } | |
| </style> | |
| <script type="text/javascript"> | |
| replaceEntities = (function () { | |
| var amp_ = decodeURIComponent("%26"); | |
| var lt_ = decodeURIComponent("%3c"); | |
| var gt_ = decodeURIComponent("%3e"); | |
| var quot_ = decodeURIComponent("%22"); | |
| var apos_ = decodeURIComponent("%27"); | |
| var entAmp = amp_ + "amp;" ; | |
| var entLt = amp_ + "lt;" ; | |
| var entGt = amp_ + "gt;" ; | |
| var entQuot = amp_ + "quot;"; | |
| var entApos = amp_ + "apos;"; | |
| var rgexAmp = new RegExp(amp_ , "g"); | |
| var rgexLt = new RegExp(lt_ , "g"); | |
| var rgexGt = new RegExp(gt_ , "g"); | |
| var rgexQuot = new RegExp(quot_, "g"); | |
| var rgexApos = new RegExp(apos_, "g"); | |
| function replaceEntities(s) { | |
| return s | |
| .replace(rgexAmp , entAmp ) | |
| .replace(rgexLt , entLt ) | |
| .replace(rgexGt , entGt ) | |
| .replace(rgexQuot, entQuot) | |
| .replace(rgexApos, entApos); | |
| } | |
| return replaceEntities; | |
| })(); | |
| function clearConsole() { | |
| var t = document.getElementById("myconsole"); | |
| t.innerHTML = ''; | |
| } | |
| function printOnConsole(s) { | |
| var t = document.getElementById("myconsole"); | |
| t.innerHTML += s; | |
| t.scrollTop = t.scrollHeight; | |
| t.scrollLeft = 0; | |
| } | |
| function printlnOnConsole(s) { | |
| printOnConsole(s + "\n"); | |
| } | |
| function inputToConsole() { | |
| var a = document.getElementById("myinput"); | |
| processByInput(a.value); | |
| printPrompt(); | |
| a.value = ""; | |
| a.focus(); | |
| } | |
| function printPrompt() { | |
| printOnConsole("USER:&" + "gt; "); | |
| } | |
| function processByInput(s) { | |
| if (s === ':clear') { | |
| clearConsole(); | |
| } else { | |
| printlnOnConsole(replaceEntities(s)); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>CONSOLE LIKE</h1> | |
| <div class="formouter"> | |
| <pre id="myconsole" class="myconsole">USER:> </pre> | |
| <form action="" onsubmit="return false"> | |
| <div> | |
| <input id="myinput" class="myinput" type="text" /> | |
| <button class="mysubmit" type="submit" onclick="inputToConsole();">Send</button> | |
| </div> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
textarea -> div -> pre
と変化してきたわけだが
preか
エンティティをがんばるくらいならスクリプトタグ内をコメントで囲めばいいのにという
コメントタグな
囲むじゃなくて
コメントタグ内部に書くな
textarea.value -> div.appendChild -> pre.innerHTML と来たわけだが
色出したいからね span で囲んで色付けできるし
あと半角スペースもね
まとめられるとアレだからtextareaかpreって感じ
まぁdivでもcssのwhite-spaceでpre指定すればいいのだけど何か挙動に納得いかないことがあった気がしたから
replaceが1個だけしか置き換えないの忘れてたくさい
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
まーた車輪の何チャラ