JavaScript【 サンプル 】4 ~ 表示関連の記述方法

People Using Electronic Devices With Chat Bubbles Social Network Communication Flat Vector Illustration

JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript の 表示関連の記述方法についてのサンプルを紹介します。

目次

 
1.アラート表示
2.テキストボックスに表示
3.任意の場所に表示
4.時計を表示

1.アラート表示

 
このサンプルは、入力内容をアラート表示させるサンプルです。
メッセージを入力して 表示ボタンをクリックしてみて下さい。

 

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {

    alert(document.getElementById("dat").value);
}
//-->
</script>

<div style="background-color : #CCC;">
    <div style="display:inline-flex; align-items: center;">
        <input type="text" id="dat" placeholder="メッセージを入力して下さい。"> 
        <input type="button" value="表示" onClick="disp()">
    </div>
</div>

 
固定のメッセージや変数を表示させるだけであれば、「 alert(“メッセージ”); 」「 alert(変数); 」の記述のみでOKです。

▲目次へ戻る

 

2.テキストボックスに表示

 
このサンプルは、入力内容をテキストボックスに表示させるサンプルです。
上のテキストボックスにメッセージを入力して 表示ボタンをクリックしてみて下さい。


  
 
 

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {

    document.getElementById("dat2").value 
    = document.getElementById("dat1").value;
}
//-->
</script>

<div style="background-color : #CCC;">
    <input type="text" id="dat1" placeholder="メッセージを入力して下さい。">
    <input type="button" value="表示" onClick="disp()">
    <input type="text" id="dat2" placeholder="ここに表示されます。"> 
</div>

▲目次へ戻る

 

3.任意の場所に表示

 
HTML要素の中身を書き換えることができる innerHTML プロパティを使用して、任意の場所にテキストを表示させることができます。

このサンプルは、入力内容を表示ボタンの下に表示させるサンプルです。
メッセージを入力して 表示ボタンをクリックしてみて下さい。

 

 

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {

    document.getElementById("dat2").innerHTML 
    = document.getElementById("dat1").value;
}
//-->
</script>

<div style="background-color : #CCC;">
    <input type="text" id="dat1" placeholder="メッセージを入力して下さい。"> 
    <input type="button" value="表示" onClick="disp()">
    <div id="dat2"></div> 
</div>

▲目次へ戻る

 

4.時計を表示

 
デジタル時計を表示してみます。

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    var fm = function(num) {
        num += "";
        if (num.length == 1) {
            num = "0" + num;
        }
        return num;     
    };

    var dt = new Date();
    var yea = dt.getFullYear();
    var mon = fm(dt.getMonth() + 1);
    var day = fm(dt.getDate());
    var hou = fm(dt.getHours());
    var min = fm(dt.getMinutes());
    var sec = fm(dt.getSeconds());

    document.getElementById("dat").value 
    = yea + "/" + mon + "/" + day + " "
      + hou + ":" + min + ":" + sec;
}
setInterval("disp()",1000);
// -->
</script>

<div style="background-color : #CCC;">
    <input type="text" id="dat"">
</div>

 
現在日時を取得して表示する disp 関数と 処理間隔1000(ミリ秒)を「 setInterval(“disp()”,1000); 」と指定して、1 秒( 1000ミリ秒 )毎に現在日時を取得して表示しています。

上記 disp 関数の内容については、JavaScript【 Date 】4 ~ setIntervalでリアルタイム表示をご参照下さい。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です