2012年11月12日

javascript ウェーブする文字列

スポンサード リンク

 テキストを表示するときウェーブさせます。

ようこそ サンプル集へ

 文字のサイズを少しずつ変更(縮小、拡大)して一文字ずつ表示しています。
このサンプルは、ウェーブ文字列を三回繰り返し表示を行い
文字色を変更しています。テキストを注目させたいときに利用するといいですね!

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
  <title>javascript ウェーブする文字列</title>
<style type="text/css">
<!--
  #moji{
    border:double 3px #760014;
    border-width:3px 0px;
    padding:5px;
    font-family :HGS創英角ポップ体;
    font-size : 26px;
    color : purple;
  }
-->
</style>

<script language="JavaScript">
<!--javascript123

            //ウェーブ させるテキスト。
var msg="ようこそ サンプル集へ。文字が ウェーブします。    ";

var clr = new Array("red", "lime", "navy");//文字色
var flag=true;
var Fsize=26; // 最初のフォントサイズ。
var v=Fsize;  // フォントサイズの変数。
var dspN=3;   // 文字列表示繰り返し回数。
var dsp=0;    // 文字列表示回数カウント。

var i = 0;  // 文字列msg の取り出す文字位置。 
var tag="";
var syuki = 5; // ウェーブの周期。
var cnt=0;  // syukiのカウント。

function wave(){
 tag=tag+"<span style='font-size:"+v+"px; color :"+clr[dsp]+"';>"
  +msg.charAt(i)+"</span>";
   Tbox=document.getElementById("moji");
    Tbox.innerHTML =tag;

i++;
cnt++;
cnt = cnt % syuki;  // 剰余算演算子:cntをsyukiで割った余り。
  if(flag){v=v-2;} // フォントサイズ変更:小さく。
   else{v=v+2;} // 大きく。

if(i>msg.length){ // msg の文字数。ウェーブ表示が終わったら。
 tag="";
 i=0;
 cnt=0;
 v=Fsize;
 flag=false;
 dsp++;

if(dsp==dspN){ //ウェーブ表示の繰り返し回数に達したら。
 End();return }
  }

if(cnt==0){
 flag=!flag; // true と false の切り替え, ! 否定演算子。
  }

Timer=setTimeout("wave()",200);
    }

function End(){ //テキスト、ウェーブ表示終了。
 tag="";  //全て表示されたら、空文字に戻す
 cnt=0;
 v=Fsize;
 dsp=0;
 flag=true;
      clearTimeout(Timer);
   }
// -->
</script>

</head>
<body>
<div>
 <div id="moji">ようこそ サンプル集へ</div>
  <form><input type="button" onclick="wave()" value="スタート"></form>
</div>
</body>
</html>
obj.charAt()メソッド
指定したテキストから1文字取り出します。
var msg="指定した テキスト";
msg.charAt(i); //i が "1" の場合 "定" になります。
msg.charAt(取り出す文字位置) は "0" から数えます。

0 1 2 3 4 5 6 7 8

こうして取り出した文字に対して、変数 v でフォントサイズを指定します。
これをTimer=setTimeout("wave()",200);で繰り返します。
Timer=setTimeout("wave()",200);
タイマーID=setTimeout("処理関数", 時間) : //時間はミリ秒(1000分の1秒)
指定した時間が経過すると処理関数を実行します。
戻り値としてタイマーIDが返されます。設定したタイマーをクリアするには
clearTimeout()のパラメータにタイマーIDを設定します。
clearTimeout(Timer);
setTimeout() メソッドの処理を停止するメソッド。
setTimeout()の設定で、「タイマーID=setTimeout(処理関数,時間)」としておくと、
そのタイマーIDを clearTimeout メソッドに指定することで、// clearTimeout(タイマーID)
設定したタイマーID名の setTimeout() の処理を中止することができます。
剰余算演算子
a % b、aをbで割った余りを算出します。
%
cnt=0; syuki=5; cnt++; cnt = cnt % syuki; ならば
cntは"1"ずつ増えていき、syukiの値"5"に達したら"0"になります。5%5=0;
上記 左側のボックスの値を"1"ずつ増やして計算してください。
"5"になれば余りは"0"になります。
これを利用してcnt==0;なら flag=!flag; で true と false を切り替え
true ならフォントサイズを小さく、false なら大きくしています。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
JavaScript setTimeout , clearTimeout
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐
文字列から1文字取り出します。charAt()メソッド
文字のサイズを変更
文字列の長さ(文字数)を取り出す。 length プロパティ

