※ ChatGPTを利用し、要約された質問です（原文：このタグが繰り返しにならないでしょうか？（今は、一度で終わります。））
グラデーションをかけた文字の出力方法
このQ&Aのポイント
JavaScriptを使用して、テキストにグラデーションをかけ、一文字ずつ出力する方法を紹介します。
テキストの出力は、指定したグラデーションの色で一文字ずつ行われます。
この方法を使えば、文字にアニメーション効果を与えることができます。
このタグが繰り返しにならないでしょうか？（今は、一度で終わります。）
このタグが繰り返しにならないでしょうか？（今は、グラデーションが一度で終わります。）
<html>
<head>
<title>文字にグラデーションをかけ１文字ずつ出力する</title>
<script Language="JavaScript"><!--
str = "■■■■■■■■■■■■■■■■■■■■■■■■■■";
count = 0;
function setText1()
{
if (count > str.length) return;
count++;
txt = str.substring(0,count);
txt2 = gradTextConv(txt);
if (document.all) document.all["outText"].innerHTML = txt2;
if (document.layers)
{
document.layers["outText"].document.open();
document.layers["outText"].document.write(txt2);
document.layers["outText"].document.close();
}
setTimeout("setText1()",100);
}
function gradTextConv(sText)
{
p = 16 / str.length;
str2 = "";
for (i=0; i<sText.length; i++)
{
pt = Math.floor(p*i);
n = "0123456789ABCDEF".charAt(pt);
c = "#"+n+n+"0000";
str2 = str2 + "<font size='20' color='"+c+"'>
" + sText.charAt(i) + "</font>";
}
return str2;
}
// --></script>
</head>
<body bgcolor="white" onload="setText1()">
<div id="outText" style="position:absolute;top:50px;left:5px;"></div>
</body>
</html>
お礼
回答ありがとうございました、希望していたとおり、きちんと動いてくれました、ありがとうございました、解決いたしました。