装飾文字１■グラデーション文字

●2017/06/07：即時関数で囲んで、グローバル変数を消しました。
グラデーション文字にしたい文章部分を、
<span id="●">グラデーション文字</span>や、<p id="▲">グラデーション文字</p>等で囲みます。
id=●やid=▲、色の指定をJavaScriptの中で指定することで、何ヶ所もグラデーション文字を表示可能です。
なおJavaScriptの中の色指定は、３桁コードではなく６桁コードで指定して下さい。
赤色は「#f00」ではなく「#ff0000」と記述します。
原本は、HIMAJINから。

CSSと併用したJavaScriptはこちら　→　装飾文字２■グラデーション文字＋CSS
さらにランダム表示を加えたJavaScriptはこちら　→　装飾文字３■グラデーション文字ランダム＋CSS

参考 : 16進数4096色カラーチャート

<!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>

</head>
<body>

<!--★ここからコピー。表示位置。「id="●"」は必須。id=●と色の指定はJavaScriptの中で指定。何ヶ所もグラデーション文字表示可能-->

<div style="margin-top:50px; text-align:center;"><!--グラデーション文字の中央位置指定開始。不要なら削除-->

<span id="grad1">簡単に文字にグラデーションを掛けます</span><br>
<span id="grad2">1つのJavaScriptでいくつでもグラデーション文字を作れます。</span><br>
これは　<span id="grad3">himajinサイトのスクリプトです。</span>　↓こんなこともできます。<br> 
<span id="grad4" style="font-size:25px;background:#00f;">★★★★★★★</span><br>

</div><!--グラデーション文字の中央位置指定終了。不要なら削除-->

<script type="text/javascript"><!--
/*===================================================================
グラデーション文字　http://himajin.moo.jp/freejava/Gradienttext.html(サイト:http://himajin.moo.jp)
★2017/06/07　即時関数でグローバル変数を削除
======================================================================*/
(function (){   //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★idと色の指定。G("id名","左の色(16進数)","右の色(16進数)")。何行でも増減可能。色名は6桁コードで指定

G("grad1","#ff0000","#ffff00");
G("grad2","#00ff00","#cc00ff");
G("grad3","#00ffff","#ff00ff");
G("grad4","#ffff00","#0000ff");

//指定ここまで-------------------------------------------------------

function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
function G(gradient_elm,cstart,cend){
var temp=$(gradient_elm).innerHTML;
var n=temp.length;
var gradient_str="";
  var start_r=Number(("0x"+cstart.substring(1, 3)).toString(10));  
  var start_g=Number(("0x"+cstart.substring(3, 5)).toString(10));
  var start_b=Number(("0x"+cstart.substring(5, 7)).toString(10));
  var end_r=Number(("0x"+cend.substring(1, 3)).toString(10));
  var end_g=Number(("0x"+cend.substring(3, 5)).toString(10));
  var end_b=Number(("0x"+cend.substring(5, 7)).toString(10));
  var g_r= Math.floor((start_r-end_r)/n);
  var g_g= Math.floor((start_g-end_g)/n);
  var g_b= Math.floor((start_b-end_b)/n);

for(var i=0;i < n; i++) {
if(temp.charAt(i)==="<")return;
if(start_r-g_r*i<0)temp_r=0;
else if(start_r-g_r*i>255)temp_r=255;
else temp_r=start_r-g_r*i;
temp_r=temp_r.toString(16);
if(temp_r.length===1)temp_r="0"+temp_r;

if(start_g-g_g*i<0)temp_g=0;
else if(start_g-g_g*i>255)temp_g=255;
else temp_g=start_g-g_g*i;
temp_g=temp_g.toString(16);
if(temp_g.length===1)temp_g="0"+temp_g;

if(start_b-g_b*i<0)temp_b=0;
else if(start_b-g_b*i>255)temp_b=255;
else temp_b=start_b-g_b*i;
temp_b=temp_b.toString(16);
if(temp_b.length===1)temp_b="0"+temp_b;
var c="#"+temp_r+temp_g+temp_b;
gradient_str+=temp.charAt(i).fontcolor(c);
}
$(gradient_elm).innerHTML=gradient_str;
}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

装飾文字１■ グラデーション文字 最終修正日 : 2017/06/07

　装飾文字１■　グラデーション文字　　　　最終修正日 : 2017/06/07