続きを読む
posted by javaScript at 15:50 | 大阪 ☀ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする

2012年09月27日

white-space プロパティ

スポンサード リンク

 ソース内の空白文字や改行、自動改行の扱いを指定
normal,nowrap,pre,pre-wrap,pre-line

white-space: normal;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: nowrap;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: pre;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: pre-wrap;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: pre-line;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
<title>white-space プロパティ</title>
<style type="text/css">
<!--
.Wnml{
 width : 300px;
 border : 1px solid lime;
 white-space : normal;  /* 初期値 */
  }

.Wnrp{
 width : 300px;
 border : 1px solid lime;
 white-space : nowrap;
  }

.Wpre{
 width : 300px;
 border : 1px solid lime;
 white-space : pre;
  }

.Wpre-wrap{
 width : 300px;
 border : 1px  solid lime;
 white-space : pre-wrap;
  }

.Wpre-line{
 width : 300px;
 border : 1px  solid lime;
 white-space : pre-line;
 }
-->
</style>
</head>
<body>
<p class="Wnml"><strong>white-space:normal;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち
<p class="Wnrp"><strong>white-space:nowwrap;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち
</p>
<p class="Wpre"><strong>white-space: pre;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち</p>
<p class="Wpre-wrap"><strong>white-space: pre-wrap;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち</p>
<p class="Wpre-line"><strong>white-space: pre-line;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち</p>
</body>
</html>
white-space プロパティ
  連続する複数のスペース、タブを1つの半角スペース(空白)にまとめるか、改行を空白に変換するか
要素の中の文字列を、ボックスの端まできたら自動折り返しするか、
指定する際に使用します。
white-space
normal
 連続する複数のスペース、タブを1つの空白(半角スペース)に転換。 改行を空白に変換。
ボックスの端までくると自動折り返しする。
任意の位置で改行する場合は、br要素などで行います。
nowrap
 normalと同様に連続するスペース、タブを1つの空白に転換。改行を空白に変換。
自動折り返しはしない。ボックスから文字が溢れる場合がある。
pre
 HTMLソースの連続するスペース、タブや改行がそのまま表示される。
自動折り返しはしない。
表示モードが互換モードのとき、IEでは無効 //確認 IE7
(参考)標準モードと互換モード , Mozilla's DOCTYPE
pre-wrap
  preと同様に連続するスペース、タブや改行がそのまま表示されるが
ボックスの端まで行くと自動的な折り返しがされます。
pre-line
  normalと同様に連続するスペース、タブを1つの空白に転換しますが
ソース内の改行位置で改行されます。
ボックスの端までくると自動折り返しする。

*) IE6, 7は  pre-wrappre-lineには未対応、normalと同様の表示になります。

HTML文の改行
<p class="Wnml">javascript123.seesaa.net/</p>
<p class="Wnml">javascript
123.seesaa.net/</p>
──────────────────────────
<p class="Wnml">織田信長</p>
<p class="Wnml">織田
信長</p>

 上記のコードをみてください。値は"normal"です。上下とも<p>タグで書き、まったく 同一です。
ただし内包するテキストは、上は英文で、下は日本語で書いてあり両方とも2行目を改行しています。
下が表示結果です。英文の改行には空白(javascript と 123 の間)が入りますが
日本語では入っていません。些細なことですが......// 確認 IE7  Firefox9では空白が入っています。

javascript123.seesaa.net/

javascript 123.seesaa.net/

織田信長

織田 信長

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
指定した範囲内の文字を抜き出します。substring()メソッド
右から指定した文字数を取り出す substr()メソッド
左から指定した文字数を取り出します substr()メソッド
文字列から1文字取り出します。charAt()メソッド
正規表現による文字列置換 String.replace();
文字列の長さ(文字数)を取り出す。 length プロパティ
一致する文字列の有無を調べます。indexOf()メソッド
javascript 文字、文字列
javascript文字 点滅

タグ:white-space
posted by javaScript at 16:16 | 大阪 ☀ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

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