2014年01月01日

タイプライター風文字 ニュースティッカー javascript

スポンサード リンク

 Javascript メッセージを左から1文字ずつ表示する ニュースティッカー
String.substring(); setTimeout();

指定した文字列を左から、最初は1文字、次に2文字、3文字、4文字…と抽出して
表示していき、文字列すべてが標示されると 一定時間停止した後、逆に一文字ずつ
減らしながら左にスクロールして行きます。

イオンのオンラインショッピングサイト 〜 おうちでイオン イオンショップ 〜
コロリポプラン 詳細はこちら
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>タイプライター風文字 ニュースティッカー javascript</title>
 <style type="text/css">
#msgBox{
    padding-left: 20px; /* 左余白 */
    border: 1px solid green; /* ボーダー : 幅,線種,色 */
    border-radius: 12px; /* 角丸ボーダー */
    background:linear-gradient(white, #eaeaec); /* 色の線形グラデーション */
  overflow: hidden; /* はみ出た部分を表示しない */
    line-height: 30px; /* 行の高さ */
    height: 30px; /* 表示ボックスの高さ */
    width: 550px;  /* 横幅 */
    font-size:16px;  font-weight:bold;  color:gray;
      }
#msgBox a:link{
    display:block;
    text-decoration:none;  color:blue;
      }
#msgBox a:hover{
   text-decoration:underline;  color:#e4007e;
     }
</style>
<script>
var newsItem = [ // 表示する["項目"と "URL"],
 ["タイプライターのように一文字ずつ打ち出し表示。","http://yahoo.co.jp/"],
 ["文字色や表示スピードなどは自由に変更できます。","http://yahoo.co.jp/"],
 ["JavaScript スタイルシートサンプル集  o(^-^)o","http://yahoo.co.jp/"],
 ["Javascript 垂直にスクロール ニュースティッカー","http://yahoo.co.jp/"],
  ];
var i = 0;
var j;
var txtLen=newsItem.length;  // 表示するアイテム(項目)の数 4
var delay=3000;  // 次のメッセージに切り替わるまでの静止時間
var typeSpd=30;  // 表示速度
window.onload =function(){newsTicker();}
function newsTicker() {
  Str = newsItem[i][0];  // 表示する項目, i が 0なら一番目
 URL=newsItem[i][1];   // 表示する項目の URL
  i = ( i == txtLen-1 ) ? 0 : i+1;// 三項演算子
   j = 0;
 typeText();
    }
function typeText(){ // 一文字ずつ表示
 j++;
  mBox=document.getElementById("msgBox");
                //Str.substring(開始位置,終了位置).link(URL);
  mBox.innerHTML =Str.substring(0,j).link(URL);
(j<=Str.length)?setTimeout("typeText()",typeSpd):
 setTimeout("delText()",delay);
   }

function delText(){ // 一文字ずつ消去
 cnt = Str.length;  // 項目の文字数
Str=Str.substring(1,cnt);
 mBox.innerHTML = Str;
(cnt > 0) ? setTimeout("delText()",typeSpd):
 setTimeout("newsTicker()",delay/2);
    }
</script>
</head>
<body>
<div id="msgBox"></div>
</body>
</html>
三項演算子
 変数 = (条件式) ? (真の場合の処理) : (偽の場合の処理)
  i = ( i == txtLen ) ? 0 : i+1; // i =0, の場合
 i  と txtLen の値が等しくなければ、 i に 1を加算していき、等しくなれば i を 0 にします。
Str.length
  文字列 Str の 文字数を取得します。
Str="タイプライター"; 
Str.length;  // 7 になります。
文字列の長さ(文字数)を取り出す。 length プロパティ
Str.substring(開始位置,終了位置)メソッド
  開始位置から終了位置までの文字を抽出します。
開始位置は 0から、終了位置は 1から数えた位置になりますので、ご注意を!!
Str="タイプライター"; とすると
Str.substring(0,3)で、"タイプ"を
Str.substring(1,4)で、"イプラ"を 取り出します。これを使い, 開始位置を 0 で
終了位置を文字数(Str.length)まで 1 ずつ増やして, 先頭から一文字ずつ表示していきます。
  指定した範囲内の文字を抜き出します。substring()メソッド
