Разноцветный текст на JavaScript

Поделиться1Четверг, 29 ноября, 2018г. 16:53:07

Автор: nefakt
Создатель форума
Откуда: Новокузнецк
Зарегистрирован: Понедельник, 26 ноября, 2018г.
Пол: Мужской
Сообщений: 112
Приглашений: 1
Уважение: [+15/-0]
Позитив: [+6/-0]
Провел на форуме:
1 день 0 часов
Последний визит:
Пятница, 29 ноября, 2019г. 20:04:14

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

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

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

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

HTML код:

Код:

<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 код, который делает всю работу по выбору случайного цвета и размера для указанного в форме текста:

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>

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

JavaScript код:

Код:

<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>
В том месте, где Вы планируете выводить разукрашенный посимвольно цветной текст, используйте следующий код:
JavaScript код:Выделить
<script type="text/javascript">
 char_random("Ваша фраза, которую надо разукрасить");
</script>
[

Но учтите, что не стоит использовать данный код для основного содержимого сайта и больших текстов, т.к. это очень затруднит чтение.

+1