装飾文字４■レインボー文字　複数

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>装飾文字４■レインボー文字　複数</title>

<style type="text/css"><!--
body{ background:#000;}/*★背景色黒色指定。不要なら削除*/
--></style>

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->

<div style="text-align:center;"><!--レインボー文字の中央位置指定開始。不要なら削除-->

<!--★ここが表示位置。「共通タグ」<span class="rainbow">●●</span> は必須。●●は好きな文章を記述。同じような書き方をすれば、何ヶ所もレインボー文字表示可能-->

<p style="margin:30px auto; background:#aaa; padding:10px; width:350px; border-radius: 20px;"><span class="rainbow" style="font-size:24px; font-weight:bold;">レインボーにする文字</span></p>

<p style="color:#fff;">これは<span class="rainbow">『タグの部屋』</span>のタグ作成機で作成した<br>
<span class="rainbow">JavaScript</span>です。<br>
<br>
<span class="rainbow">「共通タグ」</span>をページの最下部に貼り付けて、<br>
<span class="rainbow">「表示用タグ」</span>を必要な数だけ貼り付けてください。<br>
<br>
<span class="rainbow">▼▲▼▲▼</span><br>
<span class="rainbow">▼▲▼</span><br>
<span class="rainbow">▼</span>
</p>

</div><!--レインボー文字の中央位置指定終了。不要なら削除-->

<!--★ここまで文章表示位置。下に「共通タグ」があります。-->

<!--★以下が「共通タグ」になります。-->
<script type="text/javascript"><!-- 
/*======================================================================
レインボー文字 http://tagnoheya.com/jstag/31/ (サイト名：タグの部屋　http://tagnoheya.com/)
★2017/06/07　即時関数でグローバル変数を削除
=========================================================================*/
(function (){   //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var nameC="rainbow"; //★表示用共通タグのspanのclass名の指定。rainbowで都合が悪い時は変更可
var spd=100;         //★速度原本50。数値が大きいほど遅い

//指定ここまで----------------------------------------------------
var c=document.getElementsByTagName("span"),rainbows=Array(),rainbowX=0;
for(var i=0,n=c.length;i<n;++i){
if(c.item(i).className===nameC){rainbows.push(c.item(i));}}　/*■原本"rainbow"をnameCへ変更*/
for(var i in rainbows){var e=rainbows[i],j,t,s;
t=e.firstChild.nodeValue.split("");
e.removeChild(e.firstChild);
for(j in t){s=document.createElement("span");
s.appendChild(document.createTextNode(t[j]));
e.appendChild(s);}}rainbow();
setInterval(rainbow,spd);
function rainbow(){
for(var rb in rainbows){
for(var ch=rainbows[rb].childNodes,i=0,n=ch.length;
i<n;++i){var x=((rainbowX+i)%16)/16*360,y=(x-Math.floor(x/60)*60)/60,r,g,b;
if(x<60){r=255;g=255*y;b=0}
else if(x<120){r=255-255*y;g=255;b=0}
else if(x<180){r=0;g=255;b=255*y}
else if(x<240){r=0;g=255-255*y;b=255}
else if(x<300){r=255*y;g=0;b=255}
else{r=255;g=0;b=255-255*y}
ch.item(i).style.color="#"+((0x1000000|b|(g<<8)|(r<<16)).toString(16).substr(1));}}++rainbowX;}
}());//即時関数終了
//--></script>
<!--★「共通タグ」終了。コピーここまで-->

</body>
</html>
装飾文字４■ レインボー文字 複数 最終修正日 : 2017/06/07

　装飾文字４■　レインボー文字　複数　　　最終修正日 : 2017/06/07
