Exemple complet d'effet de dégradé de couleurs en temps réel implémenté par les compétences JS

Exemple complet d'effet de dégradé de couleurs en temps réel implémenté par les compétences JS_javascript

WBOY

Libérer： 2016-05-16 15:08:10

original

1392 Les gens l'ont consulté

L'exemple de cet article décrit l'effet de dégradé de couleurs en temps réel implémenté par JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<div id="div1" style="font-size:36px;">我的闪烁文字 abc123</div>
<span id="span1"></span>
<script type="text/javascript">
var begin = getRGB('#33FFAA');
var end = getRGB('#FF0000');
var curColor = getRGB('#33FFAA');
var bo = true;
var rate = getRate(begin, end);
function blink()
{
  window.setInterval(function(){
    curColor.r = getCur(begin.r, end.r, curColor.r, bo, rate.r);
    curColor.g = getCur(begin.g, end.g, curColor.g, bo, rate.g);
    curColor.b = getCur(begin.b, end.b, curColor.b, bo, rate.b);
    document.getElementById('div1').style.color = getColor(curColor);
    document.getElementById('span1').innerHTML = getColor(curColor);
    if(curColor.r == begin.r && curColor.g == begin.g && curColor.b == begin.b)
    {
      bo = true;
    }
    if(curColor.r == end.r && curColor.g == end.g && curColor.b == end.b)
    {
      bo = false;
    }
  } , 100);
}
function getCur(beginValue, endValue, curValue, bo, rateValue)
{
  if(beginValue == endValue)
  {
    return beginValue;
  }
  rateValue = beginValue < endValue &#63; rateValue : -rateValue;
  curValue += bo &#63; rateValue : -rateValue;
  if(curValue < Math.min(beginValue, endValue))
  {
    curValue = Math.min(beginValue, endValue);
  }
  if(curValue > Math.max(beginValue, endValue))
  {
    curValue = Math.max(beginValue, endValue);
  }
  return curValue;
}
function getRate(b, e)
{
  var obj = new Object();
  obj.r = Math.abs(b.r - e.r) / 5;
  obj.g = Math.abs(b.g - e.g) / 5;
  obj.b = Math.abs(b.b - e.b) / 5;
  return obj;
}
function getRGB(color)
{
  var obj = new Object();
  obj.r = parseInt(color.substr(1,2), 16);
  obj.g = parseInt(color.substr(3,2), 16);
  obj.b = parseInt(color.substr(5,2), 16);
  return obj;
}
function getColor(obj)
{
  obj.r = Math.round(obj.r);
  obj.g = Math.round(obj.g);
  obj.b = Math.round(obj.b);
  var color = '#';
  color += (obj.r < 16 &#63; '0':'') + obj.r.toString(16);
  color += (obj.g < 16 &#63; '0':'') + obj.g.toString(16);
  color += (obj.b < 16 &#63; '0':'') + obj.b.toString(16);
  return color;
}
blink();
</script>
</body>
</html>

Copier après la connexion

Les lecteurs intéressés par davantage de contenu lié à JavaScript peuvent consulter les sujets spéciaux sur ce site : "Résumé des techniques d'algorithme de recherche JavaScript", "Résumé des effets et techniques spéciaux d'animation JavaScript ", "Résumé des erreurs JavaScript et des techniques de débogage", "Résumé des structures de données JavaScript et des techniques d'algorithme", "Résumé des algorithmes et techniques de traversée JavaScript" et "Résumé mathématique JavaScript de l'utilisation des opérations》

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.