2014/4/3 先頭を指定して表示できるようにしましたので、通常の漢字エリアも表示できます。また、その位置から320文字を実際に取得するウインドウを開くようにしました。 さらに、文字の下には以下の3つのデータを付加しました 1) HTMLエンティティ 2) その１６進表現 3) 実際の UTF-8 のコードの １６進表現 フリーフォントのオリジナル文字を割り当てている場所を拾い出す作業の為に最適化しました。『はらませにゃんこ』というフリーフォントが GIGAZINE で紹介されていたので、『フリーフォントで簡単ロゴ作成』に登録したのですが、武蔵システムの TTEdit で内部を確認すると、説明されていない文字も結構あったので、全て拾い出すのに、16進数の表現が必要になるのと、実際の文字を取得する都合があったので、このような最適化になりました。 ▼ 『はらませにゃんこ』
<style>
.cbtn {
width: 104px;
}
</style>
<script type="text/javascript">
function getCode(n) {
n = parseInt(n);
var __a = "";
for( i = n; i <= n+319; i++ ) {
__a += "&#"+i+";";
}
window.open("about:blank", "", "width=600,height=350").document.write("<textarea style=\"width:500px;height:300px;\">" + __a + "</textarea>");
}
function writeCode(n) {
n = parseInt(n);
document.getElementById("target_no").value = n;
var doc = document.getElementById("areaCode").contentWindow.document;
doc.open();
var str="";
str+="<style type=\"text/css\"> \n";
str+=".sphtml td { \n";
str+=" font-size:36px; \n";
str+=" font-family: \"ヒラギノ角ゴPro W3\",\"メイリオ\"; \n";
str+="} \n";
str+=".spc { \n";
str+=" font-size:9px; \n";
str+="} \n";
str+=".sphtml table { \n";
str+=" border-collapse: collapse; \n";
str+=" border-style: solid; \n";
str+=" border-color: #000000; \n";
str+=" border-width: 1px; \n";
str+=" background-color: #FFFFFF; \n";
str+="} \n";
str+=".sphtml td { \n";
str+=" padding: 5px; \n";
str+=" border-style: solid; \n";
str+=" border-color: #000000; \n";
str+=" border-width: 1px; \n";
str+=" white-space: nowrap; \n";
str+="} \n";
str+=" \n";
str+="</style> \n";
doc.write(str);
doc.write("<div class=sphtml>");
doc.write("<table>");
doc.write("<tr>");
var cnt = 1;
var _x;
for( i = n; i <= n+999; i++ ) {
_x = String.fromCharCode(i);
_x = encodeURIComponent(_x)
_x = _x.replace(/%/g,"")
doc.write("<td>&#"+i+";<br><span class='spc'>&#"+i+";</span><br><span class='spc'>"+i.toString(16).toUpperCase()+"</span><br><span class='spc'>"+_x+"</span></td>")
if ( cnt % 10 == 0 ) {
doc.write("</tr><tr>");
}
cnt++;
}
doc.write("</table>");
doc.write("</div>");
doc.close();
document.getElementById("areaCode").style.height = Math.max(doc.documentElement.scrollHeight,doc.body.scrollHeight)+'px';
}
</script>
<input class="cbtn" type="button" value="1〜1000" onclick='writeCode(1)'>
<input class="cbtn" type="button" value="1001(3E9)〜" onclick='writeCode(1001)'>
<input class="cbtn" type="button" value="2001(7D1)〜" onclick='writeCode(2001)'>
<input class="cbtn" type="button" value="3001(BB9)〜" onclick='writeCode(3001)'>
<input class="cbtn" type="button" value="4001(FA1)〜" onclick='writeCode(4001)'>
<input class="cbtn" type="button" value="5001(1389)〜" onclick='writeCode(5001)'>
<br>
<input class="cbtn" type="button" value="6001(1771)〜" onclick='writeCode(6001)'>
<input class="cbtn" type="button" value="7001(1B59)〜" onclick='writeCode(7001)'>
<input class="cbtn" type="button" value="8001(1F41)〜" onclick='writeCode(8001)'>
<input class="cbtn" type="button" value="9001(2329)〜" onclick='writeCode(9001)'>
<input class="cbtn" type="button" value="10001(2711)〜" onclick='writeCode(10001)'>
<input class="cbtn" type="button" value="11001(2AF9)〜" onclick='writeCode(11001)'>
<br>
<input class="cbtn" type="button" value="12001(2EE1)〜" onclick='writeCode(12001)'>
<input class="cbtn" type="button" value="13001(32C9)〜" onclick='writeCode(13001)'>
先頭番号 <input id="target_no" class="cbtn" type="text"> <input class="cbtn" type="button" value="この番号から" onclick='writeCode(document.getElementById("target_no").value)'> <input type="button" value="文字一覧取得(320)" onclick='getCode(document.getElementById("target_no").value)'>
<br>番号指定は、16進数を入力できます( 例: 0x1234 )
<br>
<iframe
id="areaCode"
frameborder="0"
scrolling="yes"
width="650"
height="1"
></iframe>
<script>
writeCode(12832);
</script>
▼ 実行
先頭番号
番号指定は、16進数を入力できます( 例: 0x1234 )
関連する記事
|
|
【JavaScript コンテンツの最新記事】
- jQuery の ajax でアクセス可能なデータをボタンをクリックした後 window.open で開いたウインドウの中にテキストエリアを作成して表示する方法
- IFRAME を ブラウザのサイズ変更時のイベントでコントロールして、HTML5で廃止された FRAME と同様に使うサンプル
- JavaScript : DIV 内に時間範囲のボックスを表示する処理
- jQuery/JavaScript : 存在しない可能性のある画像の代替表示
- JavaScript による、時間範囲の表現( 出退勤等 )
- Twitter 縦書き intent
- スマホでYouTubeの埋め込みの表示サイズをJavaScriptでコントロールする
- IFRAME で埋め込んだ外部コンテンツから情報を取得する事ができる postMessage インターフェイス
- WEB フォントを使った「フェードイン、フェードアウト」
- JS : テキストエリア内の選択文字列の置き換え
- IE限定、ローカルファイル参照フィールドを使ったトリック
