Сейчас: 18:50:47   29-го марта 2024 г.
133
337

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

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


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





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


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

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;
 
document.getElementById("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>

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

Дата создания: 20:23:40 12.10.2012 г.
Посещений: 32241 раз(а).

Комментарии посетителей (2 шт.):
Татьяна
1
# 1595
(16:54:04  13.04.2014 г.)

Классно. У меня чёрный цвет закончился, так статью разноцветным разукрасила.
Ответить

Владимир
0
# 4275
(12:05:31  08.04.2018 г.)

Скрипт - красавец! И работает моментально! А если вдруг что-то не то будет в поле отображения изменений в коде, так достаточно просто браузеру кэш почистить.
Ответить

Закрыть
Ваше имя:
174 + 14 =
Добавить комментарий:
Ваше имя:
174 + 14 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 12

Мешает ли Вам реклама?