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> |
replaceが1個だけしか置き換えないの忘れてたくさい
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
あと半角スペースもね
まとめられるとアレだからtextareaかpreって感じ
まぁdivでもcssのwhite-spaceでpre指定すればいいのだけど何か挙動に納得いかないことがあった気がしたから