Разноцветные буквы и слова на JavaScript - Создание и продвижение сайтов TopWebDesign

Информация о материале: Просмотров: 152500

Внимание! Данные цветные буквы предназначены для html кода страницы, А НЕ ДЛЯ ВОТСАПА. Скопировать этот шрифт и сделать цветные буквы в вотсапе НЕЛЬЗЯ, кроме как вставить картинку.

Порекомендуйте нас, как надежного исполнителя в IT сфере своим клиентам, партнерам, знакомым и получайте за это вознаграждение в 20% от заказа. Подробнее...

Данный скрипт позволяет выделить каждую букву или слово случайным цветом, в результате чего у Вас получится разноцветный текст. Для разнообразия данный скрипт также может изменять случайным образом и размер букв или слов.

Обратите внимание на текст, который расположен ниже. Данный текст был разукрашен при помощи нашего скрипта и если Вы обновите страницу, то цвета и размер букв изменятся.

Данный скрипт разноцветного текста можно использовать разово для генерации случайного оформления текста и полученный результат скопировать себе на сайт, а можно вставить на сайт и тогда каждый раз оформление текста будет разным.

Для получения точно такой же формы для получения цветного текста, как и в примере, показанном выше, используйте следующий код:

<span id="result"></span>
<form name="color_form" action="javascript:char_random()">
<textarea name="string" rows="4" cols="55">
Ваш текст, который нужно разукрасить
</textarea>
<br>
<select name="whois_rand">
 <option value="">Разукрасить буквы</option>
 <option value=" ">Разукрасить слова</option>
</select>
<input type="submit" value="Поехали">
<br><br>
<textarea name="res_code" rows="4" cols="55"></textarea>
</form>

Далее вствляем JavaScript код, который делает выбор случайного цвета и размера для указанного в форме текста:

<script type="text/javascript">
function char_random() {
 var obj=document.color_form;
 var elem=obj.string.value;
 var separator="";
 var exit_str="";
 var colors=new Array(
 "00","11","22","33","44","55","66","77","88","99","AA","BB","CC","DD","EE","FF");
 elem=elem.split(obj.whois_rand.options[obj.whois_rand.selectedIndex].value);
 for (var n=0;n<=(elem.length-1);n++) {
  if (elem[n]==" ") { exit_str+=" "; }
  if (elem[n]!=" ") {
    separator=obj.whois_rand.options[obj.whois_rand.selectedIndex].value;
    var col1=Math.round(Math.random()*(colors.length-1));
    var col2=Math.round(Math.random()*(colors.length-1));
    var col3=Math.round(Math.random()*(colors.length-1));
    var size=Math.round(Math.random()*4)+3;
    exit_str+="<font color=\"#"+colors[col1]+colors[col2]+colors[col3]+
    "\" size=\""+size+"\">"+elem[n]+"</font>"+separator+"";
  }
 }
 obj.res_code.value=exit_str;
 result.innerHTML=exit_str;
}
char_random();
</script>

Если Вам не нужна данная форма для генерации разноцветного текста, и Вы планируете использовать скрипт для получения разноцветного текста на своем сайте, то разместите следующий код в начале вашей страницы:

<script type="text/javascript">
function char_random(str) {
 var elem=str.split("");
 var exit_str="";
 var colors=new Array(
 "00","11","22","33","44","55","66","77","88","99","AA","BB","CC","DD","EE","FF");
 for (var n=0;n<=(elem.length-1);n++) {
  if (elem[n]==" ") { exit_str+=" "; }
  if (elem[n]!=" ") {
    var col1=Math.round(Math.random()*(colors.length-1));
    var col2=Math.round(Math.random()*(colors.length-1));
    var col3=Math.round(Math.random()*(colors.length-1));
    var size=Math.round(Math.random()*4)+3;
    exit_str+="<font color=\"#"+colors[col1]+colors[col2]+colors[col3]+
    "\" size=\""+size+"\">"+elem[n]+"</font>";
  }
 }
 document.write(exit_str);
}
</script>

В том месте, где Вы хотите выводить разукрашенный текст, разместите следующий код:

<script type="text/javascript">
 char_random("Ваша фраза, которую надо разукрасить");
</script>