Output Text to the Page

Clockと同じくマイクロソフトのDHTMLサンプルページにあったやつに似て....無いか全然(笑)
あちらに比べるとボタンをでかくしてCross-Browserにしたところなどがかなりりっぱになってます(^^)v。

下のＳＯＵＲＣＥの中の
*まずこの色の部分を書き換えて遊んでみましょう（＾＾）／
*IEでcopyすると行が崩れてしまうことがあります^^;。copyをやり直すか修正して使ってください。
*copy中にscrollが止まった時は下矢印キ－を押しながらcopyすると動きます。
*レイヤ－を作るにはこのサンプルのようにレイヤ－をdocument.write('<div....で書いてそれをif(document.layers||document.all){DHTML用命令}else{DHTML非対応ブラウザ用命令} で括っておくとNN３やIE3などのDHTML非対応ブラウザからゴミがみえなくなります。



<html>
<head>
<title></title>

<style type="text/css">
<!--

/***
 * Style for output words---------------------------------------------------
 */

  .input  {    font-size:50px;
               font-weight:100
  }

-->
</style>

</head>
<body bgcolor="#6699ff" onLoad="ini()">

<script>
<!--

/***
 * Make Layers-------------------------------------------------------
 */

if(document.layers||document.all){

  var lay=''

  lay += '<div id="dmy0" style="position:absolute;top:0;left:0;'
  lay += '               visibility:hidden"></div>'

  lay += '<div id="msg0" style="position:absolute;'
  lay += '                      top:50;left:100;'
  lay += '                      font-size:18px;'
  lay += '                      font-weight:900;'
  lay += '                      color:#ffffff">'
    lay += '<font FACE="Osaka,MS PGothic">'
    lay += '<font color="yellow">入</font>'
    lay += '力後クリックしてみてください。</font>'
    lay += '<form NAME="f0">'
      lay += '<font face="Osaka,MS PGothic">'
      lay += '<input class="input" NAME="e0" type="text" '
      lay += '       SIZE="20" value="サンプル">'
      lay += '</font>'
      lay += '<br>'
      lay += '<font face="Osaka,MS PGothic">'
      lay += '<input class="input" NAME="e1" type="button"'
      lay += '       value="output!" onClick="outputMsg()" >'
      lay += '</font>'
    lay += '</form>'
  lay += '</div>'

  lay += '<div id="out" class="output" '
  lay += '     style="position:absolute;top:260;left:120"></div>'

  document.write(lay)
}

/***
 * Functions for Cross-Browser---------------------------------------
 */

function outputLAYERoj(oj,html){
  if(document.layers) {
       oj.document.open()
       oj.document.write(html)
       oj.document.close();
  }
  if(document.all){
      oj.innerHTML=html
  }
}

/***
 * onClick-----------------------------------------------------------
 */

function outputMsg(){
    inpwd ='<span style="font-family:Osaka,Arial;font-size:70px;'
    inpwd+='             font-weight:900;color:pink">'+inpFom.value
    inpwd+='</span>'
    outputLAYERoj(outLay,inpwd)
}

/***
 * ini---------------------------------------------------------------
 */

var inpLay
var inpwd=''

function ini(){
    if(document.layers){
        inpFom=document.layers.msg0.document.f0.e0
        outLay=document.layers.out
    }
    if(document.all){
        inpFom=document.f0.e0
        outLay=document.all.out
    }
}

<!---->
</script>


<!--DHTML未対応ブラウザ用のメッセ－ジ-->
<div id="NODHTML" style="position:absolute;top:0;left:0;visibility:hidden">
このぺ－ジはなるべくDHTMLを解釈できるブラウザ(Netscaoe4 or IE4 以上)でご覧ください。
<div>

</body>
</html>