abe358534さん
\u0026gt;･･･「文字が1文字ずつタイピングの様に出てくる」HTML+JSのCodePenがありますがHTMLの中にJSを埋め込む方法を教えてください。･･･････
この様なページを作る。↓
\u0026lt;!DOCTYPE html\u0026gt;
\u0026lt;html lang=\u0026quot;ja\u0026quot;\u0026gt;
\u0026lt;head\u0026gt;
\u0026lt;meta charset=\u0026quot;UTF-8\u0026quot;\u0026gt;
\u0026lt;/head\u0026gt;
\u0026lt;body\u0026gt;
\u0026lt;p id=\u0026quot;a\u0026quot;\u0026gt;There is always light behind the clouds\u0026lt;/p\u0026gt;
\u0026lt;p id=\u0026quot;b\u0026quot;\u0026gt;Growth is often a painful process\u0026lt;/p\u0026gt;
\u0026lt;p id=\u0026quot;c\u0026quot;\u0026gt;Change before you have to\u0026lt;/p\u0026gt;
\u0026lt;p id=\u0026quot;d\u0026quot;\u0026gt;If you can dream it, you can do it.\u0026lt;/p\u0026gt;
\u0026lt;p id=\u0026quot;e\u0026quot;\u0026gt;It always seems impossible until it’s done.\u0026lt;/p\u0026gt;
\u0026lt;script\u0026gt;
var id = ['a','b','c','d','e']; //指定するidを全て配列で渡す
var tx = [];
var txCount = [];
var txSp = 70; // テキストの表示速度
var dly = 0; // 次の文章までの待ち時間
var count = 0;
window.onload = function(){
kamikakushi();
countSet();
itimozi()
}
function countSet(){ // 文字数カウントの初期設定
for(n=0;n\u0026lt;id.length;n++){
txCount[n] = 0;
}
}
function kamikakushi(){ // 要素を取得して非表示（opacity:0;）にする
for(i=0;i\u0026lt;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(\u0026quot;itimozi()\u0026quot;,txSp); // 次の文字へ進む
}else{
id[count].innerHTML = tx[count].substr( 0, ++txCount[count] ); // テキストの指定した数の間の要素を表示
count++; // 次の段落に進む為のカウントアップ
if(count != id.length){ // id数が最後なら終了
setTimeout(\u0026quot;itimozi()\u0026quot;,dly); // 次の段落へ進む
}
}
}
\u0026lt;/script\u0026gt;
\u0026lt;/body\u0026gt;
\u0026lt;/html\u0026gt;