setTimeout()メソッド
 setTimeout("func()",msec) は ミリ秒で指定した遅延時間 (msec) の経過後に
指定した処理を行います。 func には処理する関数名を記述します。
setTimeoutメソッド , clearTimeoutメソッド
Str.link(URL)メソッド
 Str オブジェクトからのハイパーリンクを生成します。
引数 URL にはアンカー タグ <a> のHREF属性に入れる文字列 "URL"を指定します。
 Str = "JavaScript スタイルシートサンプル集";
 URL = "http://javascript123.seesaa.net/"
 Str.link(URL);

これを実行すると次のようなHTMLになります。
<a href = "http://javascript123.seesaa.net/">
 JavaScript スタイルシートサンプル集</a>

JavaScript スタイルシートサンプル集
posted by javaScript at 22:37 | 大阪 ☁ | DOM | このブログの読者になる | 更新情報をチェックする

2013年12月06日

appendChild()メソッド DOM 要素の移動 (追加、削除)

スポンサード リンク

 appendChild(child)メソッド
'child' ノードを 元の場所から、新しい位置に移動します。


さあ これをどのように活用しましょうか? 上に流れるテロップでも 作ってみますか.....

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>appendChild()メソッド DOM 要素の移動 (追加、削除)</title>
 <style type="text/css">
  <!--
#ticKer{
    border: 1px solid gray; /* ボーダー : 幅,線種,色 */
    border-radius: 12px; /* 角丸ボーダー */
    width: 500px;  /* 横幅 */
    background:linear-gradient(white, #eaeaec); /* 色の線形グラデーション */
	 }
#ticKer ul{
    padding-left: 30px; /* 内側余白 左 */
    margin: 0 auto; 
	 }
 #ticKer li{
   list-style-type: none; /* リストマーク なし */
   padding: 7px;
   padding-left: 30px;
   color: blue;
   font-weight: bold;
   font-size: 16px;
	}
#ticKer li span{
  font-weight: bold;
  color:red;
      }
-->
</style>
<script>
 <!--//javascript123
       // Li要素 追加,削除
function cngLi(){
 var element= document.getElementById("ulArea"); // 親ノード
 var liList = element.getElementsByTagName("li"); // "li"要素を参照
 var child = liList[0]; // 追加するノード, 最初のリスト項目 "li" 
  element.appendChild(child); // 子ノードとして末尾に追加するメソッド
       }

     // 一行表示切替
   var num = 0;
   var divHeight=35;
 function cngDsp(){ num ^= 1; // //トグルスイッチ 0と1の切り替え ^ 排他的論理和
  if(num == 1){var scroller = document.getElementById("ticKer");
    scroller.style.overflow = "hidden";
     scroller.style.height= divHeight+"px";
           }
   else { scroller = document.getElementById("ticKer");
           scroller.style.overflow = "show";
            scroller.style.height="";
              }
        }
  -->
</script>
</head>
<body>
  <div id="ticKer">
   <ul id="ulArea">
    <li><span>1 </span><a href="#">DOM(Document Object Model)</a></li>
    <li><span>2 </span><a href="#">動く文字 ティッカー 電光掲示板</a></li>
    <li><span>3 </span><a href="#">Javascript 構文 関数 ステートメント</a></li>
    <li><span>4 </span><a href="#">日付 時刻 時計</a></li>
    <li><span>5 </span><a href="#">レンタル サーバー</a></li>
 </ul>
</div>
<p>
<button onclick="cngLi()" style="margin-left : 50px;">要素の移動</button>
<button onclick="cngDsp()" style="margin-left : 50px;">一行表示 / 解除</button>
</p>
</body>
</html>
element.appendChild(child)メソッド
 element.appendChild(child)は、「element」に指定した親要素の子ノードリストの末尾に
引数「child」に指定したノードを追加するメソッドです。
追加するノード(child)が既にHTML文書内に存在しているノードであれば、指定した位置に追加され
元の場所にあったノードはremoveChild()する必要もなく削除されます。
-追加、削除- で 実質 移動した事になります。
上記サンプルでは一番上のリスト項目にappendChild(child) を指定しているので
ボタンを押すたびに末尾に移動し、二行目が上に繰り上がります。
タグ:appendChild
posted by javaScript at 17:51 | 大阪 ☀ | DOM | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。