cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="wrap">

<div id="a">ある老婦人がチェース・マンハッタン銀行本店に書類鞄を持って入って来た。
  老婦人は、銀行の窓口係に、鞄の中の3百万ドルを預金するために、
口座を開きたい事、多額故に、先ず、銀行の頭取に会いたい旨も告げた。
</div>

<div id="b">その窓口係は、鞄の札束が3百万ドル程なのを確認して、尤もな話だと思い、頭取との会見の予約をした。 
老婦人は、護衛されながら頭取室に入り、紹介が終わり、彼女は、
事業を一緒にやる人達を、個人的にもっと良く知りたいという話をした。
頭取は、どうやってそんな大金を持つに至ったのかを、その老婦人に尋ねた。</div>

<div id="c">「それは遺産なのですか?」</div>
<div id="d">「いいえ」</div>

<div id="e">頭取は数秒ほど沈黙して、この老婦人がどうやって3百万ドルも持ってるのかを考えようとした。</div>

<div id="f">「私は、賭け事をするんですよ」</div>
<div id="g">「競馬か何かですか?」</div>
<div id="h">「いいえ、人々と賭け事をするんですよ」</div>

<div id="i">当惑してる頭取に、彼女は色々な人々と諸々の事に賭け事をするのだと説明した。そして、出し抜けに、老婦人曰く</div>
<div id="j">「明日の朝の10時迄に、貴方の睾丸が四角になってしまう事に、2万5千ドルを賭けましょう!」</div>

<div id="k">頭取は、老婦人の賭け事を受け入れた。
どうやって、その賭けに負けるのかは、見当も付かなかった。

その日は一日中、用心して過ごし、夜は自宅に留り、
危ない事を一切しなかった。何せ、2万5千ドルが掛かってるのだから。

翌日に起きてシャワーを浴びた時も、何も問題が無い事を確認した。
陰嚢の形状には何の変化も無く、彼はいつもと同じでしかなかった。

頭取室に行き鼻歌を歌いながら、老婦人が10時に部屋に来るのを待った。
その日は運が良い日だと思い、何もせずに2万5千ドルも貰えるなんて事が、どれくらい有るものか等と考えていた。
</div>

<div id="l">・・・・・・。</div>

<div id="m">10時キッカリに、老婦人が頭取室に招かれ、或る男性が同行していた。
同行した男性は誰かと頭取が老婦人に尋ねたので、彼女は、自分の弁護士で、こういう大金が賭けられた時には、いつも同行する事を説明した。</div>
  
<div id="n">老婦人:「それじゃ、昨日始めた賭け事の話に入りましょう」</div>
<div id="o">頭取:「どう言ったら良いか分かりませんが、私の睾丸はいつもと同じで、違う事と言えば、今日は、2万5千ドル分だけ、金持ちになっただけですね」</div>
<div id="p">その老婦人は、皆に良く見える様に、頭取にズボンを脱ぐ様に頼んだ。頭取はそれに従い、婦人は睾丸を凝視して、手で触っても良いかと尋ねた。</div>
<div id="q">「ま、良いでしょう。2万5千ドルは大金ですから、 絶対に確実でないと駄目ですからね~」 </div>
<div id="r">その時、頭取は、彼女の弁護士が盛んに壁に頭をぶつけているのを見た。</div>
<div id="s">「彼は、どうかしたんですか?」</div>
<div id="t">老婦人:「何でも有りませんよ。ただ、私は、彼と賭け事をしたんですが、
私は、今朝の10時に、チェース・マンハッタン銀行頭取の睾丸を手で掴む事に、10万ドルを賭けたんですよ」</div>
</div>
            
          
!
            
              html{
  background-color: #eee;  
}
#wrap{
  text-align: left;
  margin: 30px auto;
  padding: 30px 50px;
  width: 70%;
  text-indent:1em;
  background-color: #fff;
}
#wrap div {
    padding: 5px 0 0;
}
            
          
!
            
              var id = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t']; //指定するidを全て配列で渡す
var tx = [];
var txCount = [];
var txSp = 100; // テキストの表示速度
var dly = 1000; // 次の文章までの待ち時間
var count = 0;

window.onload = function(){
  kamikakushi();
  countSet();
  itimozi()
}

function countSet(){ // 文字数カウントの初期設定
  for(n=0;n<id.length;n++){
    txCount[n] = 0;
  }
}


function kamikakushi(){ // 要素を取得して非表示(opacity:0;)にする
  for(i=0;i<id.length;i++){
    id[i] = document.getElementById(id[i]);
    tx[i] = id[i].firstChild.nodeValue; // 初期の文字列
    id[i].innerHTML = '';
  }
}

function itimozi(){ // 一文字ずつ表示
  id[count].innerHTML = tx[count].substr( 0, ++txCount[count] )+"_"; // テキストの指定した数の間の要素を表示
  if(tx[count].length != txCount[count]){ // Count が初期の文字列の文字数と同じになるまでループ
    setTimeout("itimozi()",txSp); // 次の文字へ進む
  }else{
  id[count].innerHTML = tx[count].substr( 0, ++txCount[count] ); // テキストの指定した数の間の要素を表示
    count++; // 次の段落に進む為のカウントアップ
    if(count != id.length){ // id数が最後なら終了
    setTimeout("itimozi()",dly); // 次の段落へ進む
    }
  }
}


            
          
!
999px
Loading ..................

Console